Changes due to issue: flutter/flutter#100027

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to the **FlexColorScheme** package are documented here.
 
-## v5.0.0-dev.1 - March 10, 2022 - WORK IN PROGRESS
+## v5.0.0-dev.1 - March 14, 2022 - WORK IN PROGRESS
 
 Version 5 is a big refactor with deprecation of previous `variant` based
 color names in favor of `container` ones that were added to updated M3
@@ -472,6 +472,18 @@ should be relatively easy, despite the long list of changes and new features.
   to return black color for these two particular cases, even if the Flutter 
   contrast color computation says it should be white, but M2 spec is black.
 
+**KNOWN ISSUES**
+
+* Due to Flutter SDK 
+  [issue #100027](https://github.com/flutter/flutter/issues/100027)
+  "Using systemNavigationBarDividerColor changes statusBarIconBrightness and 
+  systemNavigationBarIconBrightness on Android 11" a number of temporary
+  changes were made to `FlexColorScheme.themedSystemNavigationBar`. The
+  divider feature is disabled until the issue has been resolved. There is
+  also a temporary workaround implemented that attempts to keep system icon 
+  brightness getting the wrong brightness on Android 11, it may not always
+  work.
+
 **EXAMPLES and Themes Playground**
 * Update examples 1...4
   - Add a few of the new features to examples 3 and 4.

README.md

@@ -34,7 +34,14 @@
 >    using copy-pasted theme setup code from the Themes Playground is also up-to-date.
 >
 > **Q:** Will there be significant changes from 5.0.0-dev.1 to 5.0.0?  
-> **A:** Most likely none, other than potential fixes.
+> **A:** Most likely none, other than potential fixes. Of course the point with a dev
+> release is also to let the API mature a bit and see if it needs to be tweaked a bit,
+> but I hope not. Some new colors for the M3 scheme might need to be adjusted
+> a bit still before release. I would even like to make minor changes to some 
+> original colors that has been in FlexColorScheme since v1, but since I said 
+> in th docs that I won't touch them ever. I will just have to accept that some 
+> of them are not perfect choices for ColorSchemes considering the way M3 
+> is designed to use its colors.
 > 
 > **Q:** What remains to be done before stable 5.0.0 release?  
 > **A:** Documentation, either in this readme or as own docs site. Plus adding many still missing tests.

example/lib/example1/main.dart

@@ -46,7 +46,7 @@ class _DemoAppState extends State<DemoApp> {
       // Same definition for the dark theme, but using FlexThemeData.dark().
       darkTheme: FlexThemeData.dark(
         scheme: usedScheme,
-        // Use a bit stronger themed app bar elevation in dark mode.
+        // Use a bit more themed elevated app bar in dark mode.
         appBarElevation: 2,
       ),
       // Use the above dark or light theme based on active themeMode.

example/lib/example5/home_page.dart

@@ -111,11 +111,7 @@ class _HomePageState extends State<HomePage> {
         context,
         systemNavBarStyle: widget.controller.navBarStyle,
         useDivider: widget.controller.useNavDivider,
-        // In this demo app we are sharing the same setting as used on the
-        // bottom navigation bars opacity, just to not make another setting
-        // parameter. Normally you would probably hard code this to the
-        // desired design.
-        opacity: widget.controller.bottomNavigationBarOpacity,
+        opacity: widget.controller.sysBarOpacity,
       ),
       child: ResponsiveScaffold(
         extendBodyBehindAppBar: true,

example/lib/example5/utils/generate_colorscheme_dart_code.dart

@@ -2,8 +2,11 @@ import 'package:flutter/material.dart';
 
 // Function that returns the passed in Flutter ColorScheme object as Dart code
 String generateColorSchemeDartCode(ColorScheme scheme) {
+  final String schemeName = scheme.brightness == Brightness.light
+      ? 'flexSchemeLight'
+      : 'flexSchemeDark';
   final String code = '''
-const ColorScheme myFlexColorScheme = ColorScheme(
+const ColorScheme $schemeName = ColorScheme(
   brightness: ${scheme.brightness},
   primary: ${scheme.primary},
   onPrimary: ${scheme.onPrimary},

example/lib/example5/widgets/panels/navigation_bar_settings/android_navigation_bar_settings.dart

@@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
 
 import '../../../../shared/controllers/theme_controller.dart';
 import '../../../../shared/widgets/universal/header_card.dart';
-import '../../../../shared/widgets/universal/switch_list_tile_adaptive.dart';
 import 'system_nav_bar_style_buttons.dart';
 
 // Panel used to control the themed Android system navigation bar on Android.
@@ -46,10 +45,7 @@ class AndroidNavigationBarSettings extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final bool isLight = Theme.of(context).brightness == Brightness.light;
-    final double navBarOpacity =
-        controller.useSubThemes && controller.useFlexColorScheme
-            ? controller.bottomNavigationBarOpacity
-            : 1;
+    final double navBarOpacity = controller.sysBarOpacity;
     return HeaderCard(
       isOpen: isOpen,
       onTap: onTap,
@@ -59,30 +55,24 @@ class AndroidNavigationBarSettings extends StatelessWidget {
           const SizedBox(height: 8),
           const ListTile(
             title: Text('Themed Android system navigation bar'),
-            subtitle: Text('This feature is only visible if you '
+            subtitle: Text('This feature only has any effect if you '
                 'build this application for an Android device. It '
                 'demonstrates the usage of the AnnotatedRegion helper '
-                'FlexColorScheme.themedSystemNavigationBar.'),
+                'FlexColorScheme themedSystemNavigationBar.'),
           ),
-          ListTile(
-            enabled: controller.useSubThemes && controller.useFlexColorScheme,
-            title: const Text('Background opacity'),
-            subtitle: const Text('Shared setting in this app, but APIs have '
-                'own properties'),
+          const ListTile(
+            title: Text('Background opacity'),
+            subtitle: Text('System navigation bar opacity'),
           ),
           ListTile(
-            enabled: controller.useSubThemes && controller.useFlexColorScheme,
             title: Slider.adaptive(
               max: 100,
               divisions: 100,
               label: (navBarOpacity * 100).toStringAsFixed(0),
               value: navBarOpacity * 100,
-              onChanged:
-                  controller.useSubThemes && controller.useFlexColorScheme
-                      ? (double value) {
-                          controller.setBottomNavigationBarOpacity(value / 100);
-                        }
-                      : null,
+              onChanged: (double value) {
+                controller.setSysBarOpacity(value / 100);
+              },
             ),
             trailing: Padding(
               padding: const EdgeInsetsDirectional.only(end: 12),
@@ -108,7 +98,7 @@ class AndroidNavigationBarSettings extends StatelessWidget {
           const SizedBox(height: 8),
           ListTile(
             title: const Text('Android system navigation bar style'),
-            subtitle: Text('Using FlexColorScheme.themedSystemNavigationBar.\n'
+            subtitle: Text('Using themedSystemNavigationBar\n'
                 '${explainStyle(controller.navBarStyle, isLight)}'),
           ),
           ListTile(
@@ -117,14 +107,19 @@ class AndroidNavigationBarSettings extends StatelessWidget {
               onChanged: controller.setNavBarStyle,
             ),
           ),
-          SwitchListTileAdaptive(
-            title: const Text('Android navigation bar divider'),
-            subtitle: const Text('There is also an extra system built-in scrim '
-                'on the nav bar when it is enabled. Recommend not enabling it '
-                'if using opacity or fully transparent version.'),
-            value: controller.useNavDivider,
-            onChanged: controller.setUseNavDivider,
-          ),
+          // TODO(rydmike): Put back when issue #100027 is resolved.
+          // This switch is removed from demo until issue:
+          // https://github.com/flutter/flutter/issues/100027
+          // Has been resolved and landed in Flutter stable.
+          //
+          // SwitchListTileAdaptive(
+          //   title: const Text('Android navigation bar divider'),
+          //   subtitle: const Text('There is also an extra system built-in scrim '
+          //       'on the nav bar when it is enabled. Recommend not enabling it '
+          //       'if using opacity or fully transparent version.'),
+          //   value: controller.useNavDivider,
+          //   onChanged: controller.setUseNavDivider,
+          // ),
         ],
       ),
     );

example/lib/example5/widgets/shared/color_scheme_popup_menu.dart

@@ -109,8 +109,6 @@ class ColorSchemeBox extends StatelessWidget {
   final Color color;
   final Size size;
 
-  // =
-
   @override
   Widget build(BuildContext context) {
     return SizedBox(

example/lib/example_copy_paste/home_page.dart

@@ -57,7 +57,6 @@ class _HomePageState extends State<HomePage> {
         context,
         systemNavBarStyle: FlexSystemNavBarStyle.transparent,
         useDivider: false,
-        opacity: 0.62,
       ),
       child: ResponsiveScaffold(
         title: Text(AppData.title(context)),
@@ -77,7 +76,7 @@ class _HomePageState extends State<HomePage> {
         extendBodyBehindAppBar: true,
         extendBody: true,
         onSelect: (int index) {
-          if (index == 9) {
+          if (index == 5) {
             if (isDark) {
               widget.onThemeModeChanged(ThemeMode.light);
             } else {
@@ -129,9 +128,6 @@ class _HomePageState extends State<HomePage> {
           ),
         ),
       ),
-      //     ),
-      //   ],
-      // ),
     );
   }
 }