easy_design_system 0.0.21

Elegant and easy-to-use UI/UX design library for Flutter, crafted to enhance your app's aesthetics and user experience.

example/lib/main.dart

import 'package:example/contents/comic_border.content.dart';
import 'package:example/contents/home.content.dart';
import 'package:example/screens/color_scheme/color_scheme.screen.dart';
import 'package:easy_design_system/easy_design_system.dart';
import 'package:example/screens/demo/sleek/sleek.theme.screen.dart';
import 'package:example/screens/demo/login/sleek_login.demo.dart';
import 'package:example/screens/dialog/dialog.screen.dart';
import 'package:example/screens/app_bar/app_bar.screen.dart';
import 'package:example/screens/badge/badge.screen.dart';
import 'package:example/screens/bottom_app_bar/bottom_app_bar.screen.dart';
import 'package:example/screens/bottom_sheet/bottom_sheet.screen.dart';
import 'package:example/screens/buttons/buttons.screen.dart';
import 'package:example/screens/card/card.screen.dart';
import 'package:example/screens/checkbox/checkbox.screen.dart';
import 'package:example/screens/chip/chip.screen.dart';
import 'package:example/screens/demo/comic/comic.theme.screen.dart';
import 'package:example/screens/divider/divider.screen.dart';
import 'package:example/screens/dropdown/dropdown.screen.dart';
import 'package:example/screens/floating_action_button/floating_action_button.screen.dart';
import 'package:example/screens/icon_buttons/icon_buttons.screen.dart';
import 'package:example/screens/list_tile/list_tile.screen.dart';
import 'package:example/screens/entry/basic_carousel_entry.screen.dart';
import 'package:example/screens/entry/round_carousel_entry.screen.dart';
import 'package:example/screens/entry/wave_carousel_entry.screen.dart';
import 'package:example/screens/demo/login/comic_login.demo.dart';
import 'package:example/screens/list_view/comic.list_view.screen.dart';
import 'package:example/screens/list_view/sleek.list_view.screen.dart';
import 'package:example/screens/navigation_drawer/navigation_drawer.screen.dart';
import 'package:example/screens/navigation_bar/navigation_bar.screen.dart';
import 'package:example/screens/navigation_rail.dart/navigation_rail.screen.dart';
import 'package:example/screens/birthdate_picker/birthdate.picker.screen.dart';
import 'package:example/screens/progress_indicator/progress_indicator.screen.dart';
import 'package:example/screens/radio_button/radio_button.dart';
import 'package:example/screens/search/search.screen.dart';
import 'package:example/screens/segmented_button/segmented_button.dart';
import 'package:example/screens/setting/setting.screen.dart';
import 'package:example/screens/sleep_walker/sleep_walker.screen.dart';
import 'package:example/screens/snackbar/snackbars.screen.dart';
import 'package:example/screens/switch/switch.dart';
import 'package:example/screens/tab_bar/tab_bar.screen.dart';
import 'package:example/screens/text_field/text_field.screen.dart';
import 'package:example/screens/text_form_field/text_form_field.screen.dart';
import 'package:example/screens/toggle_button/toggle_button.dart';
import 'package:example/screens/ui_widgets/comic_theme.screen.dart';
import 'package:example/screens/ui_widgets/sleek_theme.screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      themeMode: ThemeMode.dark,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Social Design System'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedIndex = 0;
  bool wideScreen = false;
  bool showSideMenu = false;

  late Widget content;

  @override
  void initState() {
    super.initState();
    content = const HomeContent();
    SchedulerBinding.instance.addPostFrameCallback((_) {
      if (const String.fromEnvironment('MODE') == 'noe') {
        Navigator.of(context).push(
            MaterialPageRoute(builder: (_) => const BirthdatePickerScreen()));
      }
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final double width = MediaQuery.of(context).size.width;
    wideScreen = width > 600;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (wideScreen || showSideMenu)
              SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('Menu'),
                    const ComicTheme(
                      child: SizedBox(
                        width: 200,
                        child: Divider(
                          height: 24,
                        ),
                      ),
                    ),

                    menu(
                      label: 'Home',
                      contentBuilder: () => const HomeContent(),
                    ),
                    menu(
                      label: 'Comic Theme',
                      contentBuilder: () => const ComicScreenDemoScreen(),
                    ),

                    menu(
                      label: 'Sleek Theme',
                      contentBuilder: () => const SleekScreenDemoScreen(),
                    ),

                    menu(
                      label: 'Comic Login',
                      contentBuilder: () => const ComicLoginDemo(),
                    ),

                    menu(
                      label: 'Sleek Login',
                      contentBuilder: () => const SleekLoginDemo(),
                    ),

                    menu(
                      label: 'Comic Theme UI Widgets',
                      contentBuilder: () => const ComicThemeUiWidgetsScreen(),
                    ),

                    menu(
                      label: 'Sleek Theme UI Widgets',
                      contentBuilder: () => const SleekThemeUiWidgetsScreen(),
                    ),

                    const ComicTheme(
                      child: SizedBox(
                        width: 200,
                        child: Divider(
                          height: 24,
                        ),
                      ),
                    ),

                    menu(
                        label: 'Search Widget',
                        contentBuilder: () => const SearchScreen()),
                    menu(
                        label: "AppBar",
                        contentBuilder: () => const AppBarScreen()),
                    menu(
                        label: 'Badge',
                        contentBuilder: () => const BadgeScreen()),

                    menu(
                        label: 'BottomAppBar',
                        contentBuilder: () => const BottomAppBarScreen()),
                    menu(
                        label: 'BottomSheet',
                        contentBuilder: () => const BottomSheetScreen()),
                    menu(
                        label: 'Buttons',
                        contentBuilder: () => const ButtonsScreen()),
                    menu(
                        label: 'Card',
                        contentBuilder: () => const CardScreen()),
                    menu(
                        label: 'Checkbox',
                        contentBuilder: () => const CheckboxScreen()),

                    // menu(label: 'CheckboxListTile', contentBuilder: () => const CheckboxListTileScreen()),
                    menu(
                        label: 'Chip',
                        contentBuilder: () => const ChipScreen()),
                    menu(
                        label: 'Dialog',
                        contentBuilder: () => const DialogScreen()),
                    menu(
                        label: 'Divider',
                        contentBuilder: () => const DividerScreen()),
                    menu(
                        label: 'Dropdown',
                        contentBuilder: () => const DropdownScreen()),
                    menu(
                        label: 'Floating Action Button',
                        contentBuilder: () =>
                            const FloatingActionButtonScreen()),
                    menu(
                        label: 'IconButton',
                        contentBuilder: () => const IconButtonScreen()),
                    menu(
                        label: 'ListTile',
                        contentBuilder: () => const ListTileScreen()),
                    menu(
                        label: 'NavigationBar',
                        contentBuilder: () => const NavigationBarScreen()),
                    menu(
                        label: "NavigationDrawer",
                        contentBuilder: () => const NavigationDrawerScreen()),
                    menu(
                        label: 'NavigationRail',
                        contentBuilder: () => const NavigationRailScreen()),
                    menu(
                        label: 'Progress Indicator',
                        contentBuilder: () => const ProgressIndicatorScreen()),

                    menu(
                        label: 'Radio Button',
                        contentBuilder: () => const RadioButtonScreen()),
                    menu(
                        label: 'Segmented Button',
                        contentBuilder: () => const SegmentedButtonScreen()),
                    menu(
                        label: 'SnackBar',
                        contentBuilder: () => const SnackBarScreen()),

                    menu(
                        label: 'Switch',
                        contentBuilder: () => const SwitchScreen()),
                    menu(
                        label: 'TabBar',
                        contentBuilder: () => const TabBarScreen()),
                    menu(
                        label: 'TextFields',
                        contentBuilder: () => const TextFieldScreen()),
                    menu(
                        label: 'TextFormField',
                        contentBuilder: () => const TextFormFieldScreen()),

                    menu(
                        label: 'Toggle Button',
                        contentBuilder: () => const ToggleButtonScreen()),

                    const Text('Custom Theme Data:'),
                    const ComicTheme(
                      child: SizedBox(
                        width: 200,
                        child: Divider(
                          height: 24,
                        ),
                      ),
                    ),

                    menu(
                      label: 'ComicIconButtonThemeData',
                      contentBuilder: () => const Placeholder(),
                    ),
                    menu(
                      label: 'SleekIconButtonThemeData',
                      contentBuilder: () => const Placeholder(),
                    ),
                    menu(
                      label: 'ComicTextButtonThemeData',
                      contentBuilder: () => const Placeholder(),
                    ),
                    menu(
                      label: 'ComicBorderThemeData',
                      contentBuilder: () => const ComicBorderThemeDataScreen(),
                    ),

                    const Text('Custom Widgets:'),

                    const ComicTheme(
                      child: SizedBox(
                        width: 200,
                        child: Divider(
                          height: 24,
                        ),
                      ),
                    ),

                    menu(
                        label: 'BirthdatePicker',
                        contentBuilder: () => const BirthdatePickerScreen()),
                    menu(
                        label: 'ComicListView',
                        contentBuilder: () => const ComicListViewScreen()),
                    menu(
                        label: 'SleekListView',
                        contentBuilder: () => const SleekListViewScreen()),
                    menu(
                        label: 'Setting',
                        contentBuilder: () => const SettingScreen()),
                    menu(
                        label: 'Basic Carousel Entry',
                        contentBuilder: () => const BasicCarouselEntryScreen()),
                    menu(
                        label: 'Wave Carousel Entry',
                        contentBuilder: () => const WaveCarouselEntryScreen()),
                    menu(
                        label: 'Round Carousel Entry',
                        contentBuilder: () => const RoundCarouselEntryScreen()),
                    menu(
                        label: 'Sleep Walker',
                        contentBuilder: () => const SleepWalkerScreen()),
                    menu(
                        label: 'Color scheme',
                        contentBuilder: () => const ColorSchemeScreen()),
                    menu(
                        label: 'Current theme config',
                        contentBuilder: () => const CurrentThemeScreen()),
                  ],
                ),
              ),
            Expanded(
              child: SingleChildScrollView(child: content),
            ),
          ],
        ),
      ),
      bottomNavigationBar: wideScreen
          ? null
          : SafeArea(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                      onPressed: () {
                        content = const HomeContent();
                        showSideMenu = false;
                        setState(() {});
                      },
                      child: const Text('Home')),
                  ElevatedButton(
                      onPressed: () {
                        showSideMenu = !showSideMenu;
                        setState(() {});
                      },
                      child: const Text('Menu')),
                ],
              ),
            ),
    );
  }

  menu({
    required String label,
    required Widget Function() contentBuilder,
  }) {
    return ElevatedButton(
      onPressed: () {
        content = contentBuilder();
        showSideMenu = false;
        setState(() {});
      },
      child: Text(label),
    );
  }
}