true_design_system_component 1.0.5
true_design_system_component: ^1.0.5 copied to clipboard
design system's documentation for detailed guidelines on customization options, accessibility considerations, and best practices for creating a consistent and user-friendly experience.
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,
),
],
),
],
),
),
),
));
}
}