flutter_design_system 1.0.0 flutter_design_system: ^1.0.0 copied to clipboard
Flutter design system & responsive tutorial package.
Flutter Design System #
This is Flutter design system & responsive tutorial package.
Getting started #
Install flutter_design_system
package.
flutter pub add flutter_design_system
Wrap the root widget with ThemeInjector
.
import 'package:flutter_design_system/flutter_design_system.dart';
void main() {
runApp(
const ThemeInjector(
child: MyApp(),
),
);
}
Feature #
Components #
Light | Dark |
---|---|
- AssetIcon
- Badge
- BaseBottomSheet
- BaseDialog
- BaseToast
- Button
- ColorPicker
- CounterButton
- HideKeyboard
- InputField
- Rating
- Tile
Responsive UI #
SizedBox(
width: context.responsive(
100, // Default(mobile)
tablet: 200, // tablet
desktop: 300, // desktop
),
);
Custom Theme #
You can also create custom light and dark theme by implements AppTheme
.
class MyLightTheme implements AppTheme {}
class MyDarkTheme implements AppTheme {}
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(),
),
);
}