Flutter Design System

This is Flutter design system & responsive tutorial package.

Getting started

  1. Install flutter_design_system package.
flutter pub add flutter_design_system
  1. Wrap the root widget with ThemeInjector.
import 'package:flutter_design_system/flutter_design_system.dart';

void main() {
    const ThemeInjector(
      child: MyApp(),
  1. Pass context.themeService.themeData and navigatorKey to MaterialApp, and call Toast.init() in builder.
final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

Widget build(BuildContext context) {
  return MaterialApp(
    navigatorKey: navigatorKey,
    theme: context.themeService.themeData,
    builder: (context, child) => Toast.init(navigatorKey, child),


House of Tomorrow


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() {
      themeService: ThemeService(
        brightness: Brightness.dark, // Current theme
        lightTheme: MyLightTheme(), // My light theme
        darkTheme: MyDarkTheme(), // My dark theme
      child: const MyApp(),


Light Theme Dark Theme
Light theme components image Dark theme components image

Responsive UI

    width: context.layout(
        100, // base(mobile)
        tablet: 200, // tablet
        desktop: 300, // desktop