true_design_system_component 1.0.4

true_design_system_component: ^1.0.4 copied to clipboard

example/lib/main.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:tds_component_example/component/buttons.dart';
import 'package:tds_component_example/component/tds_colors.dart';
import 'package:tds_component_example/component/typographys.dart';
import 'package:true_design_system_component/true_design_system_component.dart';

Future<void> main() async {
  await runZonedGuarded(() async {
    WidgetsFlutterBinding.ensureInitialized();
    runApp(const App());
  }, (error, stack) {});
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

enum ThemesMode { light, dark, system }

class _AppState extends State<App> {
  ThemesMode? _mode = ThemesMode.light;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    bool isDarkMode = false;
    setState(() {
      var brightness =
          SchedulerBinding.instance.platformDispatcher.platformBrightness;
      isDarkMode = brightness == Brightness.dark;
    });

    ThemeMode getThemeMode() {
      if (_mode == ThemesMode.light) {
        return ThemeMode.light;
      } else if (_mode == ThemesMode.dark) {
        return ThemeMode.dark;
      } else {
        return isDarkMode ? ThemeMode.dark : ThemeMode.light;
      }
    }

    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'True Design System Component',
        themeMode: getThemeMode(),
        theme: TDSThemes.lightTheme,
        darkTheme: TDSThemes.darkTheme,
        home: Scaffold(
          appBar: AppBar(
            title: const Text(
              'True Design System Component',
            ),
          ),
          body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(20, 12, 20, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  SizedBox(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: ListTile(
                            contentPadding: const EdgeInsets.all(1),
                            minLeadingWidth: 10,
                            title: const Text('Light',
                                style: TextStyle(fontSize: 12)),
                            leading: Radio<ThemesMode>(
                              value: ThemesMode.light,
                              groupValue: _mode,
                              onChanged: (ThemesMode? value) {
                                setState(() {
                                  _mode = value;
                                });
                              },
                            ),
                          ),
                        ),
                        Expanded(
                          child: ListTile(
                            contentPadding: const EdgeInsets.all(1),
                            title: const Text('Dark',
                                style: TextStyle(fontSize: 12)),
                            leading: Radio<ThemesMode>(
                              value: ThemesMode.dark,
                              groupValue: _mode,
                              onChanged: (ThemesMode? value) {
                                setState(() {
                                  _mode = value;
                                });
                              },
                            ),
                          ),
                        ),
                        Expanded(
                          child: ListTile(
                            contentPadding: const EdgeInsets.all(1),
                            title: const Text('System',
                                style: TextStyle(fontSize: 12)),
                            leading: Radio<ThemesMode>(
                              value: ThemesMode.system,
                              groupValue: _mode,
                              onChanged: (ThemesMode? value) {
                                setState(() {
                                  _mode = value;
                                });
                              },
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  const ExpansionTile(
                    title: Text("Buttons"),
                    leading: Icon(Icons.info_outline), //add icon
                    childrenPadding:
                        EdgeInsets.only(left: 60), //children padding
                    children: [
                      Buttons(),
                      SizedBox(
                        height: 24,
                      ),
                    ],
                  ),
                  const ExpansionTile(
                    title: Text("Typographys"),
                    leading: Icon(Icons.info_outline), //add icon
                    childrenPadding:
                        EdgeInsets.only(left: 60), //children padding
                    children: [
                      Typographys(),
                      SizedBox(
                        height: 24,
                      ),
                    ],
                  ),
                  const ExpansionTile(
                    title: Text("Colors"),
                    leading: Icon(Icons.info_outline), //add icon
                    childrenPadding:
                        EdgeInsets.only(left: 10), //children padding
                    children: [
                      TDSColorsEx(),
                      SizedBox(
                        height: 24,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}