flutter_design_system 1.0.1

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(),
    ),
  );
}

Demo

Flutter design system tutorial