From 0e46ac55a61c6fa8668e0b213e91fe325881dfe6 Mon Sep 17 00:00:00 2001 From: Qun Cheng <36861262+QuncCccccc@users.noreply.github.com> Date: Tue, 27 Sep 2022 15:13:36 -0700 Subject: [PATCH] Add Radios, CircularProgressIndicator and LinearProgressIndicator to the demo app (#1442) * Added Radios, CircularProgressIndicator and LinearProgressIndicator * Modified README * Fixed readme comment * Changed layout of indicators * Ran Flutter format command * Put two indicators to one row * Fixed comment * Ran flutter format Co-authored-by: Qun Cheng --- experimental/material_3_demo/README.md | 4 +- .../material_3_demo/lib/component_screen.dart | 96 +++++++++++++++++++ .../test/component_screen_test.dart | 10 ++ 3 files changed, 108 insertions(+), 2 deletions(-) diff --git a/experimental/material_3_demo/README.md b/experimental/material_3_demo/README.md index 61a028c9c..5004795c7 100644 --- a/experimental/material_3_demo/README.md +++ b/experimental/material_3_demo/README.md @@ -2,7 +2,7 @@ This sample Flutter app showcases Material 3 features in the Flutter Material library. These features include updated components, typography, color system and elevation support. The app supports light and dark themes, different color palettes, as well as the ability to switch between Material 2 and Material 3. For more information about Material 3, the guidance is now live at https://m3.material.io/. -This app also includes new M3 components that haven't landed in the Flutter stable channel, such as IconButtons, Chips, TextFields, Switches and Checkboxes. The app will be migrated to the non-experimental directory in the samples repo once all the components land in the stable branch. For more information about the components in the stable channel, please check the "material_3_demo" in the non-experimental directory. +This app also includes new M3 components that haven't landed in the Flutter stable channel, such as IconButtons, Chips, TextFields, Switches, Checkboxes, Radio buttons and ProgressIndicators. The app will be migrated to the non-experimental directory in the samples repo once all the components land in the stable branch. For more information about the components in the stable channel, please check the "material_3_demo" in the non-experimental directory. # Preview @@ -18,7 +18,7 @@ This app also includes new M3 components that haven't landed in the Flutter stab This button will bring up a pop-up menu that allows the user to change the base color used for the light and dark themes. This uses a new color seed feature to generate entire color schemes from a single color. ## Component Screen -The default screen displays all the updated components in Material 3: AppBar, common Buttons, Floating Action Button(FAB), Chips, Card, Checkbox, Dialog, NavigationBar, NavigationRail, TextFields and Switch. +The default screen displays all the updated components in Material 3: AppBar, common Buttons, Floating Action Button(FAB), Chips, Card, Checkbox, Dialog, NavigationBar, NavigationRail, ProgressIndicators, Radio buttons, TextFields and Switch. ### Adaptive Layout Based on the fact that NavigationRail is not recommended on a small screen, the app changes its layout based on the screen width. If it's played on iOS or Android devices which have a narrow screen, a Navigation Bar will show at the bottom and will be used to navigate. But if it's played as a desktop or a web app, a Navigation Rail will show on the left side and at the same time, a Navigation Bar will show as an example but will not have any functionality. diff --git a/experimental/material_3_demo/lib/component_screen.dart b/experimental/material_3_demo/lib/component_screen.dart index c82735d1e..b14f5bcbe 100644 --- a/experimental/material_3_demo/lib/component_screen.dart +++ b/experimental/material_3_demo/lib/component_screen.dart @@ -42,6 +42,10 @@ class ComponentScreen extends StatelessWidget { colDivider, const Checkboxes(), colDivider, + const Radios(), + colDivider, + const ProgressIndicators(), + colDivider, showNavBottomBar ? const NavigationBars( selectedIndex: 0, @@ -629,6 +633,98 @@ class _CheckboxRowState extends State { } } +enum Value { first, second } + +class Radios extends StatefulWidget { + const Radios({super.key}); + + @override + State createState() => _RadiosState(); +} + +class _RadiosState extends State { + Value? _value = Value.first; + + @override + Widget build(BuildContext context) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Radio( + value: Value.first, + groupValue: _value, + onChanged: (value) { + setState(() { + _value = value; + }); + }, + ), + Radio( + value: Value.second, + groupValue: _value, + onChanged: (value) { + setState(() { + _value = value; + }); + }, + ), + ], + ); + } +} + +class ProgressIndicators extends StatefulWidget { + const ProgressIndicators({super.key}); + + @override + State createState() => _ProgressIndicatorsState(); +} + +class _ProgressIndicatorsState extends State { + bool playProgressIndicator = false; + + @override + Widget build(BuildContext context) { + final double? progressValue = playProgressIndicator ? null : 0.7; + + return Column( + children: [ + Row( + children: [ + IconButton( + isSelected: playProgressIndicator, + selectedIcon: const Icon(Icons.pause), + icon: const Icon(Icons.play_arrow), + onPressed: () { + setState(() { + playProgressIndicator = !playProgressIndicator; + }); + }, + ), + Expanded( + child: Row( + children: [ + CircularProgressIndicator( + value: progressValue, + ), + const SizedBox( + width: 10, + ), + Expanded( + child: LinearProgressIndicator( + value: progressValue, + ), + ) + ], + ), + ), + ], + ), + ], + ); + } +} + const List appBarDestinations = [ NavigationDestination( tooltip: 'Updated component list', diff --git a/experimental/material_3_demo/test/component_screen_test.dart b/experimental/material_3_demo/test/component_screen_test.dart index be80be7d3..91508a48b 100644 --- a/experimental/material_3_demo/test/component_screen_test.dart +++ b/experimental/material_3_demo/test/component_screen_test.dart @@ -63,6 +63,16 @@ void main() { // Checkboxes Finder checkboxExample = find.byType(Checkbox); expect(checkboxExample, findsNWidgets(8)); + + // Radios + Finder radioExample = find.byType(Radio); + expect(radioExample, findsNWidgets(2)); + + // ProgressIndicator + Finder circularProgressIndicator = find.byType(CircularProgressIndicator); + expect(circularProgressIndicator, findsOneWidget); + Finder linearProgressIndicator = find.byType(LinearProgressIndicator); + expect(linearProgressIndicator, findsOneWidget); }); testWidgets(