flutter_design_system

Description:

flutter design system

Flutter Design System #
This is Flutter design system & responsive tutorial package.
Getting started #

Install flutter_design_system package.

flutter pub add flutter_design_system
copied to clipboard

Wrap the root widget with ThemeInjector.

import 'package:flutter_design_system/flutter_design_system.dart';

void main() {
runApp(
const ThemeInjector(
child: MyApp(),
),
);
}
copied to clipboard

Pass context.themeService.themeData and navigatorKey to MaterialApp, and call Toast.init() in builder.

final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

@override
Widget build(BuildContext context) {
return MaterialApp(
navigatorKey: navigatorKey,
theme: context.themeService.themeData,
builder: (context, child) => Toast.init(navigatorKey, child),
...
);
}
copied to clipboard
Demo #
House of Tomorrow
Feature #
Custom Theme #
You can also create custom light and dark theme by implements AppTheme.
class MyLightTheme implements AppTheme {}
class MyDarkTheme implements AppTheme {}
copied to clipboard
Inject your custom themes as below.
void main() {
runApp(
ThemeInjector(
themeService: ThemeService(
brightness: Brightness.dark, // Current theme
lightTheme: MyLightTheme(), // My light theme
darkTheme: MyDarkTheme(), // My dark theme
),
child: const MyApp(),
),
);
}
copied to clipboard
Components #



Light Theme
Dark Theme









Responsive UI #
SizedBox(
width: context.layout(
100, // base(mobile)
tablet: 200, // tablet
desktop: 300, // desktop
),
);
copied to clipboard