From 6cdc23ccb1e750f7bfe4712d8b8f8ee97194f449 Mon Sep 17 00:00:00 2001 From: Feichtmeier Date: Tue, 8 Aug 2023 23:34:59 +0200 Subject: [PATCH 1/2] chore: example rewrite Fixes #380 --- example/lib/colors.dart | 1 + example/lib/containers.dart | 1 + example/lib/controls.dart | 1 + example/lib/example.dart | 5 + example/lib/fonts.dart | 1 + example/lib/home.dart | 2 + example/lib/main.dart | 3 +- .../lib/{view => src/colors}/colors_view.dart | 0 example/lib/src/constants.dart | 2 + .../lib/src/containers/containers_view.dart | 89 ++++ example/lib/src/controls/buttons.dart | 78 +++ example/lib/src/controls/chips.dart | 41 ++ example/lib/src/controls/controls_view.dart | 57 +++ example/lib/src/controls/fabs.dart | 35 ++ example/lib/src/controls/progres.dart | 50 ++ example/lib/src/controls/toggleables.dart | 72 +++ .../lib/{view => src/fonts}/fonts_view.dart | 37 +- .../lib/{view => src/home}/color_disk.dart | 0 example/lib/src/home/home_page.dart | 245 +++++++++ .../lib/src/textfields/text_fields_view.dart | 97 ++++ example/lib/textfields.dart | 1 + example/lib/view/containers_view.dart | 91 ---- example/lib/view/controls_view.dart | 480 ------------------ example/lib/view/home_page.dart | 258 ---------- example/lib/view/inputs_view.dart | 129 ----- 25 files changed, 803 insertions(+), 973 deletions(-) create mode 100644 example/lib/colors.dart create mode 100644 example/lib/containers.dart create mode 100644 example/lib/controls.dart create mode 100644 example/lib/example.dart create mode 100644 example/lib/fonts.dart create mode 100644 example/lib/home.dart rename example/lib/{view => src/colors}/colors_view.dart (100%) create mode 100644 example/lib/src/constants.dart create mode 100644 example/lib/src/containers/containers_view.dart create mode 100644 example/lib/src/controls/buttons.dart create mode 100644 example/lib/src/controls/chips.dart create mode 100644 example/lib/src/controls/controls_view.dart create mode 100644 example/lib/src/controls/fabs.dart create mode 100644 example/lib/src/controls/progres.dart create mode 100644 example/lib/src/controls/toggleables.dart rename example/lib/{view => src/fonts}/fonts_view.dart (67%) rename example/lib/{view => src/home}/color_disk.dart (100%) create mode 100644 example/lib/src/home/home_page.dart create mode 100644 example/lib/src/textfields/text_fields_view.dart create mode 100644 example/lib/textfields.dart delete mode 100644 example/lib/view/containers_view.dart delete mode 100644 example/lib/view/controls_view.dart delete mode 100644 example/lib/view/home_page.dart delete mode 100644 example/lib/view/inputs_view.dart diff --git a/example/lib/colors.dart b/example/lib/colors.dart new file mode 100644 index 00000000..fc62d238 --- /dev/null +++ b/example/lib/colors.dart @@ -0,0 +1 @@ +export 'src/colors/colors_view.dart'; diff --git a/example/lib/containers.dart b/example/lib/containers.dart new file mode 100644 index 00000000..4a175750 --- /dev/null +++ b/example/lib/containers.dart @@ -0,0 +1 @@ +export 'src/containers/containers_view.dart'; diff --git a/example/lib/controls.dart b/example/lib/controls.dart new file mode 100644 index 00000000..8fb2d014 --- /dev/null +++ b/example/lib/controls.dart @@ -0,0 +1 @@ +export 'src/controls/controls_view.dart'; diff --git a/example/lib/example.dart b/example/lib/example.dart new file mode 100644 index 00000000..15400609 --- /dev/null +++ b/example/lib/example.dart @@ -0,0 +1,5 @@ +export 'containers.dart'; +export 'controls.dart'; +export 'home.dart'; +export 'textfields.dart'; +export 'colors.dart'; diff --git a/example/lib/fonts.dart b/example/lib/fonts.dart new file mode 100644 index 00000000..ea188e71 --- /dev/null +++ b/example/lib/fonts.dart @@ -0,0 +1 @@ +export 'src/fonts/fonts_view.dart'; diff --git a/example/lib/home.dart b/example/lib/home.dart new file mode 100644 index 00000000..4b3ea0c8 --- /dev/null +++ b/example/lib/home.dart @@ -0,0 +1,2 @@ +export 'src/home/color_disk.dart'; +export 'src/home/home_page.dart'; diff --git a/example/lib/main.dart b/example/lib/main.dart index 5614b80b..4cd2af33 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:yaru/yaru.dart'; -import 'package:yaru_example/view/home_page.dart'; + +import 'home.dart'; void main() { runApp(const MyApp()); diff --git a/example/lib/view/colors_view.dart b/example/lib/src/colors/colors_view.dart similarity index 100% rename from example/lib/view/colors_view.dart rename to example/lib/src/colors/colors_view.dart diff --git a/example/lib/src/constants.dart b/example/lib/src/constants.dart new file mode 100644 index 00000000..f1d9bbd3 --- /dev/null +++ b/example/lib/src/constants.dart @@ -0,0 +1,2 @@ +const kWrapSpacing = 20.0; +const kWrapPadding = 20.0; diff --git a/example/lib/src/containers/containers_view.dart b/example/lib/src/containers/containers_view.dart new file mode 100644 index 00000000..27a249e8 --- /dev/null +++ b/example/lib/src/containers/containers_view.dart @@ -0,0 +1,89 @@ +import 'package:flutter/material.dart'; +import 'package:yaru_example/src/constants.dart'; + +class ContainersView extends StatefulWidget { + const ContainersView({super.key}); + + @override + State createState() => _ContainersViewState(); +} + +class _ContainersViewState extends State { + var _elevation = 2.0; + var _inDialog = true; + + @override + Widget build(BuildContext context) { + final card = Card( + elevation: _elevation, + child: const SizedBox( + height: 150, + width: 200, + child: Center( + child: Text('Card'), + ), + ), + ); + + final slider = Row( + mainAxisSize: MainAxisSize.min, + children: [ + Padding( + padding: const EdgeInsets.only(left: 10), + child: Text(_elevation.toStringAsFixed(2)), + ), + Slider( + value: _elevation, + max: 10, + min: 0, + onChanged: (value) => setState(() => _elevation = value), + ), + ], + ); + + final containerWithBorder = Padding( + padding: const EdgeInsets.all(12.0), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + border: Border.all(color: Theme.of(context).dividerColor), + ), + child: const Padding( + padding: EdgeInsets.symmetric(horizontal: 70, vertical: 50), + child: Text('Just a border'), + ), + ), + ); + + final children = [ + card, + slider, + containerWithBorder, + ]; + + return SizedBox( + width: 400, + child: Column( + children: [ + const SizedBox( + height: kWrapSpacing, + ), + Switch( + value: _inDialog, + onChanged: (v) => setState( + () => _inDialog = v, + ), + ), + if (_inDialog) + SimpleDialog( + shadowColor: Colors.black, + contentPadding: const EdgeInsets.all(kWrapSpacing), + children: children, + ) + else + ...children + ], + ), + ); + } +} diff --git a/example/lib/src/controls/buttons.dart b/example/lib/src/controls/buttons.dart new file mode 100644 index 00000000..74bc51fc --- /dev/null +++ b/example/lib/src/controls/buttons.dart @@ -0,0 +1,78 @@ +import 'package:flutter/material.dart'; +import 'package:yaru_example/src/constants.dart'; + +class Buttons extends StatefulWidget { + const Buttons({super.key}); + + @override + State createState() => _ButtonsState(); +} + +class _ButtonsState extends State { + void incrementCounter() { + setState(() { + ScaffoldMessenger.of(context) + .showSnackBar(const SnackBar(content: Text('Yay! ❤️ for Yaru'))); + }); + } + + @override + Widget build(BuildContext context) { + final buttons = <(Widget, Widget)>[ + ( + TextButton( + onPressed: () {}, + child: const Text('Text'), + ), + const TextButton( + onPressed: null, + autofocus: true, + child: Text('Text'), + ), + ), + ( + OutlinedButton( + onPressed: () {}, + child: const Text('Outlined'), + ), + const OutlinedButton( + onPressed: null, + child: Text('Outlined'), + ), + ), + ( + FilledButton( + onPressed: () {}, + child: const Text('Filled'), + ), + const FilledButton( + onPressed: null, + child: Text('Filled'), + ), + ), + ( + ElevatedButton( + onPressed: () {}, + child: const Text('Elevated'), + ), + const ElevatedButton( + onPressed: null, + child: Text('Elevated'), + ), + ), + ]; + + return Wrap( + direction: Axis.vertical, + spacing: kWrapSpacing, + runSpacing: kWrapSpacing, + children: [ + for (final button in buttons) + Wrap( + spacing: kWrapSpacing, + children: [button.$1, button.$2], + ) + ], + ); + } +} diff --git a/example/lib/src/controls/chips.dart b/example/lib/src/controls/chips.dart new file mode 100644 index 00000000..18002522 --- /dev/null +++ b/example/lib/src/controls/chips.dart @@ -0,0 +1,41 @@ +import 'package:flutter/material.dart'; +import 'package:yaru_example/src/constants.dart'; + +class Chips extends StatelessWidget { + const Chips({super.key}); + + @override + Widget build(BuildContext context) { + return Wrap( + spacing: kWrapSpacing, + runSpacing: kWrapSpacing, + children: [ + const Chip(label: Text('Ch-ch-ch-Chip n Dale ')), + Chip( + label: const Text('Rescue Rangers'), + onDeleted: () {}, + ), + const ChoiceChip( + label: Text('Ch-ch-ch-Chip n Dale '), + selected: false, + onSelected: null, + ), + ChoiceChip( + label: const Text('When there s danger '), + selected: true, + onSelected: (value) {}, + ), + const ChoiceChip( + label: Text('No,no it never fails'), + selected: true, + onSelected: null, + ), + ChoiceChip( + label: const Text('Once they re involved'), + selected: false, + onSelected: (value) {}, + ) + ], + ); + } +} diff --git a/example/lib/src/controls/controls_view.dart b/example/lib/src/controls/controls_view.dart new file mode 100644 index 00000000..ccd5f77f --- /dev/null +++ b/example/lib/src/controls/controls_view.dart @@ -0,0 +1,57 @@ +import 'package:flutter/material.dart'; +import 'package:yaru_example/src/controls/chips.dart'; +import 'package:yaru_example/src/controls/fabs.dart'; + +import 'buttons.dart'; +import 'progres.dart'; +import 'toggleables.dart'; + +class ControlsView extends StatefulWidget { + const ControlsView({super.key}); + + @override + State createState() => _ControlsViewState(); +} + +class _ControlsViewState extends State + with TickerProviderStateMixin { + late TabController tabController; + final items = const <(Widget, Widget)>[ + (Tab(text: 'Buttons'), Buttons()), + (Tab(text: 'Fabs'), Fabs()), + (Tab(text: 'ToggleAbles'), ToggleAbles()), + (Tab(text: 'Chips'), Chips()), + (Tab(text: 'Progress'), Progress()) + ]; + + @override + void initState() { + tabController = TabController(length: items.length, vsync: this); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + TabBar( + controller: tabController, + tabs: items.map((e) => e.$1).toList(), + ), + Expanded( + child: TabBarView( + controller: tabController, + children: items + .map( + (e) => Padding( + padding: const EdgeInsets.all(20), + child: e.$2, + ), + ) + .toList(), + ), + ), + ], + ); + } +} diff --git a/example/lib/src/controls/fabs.dart b/example/lib/src/controls/fabs.dart new file mode 100644 index 00000000..0ac3e55f --- /dev/null +++ b/example/lib/src/controls/fabs.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:yaru_example/src/constants.dart'; + +class Fabs extends StatelessWidget { + const Fabs({super.key}); + + @override + Widget build(BuildContext context) { + void onPressed() => ScaffoldMessenger.of(context) + .showSnackBar(const SnackBar(content: Text('Yay! ❤️ for Yaru'))); + + return Wrap( + spacing: kWrapSpacing, + runSpacing: kWrapSpacing, + children: [ + FloatingActionButton( + onPressed: onPressed, + child: const Icon(Icons.plus_one), + ), + FloatingActionButton.extended( + onPressed: onPressed, + label: const Text('Yay! +1 ❤️ for Yaru'), + ), + FloatingActionButton.small( + onPressed: onPressed, + child: const Icon(Icons.plus_one), + ), + FloatingActionButton.large( + onPressed: onPressed, + child: const Icon(Icons.plus_one), + ), + ], + ); + } +} diff --git a/example/lib/src/controls/progres.dart b/example/lib/src/controls/progres.dart new file mode 100644 index 00000000..34009529 --- /dev/null +++ b/example/lib/src/controls/progres.dart @@ -0,0 +1,50 @@ +import 'package:flutter/material.dart'; +import 'package:yaru_example/src/constants.dart'; + +class Progress extends StatefulWidget { + const Progress({super.key}); + + @override + State createState() => _ProgressState(); +} + +class _ProgressState extends State { + var _elevation = 1.0; + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(kWrapPadding), + child: Wrap( + spacing: kWrapSpacing, + runSpacing: kWrapSpacing, + children: [ + const SizedBox( + width: 300, + child: LinearProgressIndicator(), + ), + Wrap( + spacing: kWrapSpacing, + children: [ + const CircularProgressIndicator(), + CircularProgressIndicator( + value: _elevation, + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text(_elevation.toStringAsFixed(2)), + Slider( + value: _elevation, + max: 1, + min: 0, + onChanged: (value) => setState(() => _elevation = value), + ), + ], + ), + ], + ), + ); + } +} diff --git a/example/lib/src/controls/toggleables.dart b/example/lib/src/controls/toggleables.dart new file mode 100644 index 00000000..69903b73 --- /dev/null +++ b/example/lib/src/controls/toggleables.dart @@ -0,0 +1,72 @@ +import 'package:flutter/material.dart'; +import 'package:yaru_example/src/constants.dart'; + +class ToggleAbles extends StatelessWidget { + const ToggleAbles({super.key}); + + @override + Widget build(BuildContext context) { + return Wrap( + spacing: 10, + runSpacing: 10, + children: [ + Row( + children: [ + Checkbox(value: true, onChanged: (_) {}), + Checkbox(value: false, onChanged: (_) {}), + const Checkbox(value: true, onChanged: null), + const Checkbox(value: false, onChanged: null), + ], + ), + Row( + children: [ + Radio( + value: true, + groupValue: true, + onChanged: (_) {}, + ), + Radio( + value: false, + groupValue: true, + onChanged: (_) {}, + ), + const Radio( + value: true, + groupValue: true, + onChanged: null, + ), + const Radio( + value: false, + groupValue: true, + onChanged: null, + ), + ], + ), + Row( + children: [ + Switch(onChanged: (value) {}, value: true), + Switch(onChanged: (value) {}, value: false), + const Switch(value: true, onChanged: null), + const Switch(value: false, onChanged: null), + ], + ), + Row( + children: [ + ToggleButtons( + isSelected: const [true, false, false], + onPressed: (v) {}, + children: const [Text('Off'), Text('Off'), Text('Off')], + ), + const SizedBox( + width: kWrapSpacing, + ), + ToggleButtons( + isSelected: const [true, false, false], + children: const [Text('Off'), Text('Off'), Text('Off')], + ), + ], + ) + ], + ); + } +} diff --git a/example/lib/view/fonts_view.dart b/example/lib/src/fonts/fonts_view.dart similarity index 67% rename from example/lib/view/fonts_view.dart rename to example/lib/src/fonts/fonts_view.dart index 858db62d..0d12cc30 100644 --- a/example/lib/view/fonts_view.dart +++ b/example/lib/src/fonts/fonts_view.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:yaru_example/src/constants.dart'; class FontsView extends StatelessWidget { const FontsView({super.key}); @@ -6,58 +7,66 @@ class FontsView extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( - padding: const EdgeInsets.all(15.0), + padding: const EdgeInsets.all(kWrapSpacing), children: [ Text( - 'headline1', + 'displayLarge', style: Theme.of(context).textTheme.displayLarge, ), Text( - 'headline2', + 'displayMedium', style: Theme.of(context).textTheme.displayMedium, ), Text( - 'headline3', + 'displaySmall', style: Theme.of(context).textTheme.displaySmall, ), Text( - 'headline4', + 'headlineLarge', + style: Theme.of(context).textTheme.headlineLarge, + ), + Text( + 'headlineMedium', style: Theme.of(context).textTheme.headlineMedium, ), Text( - 'headline5', + 'headlineSmall', style: Theme.of(context).textTheme.headlineSmall, ), Text( - 'headline6', + 'titleLarge', style: Theme.of(context).textTheme.titleLarge, ), Text( - 'subtitle1', + 'titleMedium', style: Theme.of(context).textTheme.titleMedium, ), Text( - 'subtitle2', + 'titleSmall', style: Theme.of(context).textTheme.titleSmall, ), Text( - 'bodyText1', + 'bodyLarge', style: Theme.of(context).textTheme.bodyLarge, ), Text( - 'bodyText2', + 'bodyMedium', style: Theme.of(context).textTheme.bodyMedium, ), Text( - 'caption', + 'bodySmall', style: Theme.of(context).textTheme.bodySmall, ), Text( - 'button', + 'labelLarge', style: Theme.of(context).textTheme.labelLarge, ), Text( - 'overline', + 'labelMedium', + style: Theme.of(context).textTheme.labelMedium, + ), + Text( + 'labelSmall', style: Theme.of(context).textTheme.labelSmall, ), ], diff --git a/example/lib/view/color_disk.dart b/example/lib/src/home/color_disk.dart similarity index 100% rename from example/lib/view/color_disk.dart rename to example/lib/src/home/color_disk.dart diff --git a/example/lib/src/home/home_page.dart b/example/lib/src/home/home_page.dart new file mode 100644 index 00000000..380f42ec --- /dev/null +++ b/example/lib/src/home/home_page.dart @@ -0,0 +1,245 @@ +import 'package:flutter/material.dart'; +import 'package:yaru/yaru.dart'; +import 'package:yaru_example/main.dart'; +import 'package:yaru_example/src/constants.dart'; +import 'package:yaru_example/src/home/color_disk.dart'; +import 'package:yaru_example/src/colors/colors_view.dart'; +import 'package:yaru_example/src/containers/containers_view.dart'; +import 'package:yaru_example/src/controls/controls_view.dart'; +import 'package:yaru_example/src/fonts/fonts_view.dart'; +import 'package:yaru_example/src/textfields/text_fields_view.dart'; + +class HomePage extends StatefulWidget { + const HomePage({Key? key}) : super(key: key); + + @override + HomePageState createState() => HomePageState(); +} + +class HomePageState extends State { + HomePageState(); + + int _selectedIndex = 0; + + final _items = { + const FontsView(): ( + const Badge( + label: Text('123'), + child: Icon(Icons.font_download_outlined), + ), + const Badge( + label: Text('123'), + child: Icon(Icons.font_download), + ), + 'Fonts' + ), + const ControlsView(): ( + const Icon(Icons.radio_button_checked_outlined), + const Icon(Icons.radio_button_checked), + 'Controls' + ), + const TextFieldsView(): ( + const Icon(Icons.text_fields_outlined), + const Icon(Icons.text_fields), + 'TextFields' + ), + const ColorsView(): ( + const Icon(Icons.color_lens_outlined), + const Icon(Icons.color_lens), + 'Palette' + ), + const ContainersView(): ( + const Icon(Icons.square_outlined), + const Icon(Icons.square), + 'Containers' + ), + }; + + @override + Widget build(BuildContext context) { + return Scaffold( + drawer: _Drawer( + selectedIndex: _selectedIndex, + onSelected: (index) { + setState(() => _selectedIndex = index); + Navigator.of(context).pop(); + }, + items: _items, + ), + appBar: AppBar( + title: const _Title(), + actions: const [ + Padding( + padding: EdgeInsets.only(right: kWrapSpacing), + child: _ThemeButton(), + ), + ], + ), + body: LayoutBuilder( + builder: (context, constraints) { + if (constraints.maxWidth > 800) { + return Row( + children: [ + NavigationRail( + destinations: [ + for (final item in _items.entries) + NavigationRailDestination( + icon: item.value.$1, + selectedIcon: item.value.$2, + label: Text(item.value.$3), + ), + ], + selectedIndex: _selectedIndex, + onDestinationSelected: (index) => + setState(() => _selectedIndex = index), + ), + const VerticalDivider( + width: 0.0, + ), + Expanded( + child: Center( + child: _items.entries.elementAt(_selectedIndex).key, + ), + ) + ], + ); + } else { + return Column( + children: [ + Expanded( + child: Center( + child: _items.entries.elementAt(_selectedIndex).key, + ), + ), + const Divider( + height: 0.0, + ), + NavigationBar( + destinations: [ + for (final item in _items.entries) + NavigationDestination( + icon: item.value.$1, + selectedIcon: item.value.$2, + label: item.value.$3, + ), + ], + selectedIndex: _selectedIndex, + onDestinationSelected: (index) => + setState(() => _selectedIndex = index), + ), + ], + ); + } + }, + ), + ); + } +} + +class _ThemeButton extends StatelessWidget { + const _ThemeButton(); + + @override + Widget build(BuildContext context) { + final theme = YaruTheme.of(context); + final light = theme.themeMode == ThemeMode.light; + + return PopupMenuButton( + icon: Icon( + Icons.color_lens, + color: Theme.of(context).primaryColor, + ), + itemBuilder: (context) { + return [ + PopupMenuItem( + onTap: () => AppTheme.apply(context, highContrast: true), + child: Row( + children: [ + ColorDisk( + color: light ? Colors.black : Colors.white, + selected: theme.highContrast == true, + ), + const Text('highContrast') + ], + ), + ), + for (final variant in YaruVariant.values) // skip flavors + PopupMenuItem( + onTap: () => AppTheme.apply( + context, + variant: variant, + highContrast: false, + ), + child: Row( + children: [ + ColorDisk( + color: variant.color, + selected: + variant == theme.variant && theme.highContrast != true, + ), + Text(variant.name) + ], + ), + ) + ]; + }, + ); + } +} + +class _Title extends StatelessWidget { + const _Title(); + + @override + Widget build(BuildContext context) { + final theme = YaruTheme.of(context); + var light = theme.themeMode == ThemeMode.light; + + return IconButton( + onPressed: () { + return AppTheme.apply( + context, + themeMode: light ? ThemeMode.dark : ThemeMode.light, + ); + }, + icon: Icon( + light ? Icons.light_mode : Icons.dark_mode, + ), + ); + } +} + +class _Drawer extends StatelessWidget { + const _Drawer({ + required this.items, + required this.onSelected, + required this.selectedIndex, + }); + + final Map items; + final Function(int index) onSelected; + final int selectedIndex; + + @override + Widget build(BuildContext context) { + return Drawer( + child: ListView( + padding: EdgeInsets.zero, + children: [ + const DrawerHeader( + child: Text('Drawer Header'), + ), + for (var i = 0; i < items.length; i++) + ListTile( + selected: i == selectedIndex, + leading: i == selectedIndex + ? items.entries.elementAt(i).value.$2 + : items.entries.elementAt(i).value.$1, + title: Text(items.entries.elementAt(i).value.$3), + onTap: () => onSelected(i), + ), + ], + ), + ); + } +} diff --git a/example/lib/src/textfields/text_fields_view.dart b/example/lib/src/textfields/text_fields_view.dart new file mode 100644 index 00000000..fd636807 --- /dev/null +++ b/example/lib/src/textfields/text_fields_view.dart @@ -0,0 +1,97 @@ +import 'package:flutter/material.dart'; +import 'package:yaru_example/src/constants.dart'; + +class TextFieldsView extends StatefulWidget { + const TextFieldsView({super.key}); + + @override + State createState() => _TextFieldsViewState(); +} + +class _TextFieldsViewState extends State { + late TextEditingController textController; + + @override + void initState() { + super.initState(); + textController = TextEditingController( + text: + 'My code fails, I do not know why.\nMy code works, I do not know why.\nText in other scripts: Tamaziɣt Taqbaylit, 中文(简体), Čeština, Беларуская, Ελληνικά, עברית, Русский, བོད་ཡིག, Norsk bokmål.', + ); + } + + @override + void dispose() { + textController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + final children = [ + Row( + children: [ + Expanded( + child: OutlinedButton( + onPressed: () {}, + child: const Text( + 'Outlined Button', + overflow: TextOverflow.ellipsis, + ), + ), + ), + const SizedBox( + width: kWrapSpacing, + ), + const Expanded( + child: TextField( + decoration: InputDecoration( + labelText: 'Username', + ), + ), + ), + ], + ), + const TextField( + enabled: false, + onChanged: null, + decoration: InputDecoration( + labelText: 'Disabled', + ), + ), + const TextField( + obscureText: true, + decoration: InputDecoration( + labelText: 'Password', + ), + ), + const TextField( + decoration: InputDecoration( + errorText: "You're doing it wrong", + ), + ), + TextField( + keyboardType: TextInputType.multiline, + controller: textController, + minLines: 5, + maxLines: 5, + ), + const DropdownMenu( + dropdownMenuEntries: [ + DropdownMenuEntry(value: 1, label: '1'), + DropdownMenuEntry(value: 2, label: '2'), + DropdownMenuEntry(value: 3, label: '3') + ], + ), + ]; + + return Padding( + padding: const EdgeInsets.all(18.0), + child: ListView.separated( + itemBuilder: (context, index) => children[index], + separatorBuilder: (context, index) => const SizedBox(height: 15), + itemCount: children.length, + ), + ); + } +} diff --git a/example/lib/textfields.dart b/example/lib/textfields.dart new file mode 100644 index 00000000..8230561e --- /dev/null +++ b/example/lib/textfields.dart @@ -0,0 +1 @@ +export 'src/textfields/text_fields_view.dart'; diff --git a/example/lib/view/containers_view.dart b/example/lib/view/containers_view.dart deleted file mode 100644 index 24ae4dbe..00000000 --- a/example/lib/view/containers_view.dart +++ /dev/null @@ -1,91 +0,0 @@ -import 'package:flutter/material.dart'; - -class ContainersView extends StatefulWidget { - const ContainersView({super.key}); - - @override - State createState() => _ContainersViewState(); -} - -class _ContainersViewState extends State { - var _elevation = 2.0; - - @override - Widget build(BuildContext context) { - var card = Row( - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: Card( - elevation: _elevation, - child: const Padding( - padding: EdgeInsets.symmetric(horizontal: 100, vertical: 50), - child: Text('Card'), - ), - ), - ), - ], - ); - var slider = Row( - children: [ - Padding( - padding: const EdgeInsets.only(left: 10), - child: Text(_elevation.toStringAsFixed(2)), - ), - Slider( - value: _elevation, - max: 10, - min: 0, - onChanged: (value) => setState(() => _elevation = value), - ), - ], - ); - - var containerWithBorder = Row( - children: [ - Padding( - padding: const EdgeInsets.all(12.0), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - border: Border.all(color: Theme.of(context).dividerColor), - ), - child: const Padding( - padding: EdgeInsets.symmetric(horizontal: 70, vertical: 50), - child: Text('Just a border'), - ), - ), - ) - ], - ); - - return ListView( - children: [ - card, - slider, - const Divider(), - containerWithBorder, - const Divider(), - Padding( - padding: const EdgeInsets.only(left: 40, top: 10), - child: Text( - 'Dialog', - style: Theme.of(context).textTheme.headlineMedium, - ), - ), - Row( - children: [ - SimpleDialog( - shadowColor: Colors.black, - children: [ - card, - slider, - containerWithBorder, - ], - ), - ], - ) - ], - ); - } -} diff --git a/example/lib/view/controls_view.dart b/example/lib/view/controls_view.dart deleted file mode 100644 index eacfb5b1..00000000 --- a/example/lib/view/controls_view.dart +++ /dev/null @@ -1,480 +0,0 @@ -import 'package:flutter/material.dart'; - -class ControlsView extends StatefulWidget { - const ControlsView({super.key}); - - @override - State createState() => _ControlsViewState(); -} - -class _ControlsViewState extends State - with TickerProviderStateMixin { - late TabController tabController; - int _counter = 0; - - final List _toggleButtons = [true, false, false]; - int _dropdownIndex = 1; - - void updateBoolList(List arr, int index) { - if (index < 0 || index > arr.length) return; - setState(() { - for (int i = 0; i < arr.length; i++) { - arr[i] = i == index; - } - }); - } - - void incrementCounter() { - setState(() { - _counter++; - ScaffoldMessenger.of(context) - .showSnackBar(SnackBar(content: Text('Yay! $_counter ❤️ for Yaru'))); - }); - } - - @override - void initState() { - tabController = TabController(length: 4, vsync: this); - super.initState(); - } - - @override - Widget build(BuildContext context) { - return Column( - children: [ - TabBar( - controller: tabController, - tabs: const [ - Padding( - padding: EdgeInsets.all(12.0), - child: Text('Buttons'), - ), - Padding( - padding: EdgeInsets.all(12.0), - child: Text('Checks'), - ), - Padding( - padding: EdgeInsets.all(12.0), - child: Text('Switches'), - ), - Padding( - padding: EdgeInsets.all(12.0), - child: Text('Progress'), - ) - ], - ), - Expanded( - child: TabBarView( - controller: tabController, - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: ListView( - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - children: [ - SizedBox( - width: 95, - child: TextButton( - onPressed: () {}, - child: const Text('Text'), - ), - ), - const SizedBox(width: 15), - const SizedBox( - width: 95, - child: TextButton( - onPressed: null, - autofocus: true, - child: Text('Disabled'), - ), - ), - const Spacer(), - ], - ), - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - children: [ - SizedBox( - width: 95, - child: OutlinedButton( - onPressed: () {}, - child: const Text('Outlined'), - ), - ), - const SizedBox(width: 15), - const SizedBox( - width: 95, - child: OutlinedButton( - onPressed: null, - child: Text('Disabled'), - ), - ), - ], - ), - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - children: [ - SizedBox( - width: 95, - child: FilledButton( - onPressed: () {}, - child: const Text('Filled'), - ), - ), - const SizedBox(width: 15), - const SizedBox( - width: 95, - child: FilledButton( - onPressed: null, - child: Text('Disabled'), - ), - ), - ], - ), - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - children: [ - SizedBox( - width: 95, - child: ElevatedButton( - onPressed: () {}, - child: const Text('Elevated'), - ), - ), - const SizedBox(width: 15), - const SizedBox( - width: 95, - child: ElevatedButton( - onPressed: null, - child: Text('Disabled'), - ), - ), - ], - ), - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: SizedBox( - height: 40, - child: Row( - children: [ - ToggleButtons( - isSelected: _toggleButtons, - onPressed: (v) => - updateBoolList(_toggleButtons, v), - children: [ - for (final v in _toggleButtons) - Text(v ? 'On' : 'Off'), - ], - ), - const SizedBox(width: 15), - ToggleButtons( - isSelected: const [true, false, false], - children: const [ - Text('Off'), - Text('Off'), - Text('Off') - ], - ), - ], - ), - ), - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: Wrap( - spacing: 10, - runSpacing: 10, - children: [ - FloatingActionButton( - onPressed: incrementCounter, - child: const Icon(Icons.plus_one), - ), - FloatingActionButton.extended( - onPressed: incrementCounter, - label: const Text('Yay! +1 ❤️ for Yaru'), - ), - FloatingActionButton.small( - onPressed: incrementCounter, - child: const Icon(Icons.plus_one), - ), - FloatingActionButton.large( - onPressed: incrementCounter, - child: const Icon(Icons.plus_one), - ), - ], - ), - ), - Padding( - padding: const EdgeInsets.all(12.0), - child: Row( - children: [ - DropdownButton( - onChanged: (v) { - setState(() { - _dropdownIndex = v ?? 1; - }); - }, - value: _dropdownIndex, - items: const >[ - DropdownMenuItem( - value: 1, - child: Text(' One '), - ), - DropdownMenuItem( - value: 2, - child: Text(' Two '), - ), - DropdownMenuItem( - value: 3, - child: Text(' Three '), - ), - ], - ), - ], - ), - ), - const Padding( - padding: EdgeInsets.all(12.0), - child: Row( - children: [ - DropdownMenu( - dropdownMenuEntries: [ - DropdownMenuEntry(value: 1, label: '1'), - DropdownMenuEntry(value: 2, label: '2'), - DropdownMenuEntry(value: 3, label: '3') - ], - ), - SizedBox( - width: 12, - ), - DropdownMenu( - label: Text('Label'), - dropdownMenuEntries: [ - DropdownMenuEntry(value: 1, label: '1'), - DropdownMenuEntry(value: 2, label: '2'), - DropdownMenuEntry(value: 3, label: '3') - ], - ) - ], - ), - ), - Row( - children: [ - IconButton( - splashRadius: 20, - onPressed: () => showDialog( - context: context, - builder: (context) => SimpleDialog( - title: const Center(child: Text('Dialog Title')), - titlePadding: const EdgeInsets.only(top: 15), - children: [ - Center( - child: Column( - children: [ - for (var i = 0; i < 10; i++) - const Padding( - padding: EdgeInsets.all(8.0), - child: Text('Content'), - ), - ], - ), - ), - ], - ), - ), - icon: const Text('Show Dialog'), - ), - ], - ), - Row( - children: [ - PopupMenuButton( - icon: const Text('Show Popup-menu'), - initialValue: 'Hello', - itemBuilder: (context) { - return [ - for (final string in ['a', 'b', 'c']) - PopupMenuItem( - value: string, - child: Text(string), - ) - ]; - }, - ), - ], - ), - Row( - children: [ - const Chip(label: Text('Ch-ch-ch-Chip n Dale ')), - const SizedBox( - width: 10, - ), - Chip( - label: const Text('Rescue Rangers'), - onDeleted: () {}, - ), - ], - ), - const SizedBox( - height: 10, - ), - Row( - children: [ - const ChoiceChip( - label: Text('Ch-ch-ch-Chip n Dale '), - selected: false, - onSelected: null, - ), - const SizedBox( - width: 10, - ), - ChoiceChip( - label: const Text('When there s danger '), - selected: true, - onSelected: (value) {}, - ) - ], - ), - const SizedBox( - height: 10, - ), - Row( - children: [ - const ChoiceChip( - label: Text('No,no it never fails'), - selected: true, - onSelected: null, - ), - const SizedBox( - width: 10, - ), - ChoiceChip( - label: const Text('Once they re involved'), - selected: false, - onSelected: (value) {}, - ) - ], - ) - ], - ), - ), - ListView( - shrinkWrap: true, - padding: const EdgeInsets.all(15.0), - children: [ - Row( - children: [ - Column( - children: [ - const Text('Checkbox'), - Row( - children: [ - Checkbox(value: true, onChanged: (_) {}), - Checkbox(value: false, onChanged: (_) {}), - const Checkbox(value: true, onChanged: null), - const Checkbox(value: false, onChanged: null), - ], - ), - const Text('Radio'), - Row( - children: [ - Radio( - value: true, - groupValue: true, - onChanged: (_) {}, - ), - Radio( - value: false, - groupValue: true, - onChanged: (_) {}, - ), - const Radio( - value: true, - groupValue: true, - onChanged: null, - ), - const Radio( - value: false, - groupValue: true, - onChanged: null, - ), - ], - ), - ], - ), - ], - ), - const SizedBox(height: 15), - ], - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - children: [ - Switch(onChanged: (value) {}, value: true), - const Text('Yes'), - ], - ), - Row( - children: [ - Switch(onChanged: (value) {}, value: false), - const Text('No'), - ], - ), - const Row( - children: [ - Switch( - value: true, - onChanged: null, - ), - Text('Disabled Yes'), - ], - ), - const Row( - children: [ - Switch( - value: false, - onChanged: null, - ), - Text('Disabled No'), - ], - ), - ], - ), - ), - const Column( - children: [ - Padding( - padding: EdgeInsets.all(18.0), - child: Row( - children: [ - CircularProgressIndicator(), - ], - ), - ), - Padding( - padding: EdgeInsets.all(18.0), - child: LinearProgressIndicator(), - ), - ], - ), - ], - ), - ), - ], - ); - } -} diff --git a/example/lib/view/home_page.dart b/example/lib/view/home_page.dart deleted file mode 100644 index f92d0c46..00000000 --- a/example/lib/view/home_page.dart +++ /dev/null @@ -1,258 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:yaru/yaru.dart'; -import 'package:yaru_example/main.dart'; -import 'package:yaru_example/view/color_disk.dart'; -import 'package:yaru_example/view/colors_view.dart'; -import 'package:yaru_example/view/containers_view.dart'; -import 'package:yaru_example/view/controls_view.dart'; -import 'package:yaru_example/view/fonts_view.dart'; -import 'package:yaru_example/view/inputs_view.dart'; - -class HomePage extends StatefulWidget { - const HomePage({Key? key}) : super(key: key); - - @override - HomePageState createState() => HomePageState(); -} - -class HomePageState extends State { - HomePageState(); - - final textController = TextEditingController( - text: - 'My code fails, I do not know why.\nMy code works, I do not know why.\nText in other scripts: Tamaziɣt Taqbaylit, 中文(简体), Čeština, Беларуская, Ελληνικά, עברית, Русский, བོད་ཡིག, Norsk bokmål.', - ); - - int _selectedIndex = 0; - final List _views = [ - const FontsView(), - const ControlsView(), - const InputsView(), - const ColorsView(), - const ContainersView() - ]; - - @override - Widget build(BuildContext context) { - final theme = YaruTheme.of(context); - - void selectIndex(int index) { - setState(() => _selectedIndex = index); - Navigator.of(context).pop(); - } - - return Scaffold( - drawer: _Drawer( - selectedIndex: _selectedIndex, - selectIndex: selectIndex, - ), - appBar: AppBar( - title: SizedBox( - width: 50, - child: Padding( - padding: const EdgeInsets.all(8.0), - child: TextButton( - style: TextButton.styleFrom( - padding: const EdgeInsets.all(0), - shape: const CircleBorder(), - ), - onPressed: () => AppTheme.apply( - context, - themeMode: theme.themeMode == ThemeMode.light - ? ThemeMode.dark - : ThemeMode.light, - ), - child: Icon( - theme.themeMode == ThemeMode.light - ? Icons.dark_mode - : Icons.light_mode, - ), - ), - ), - ), - actions: [ - PopupMenuButton( - icon: Icon( - Icons.color_lens, - color: Theme.of(context).primaryColor, - ), - itemBuilder: (context) { - return [ - PopupMenuItem( - onTap: () => AppTheme.apply(context, highContrast: true), - child: Row( - children: [ - ColorDisk( - color: theme.themeMode == ThemeMode.light - ? Colors.black - : Colors.white, - selected: theme.highContrast == true, - ), - const Text('highContrast') - ], - ), - ), - for (final variant in YaruVariant.values) // skip flavors - PopupMenuItem( - onTap: () => AppTheme.apply( - context, - variant: variant, - highContrast: false, - ), - child: Row( - children: [ - ColorDisk( - color: variant.color, - selected: variant == theme.variant && - theme.highContrast != true, - ), - Text(variant.name) - ], - ), - ) - ]; - }, - ), - ], - ), - body: LayoutBuilder( - builder: (context, constraints) { - if (constraints.maxWidth > 800) { - return Row( - children: [ - NavigationRail( - destinations: const [ - NavigationRailDestination( - icon: Badge( - label: Text('123'), - child: Icon(Icons.font_download_outlined), - ), - selectedIcon: Badge( - label: Text('123'), - child: Icon(Icons.font_download), - ), - label: Text('Fonts'), - ), - NavigationRailDestination( - icon: Icon(Icons.radio_button_checked_outlined), - selectedIcon: Icon(Icons.radio_button_checked), - label: Text('Controls'), - ), - NavigationRailDestination( - icon: Icon(Icons.text_fields), - selectedIcon: Icon(Icons.text_fields_outlined), - label: Text('Text Fields'), - ), - NavigationRailDestination( - icon: Icon(Icons.color_lens_outlined), - selectedIcon: Icon(Icons.color_lens), - label: Text('Palette'), - ), - NavigationRailDestination( - icon: Icon(Icons.square_outlined), - selectedIcon: Icon(Icons.square), - label: Text('Containers'), - ) - ], - selectedIndex: _selectedIndex, - onDestinationSelected: (index) => - setState(() => _selectedIndex = index), - ), - const VerticalDivider( - width: 0.0, - ), - Expanded(child: Center(child: _views[_selectedIndex])) - ], - ); - } else { - return Column( - children: [ - Expanded(child: Center(child: _views[_selectedIndex])), - const Divider( - height: 0.0, - ), - NavigationBar( - destinations: const [ - NavigationDestination( - icon: Badge( - label: Text('123'), - child: Icon(Icons.font_download_outlined), - ), - selectedIcon: Badge( - label: Text('123'), - child: Icon(Icons.font_download), - ), - label: 'Fonts', - ), - NavigationDestination( - icon: Icon(Icons.radio_button_checked_outlined), - selectedIcon: Icon(Icons.radio_button_checked), - label: 'Controls', - ), - NavigationDestination( - icon: Icon(Icons.text_fields), - selectedIcon: Icon(Icons.text_fields_outlined), - label: 'Text Fields', - ), - NavigationDestination( - icon: Icon(Icons.color_lens_outlined), - selectedIcon: Icon(Icons.color_lens), - label: 'Palette', - ), - NavigationDestination( - icon: Icon(Icons.square_outlined), - selectedIcon: Icon(Icons.square), - label: 'Containers', - ), - ], - selectedIndex: _selectedIndex, - onDestinationSelected: (index) => - setState(() => _selectedIndex = index), - ), - ], - ); - } - }, - ), - ); - } -} - -class _Drawer extends StatelessWidget { - const _Drawer({ - required int selectedIndex, - required this.selectIndex, - }) : _selectedIndex = selectedIndex; - - final int _selectedIndex; - final Function(int index) selectIndex; - - @override - Widget build(BuildContext context) { - final map = { - 'Fonts': Icons.font_download, - 'Controls': Icons.radio_button_checked, - 'Text Fields': Icons.text_fields, - 'Palette': Icons.palette, - 'Containers': Icons.square_outlined, - }; - - return Drawer( - child: ListView( - padding: EdgeInsets.zero, - children: [ - const DrawerHeader( - child: Text('Drawer Header'), - ), - for (int i = 0; i < map.length; i++) - ListTile( - selected: _selectedIndex == i, - leading: Icon(map.entries.elementAt(i).value), - title: Text(map.entries.elementAt(i).key), - onTap: () => selectIndex(i), - ), - ], - ), - ); - } -} diff --git a/example/lib/view/inputs_view.dart b/example/lib/view/inputs_view.dart deleted file mode 100644 index 1f30372a..00000000 --- a/example/lib/view/inputs_view.dart +++ /dev/null @@ -1,129 +0,0 @@ -import 'package:flutter/material.dart'; - -class InputsView extends StatefulWidget { - const InputsView({super.key}); - - @override - State createState() => _InputsViewState(); -} - -class _InputsViewState extends State { - late TextEditingController textController; - - @override - void initState() { - super.initState(); - textController = TextEditingController( - text: - 'My code fails, I do not know why.\nMy code works, I do not know why.\nText in other scripts: Tamaziɣt Taqbaylit, 中文(简体), Čeština, Беларуская, Ελληνικά, עברית, Русский, བོད་ཡིག, Norsk bokmål.', - ); - } - - @override - void dispose() { - textController.dispose(); - super.dispose(); - } - - @override - Widget build(BuildContext context) { - final buttonTextFieldRow = SizedBox( - width: 500, - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Expanded( - child: OutlinedButton( - onPressed: () {}, - child: const Text('Outlined Button'), - ), - ), - const SizedBox( - width: 10, - ), - const Expanded( - child: OutlinedButton( - onPressed: null, - child: Text('Outlined Button'), - ), - ), - const SizedBox( - width: 10, - ), - const Expanded( - child: TextField( - autofocus: true, - decoration: InputDecoration( - prefix: Padding( - padding: EdgeInsets.only(right: 5), - child: Icon( - Icons.text_fields, - size: 16, - ), - ), - prefixIconConstraints: BoxConstraints(minHeight: 100), - hintText: 'Awesome Textfield', - labelText: 'Awesome Textfield', - ), - ), - ), - ], - ), - ); - return Padding( - padding: const EdgeInsets.all(18.0), - child: ListView( - children: [ - buttonTextFieldRow, - const SizedBox(height: 15), - const TextField( - decoration: InputDecoration( - labelText: 'Username', - ), - ), - const SizedBox(height: 15), - const TextField( - enabled: false, - onChanged: null, - decoration: InputDecoration( - labelText: 'Disabled', - ), - ), - const SizedBox(height: 15), - const TextField( - obscureText: true, - decoration: InputDecoration( - labelText: 'Password', - ), - ), - const SizedBox(height: 15), - const TextField( - decoration: InputDecoration( - errorText: "You're doing it wrong", - ), - ), - const SizedBox(height: 15), - TextField( - keyboardType: TextInputType.multiline, - controller: textController, - minLines: 5, - maxLines: 5, - ), - const SizedBox(height: 15), - OutlinedButton( - onPressed: () => showDialog( - context: context, - builder: (context) { - return SimpleDialog( - contentPadding: const EdgeInsets.all(20), - children: [buttonTextFieldRow], - ); - }, - ), - child: const Text('Check in dialog'), - ) - ], - ), - ); - } -} From 640ac016aed9be0557aa8487feec6d8f4556454f Mon Sep 17 00:00:00 2001 From: Feichtmeier Date: Wed, 9 Aug 2023 19:50:33 +0200 Subject: [PATCH 2/2] fix: add slider with value --- example/lib/src/controls/progres.dart | 52 ++++++++++++++------------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/example/lib/src/controls/progres.dart b/example/lib/src/controls/progres.dart index 34009529..317f911c 100644 --- a/example/lib/src/controls/progres.dart +++ b/example/lib/src/controls/progres.dart @@ -9,39 +9,43 @@ class Progress extends StatefulWidget { } class _ProgressState extends State { - var _elevation = 1.0; + var _level = 1.0; + final _width = 300.0; @override Widget build(BuildContext context) { + final children = [ + SizedBox( + width: _width, + child: LinearProgressIndicator(value: _level), + ), + CircularProgressIndicator(value: _level), + SizedBox(width: _width, child: const LinearProgressIndicator()), + const CircularProgressIndicator(), + ]; + return Padding( padding: const EdgeInsets.all(kWrapPadding), - child: Wrap( - spacing: kWrapSpacing, - runSpacing: kWrapSpacing, + child: Column( children: [ + SizedBox( + width: _width, + child: Slider( + value: _level, + max: 1, + min: 0, + onChanged: (value) => setState(() => _level = value), + ), + ), const SizedBox( - width: 300, - child: LinearProgressIndicator(), + height: kWrapSpacing, ), Wrap( spacing: kWrapSpacing, - children: [ - const CircularProgressIndicator(), - CircularProgressIndicator( - value: _elevation, - ), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text(_elevation.toStringAsFixed(2)), - Slider( - value: _elevation, - max: 1, - min: 0, - onChanged: (value) => setState(() => _elevation = value), - ), - ], + runSpacing: kWrapSpacing, + crossAxisAlignment: WrapCrossAlignment.center, + direction: Axis.vertical, + verticalDirection: VerticalDirection.down, + children: children, ), ], ),