M3 fixes (#261)

* M3: adjust yaru switch style Fixes #197 * Fix FAB color dark, text button theme dark, tabbar dark * Fix indicator * improve tabbbartheme * Fix icon theme and dropdown menu * Move fab color to fab theme * fix icon buttons * add inputtheme to menu * Add tonal button theme * Correct method and remove tonal it's for us the same as filled * Add navigationbartheme * Add navi rail theme and divider theme * fix navi rail theme * Fix checkbox contrast * Fix switches * add badge theme * lighter check border
ubuntu · Jan 26, 2023 · 093617b · 093617b
1 parent cdb7478
commit 093617b
Show file tree

Hide file tree

Showing 4 changed files with 459 additions and 175 deletions.
diff --git a/example/lib/view/controls_view.dart b/example/lib/view/controls_view.dart
@@ -86,6 +86,22 @@ class _ControlsViewState extends State<ControlsView>
                         ],
                       ),
                     ),
+                    Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: Row(
+                        children: <Widget>[
+                          FilledButton(
+                            onPressed: () {},
+                            child: const Text('Click me!'),
+                          ),
+                          const SizedBox(width: 15),
+                          const FilledButton(
+                            onPressed: null,
+                            child: Text("Can't click me!"),
+                          ),
+                        ],
+                      ),
+                    ),
                     Padding(
                       padding: const EdgeInsets.all(8.0),
                       child: Row(
@@ -155,6 +171,20 @@ class _ControlsViewState extends State<ControlsView>
                         ],
                       ),
                     ),
+                    Padding(
+                      padding: const EdgeInsets.all(12.0),
+                      child: Row(
+                        children: const [
+                          DropdownMenu(
+                            dropdownMenuEntries: [
+                              DropdownMenuEntry(value: 1, label: '1'),
+                              DropdownMenuEntry(value: 2, label: '2'),
+                              DropdownMenuEntry(value: 3, label: '3')
+                            ],
+                          )
+                        ],
+                      ),
+                    ),
                     Row(
                       children: [
                         IconButton(

diff --git a/example/lib/view/home_page.dart b/example/lib/view/home_page.dart
@@ -116,48 +116,95 @@ class HomePageState extends State<HomePage> {
           ),
         ],
       ),
-      body: Column(
-        children: <Widget>[
-          Expanded(
-            child: Center(
-              child: _views[_selectedIndex],
-            ),
-          ),
-        ],
-      ),
-      bottomNavigationBar: BottomNavigationBar(
-        landscapeLayout: BottomNavigationBarLandscapeLayout.spread,
-        items: const [
-          BottomNavigationBarItem(
-            icon: Icon(Icons.font_download_outlined),
-            activeIcon: Icon(Icons.font_download),
-            label: 'Fonts',
-          ),
-          BottomNavigationBarItem(
-            icon: Icon(Icons.radio_button_checked_outlined),
-            activeIcon: Icon(Icons.radio_button_checked),
-            label: 'Controls',
-          ),
-          BottomNavigationBarItem(
-            icon: Icon(Icons.text_fields),
-            activeIcon: Icon(Icons.text_fields_outlined),
-            label: 'Text Fields',
-          ),
-          BottomNavigationBarItem(
-            icon: Icon(Icons.color_lens_outlined),
-            activeIcon: Icon(Icons.color_lens),
-            label: 'Palette',
-          )
-        ],
-        currentIndex: _selectedIndex,
-        onTap: (index) => setState(() => _selectedIndex = index),
+      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.color_lens_outlined),
+                      selectedIcon: Icon(Icons.color_lens),
+                      label: Text('Palette'),
+                    )
+                  ],
+                  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',
+                    )
+                  ],
+                  selectedIndex: _selectedIndex,
+                  onDestinationSelected: (index) =>
+                      setState(() => _selectedIndex = index),
+                ),
+              ],
+            );
+          }
+        },
       ),
       floatingActionButton: FloatingActionButton(
         onPressed: () => {incrementCounter()},
         child: const Icon(Icons.plus_one),
       ),
-      floatingActionButtonLocation:
-          FloatingActionButtonLocation.miniCenterDocked,
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
     );
   }
 }
diff --git a/lib/src/text/text_theme.dart b/lib/src/text/text_theme.dart
@@ -1,78 +1,96 @@
 import 'package:flutter/material.dart';
 
-const textTheme = TextTheme(
-  displayLarge: _UbuntuTextStyle(
-    fontSize: 96,
-    letterSpacing: -1.5,
-    fontWeight: FontWeight.w300,
-  ),
-  displayMedium: _UbuntuTextStyle(
-    fontSize: 60,
-    letterSpacing: -0.5,
-    fontWeight: FontWeight.w300,
-  ),
-  displaySmall: _UbuntuTextStyle(
-    fontSize: 48,
-    fontWeight: FontWeight.normal,
-  ),
-  headlineMedium: _UbuntuTextStyle(
-    fontSize: 34,
-    fontWeight: FontWeight.normal,
-  ),
-  headlineSmall: _UbuntuTextStyle(
-    fontSize: 24,
-    letterSpacing: -0.18,
-    fontWeight: FontWeight.normal,
-  ),
-  titleLarge: _UbuntuTextStyle(
-    fontSize: 20,
-    letterSpacing: 0.15,
-    fontWeight: FontWeight.w500,
-  ),
-  titleMedium: _UbuntuTextStyle(
-    fontSize: 16,
-    letterSpacing: 0.15,
-    fontWeight: FontWeight.normal,
-  ),
-  titleSmall: _UbuntuTextStyle(
-    fontSize: 14,
-    letterSpacing: 0.1,
-    fontWeight: FontWeight.w500,
-  ),
-  bodyLarge: _UbuntuTextStyle(
-    fontSize: 16,
-    letterSpacing: 0.5,
-    fontWeight: FontWeight.normal,
-  ),
-  bodyMedium: _UbuntuTextStyle(
-    fontSize: 14,
-    letterSpacing: 0.25,
-    fontWeight: FontWeight.normal,
-  ),
-  labelLarge: _UbuntuTextStyle(
-    fontSize: 14,
-    letterSpacing: 0.25,
-    fontWeight: FontWeight.w500,
-  ),
-  bodySmall: _UbuntuTextStyle(
-    fontSize: 12,
-    letterSpacing: 0.4,
-    fontWeight: FontWeight.normal,
-  ),
-  labelSmall: _UbuntuTextStyle(
-    fontSize: 10,
-    letterSpacing: 1.5,
-    fontWeight: FontWeight.normal,
-  ),
-);
+TextTheme createTextTheme(Color textColor) {
+  return TextTheme(
+    displayLarge: _UbuntuTextStyle(
+      fontSize: 96,
+      letterSpacing: -1.5,
+      fontWeight: FontWeight.w300,
+      textColor: textColor,
+    ),
+    displayMedium: _UbuntuTextStyle(
+      fontSize: 60,
+      letterSpacing: -0.5,
+      fontWeight: FontWeight.w300,
+      textColor: textColor,
+    ),
+    displaySmall: _UbuntuTextStyle(
+      fontSize: 48,
+      fontWeight: FontWeight.normal,
+      textColor: textColor,
+    ),
+    headlineMedium: _UbuntuTextStyle(
+      fontSize: 34,
+      fontWeight: FontWeight.normal,
+      textColor: textColor,
+    ),
+    headlineSmall: _UbuntuTextStyle(
+      fontSize: 24,
+      letterSpacing: -0.18,
+      fontWeight: FontWeight.normal,
+      textColor: textColor,
+    ),
+    titleLarge: _UbuntuTextStyle(
+      fontSize: 20,
+      letterSpacing: 0.15,
+      fontWeight: FontWeight.w500,
+      textColor: textColor,
+    ),
+    titleMedium: _UbuntuTextStyle(
+      fontSize: 16,
+      letterSpacing: 0.15,
+      fontWeight: FontWeight.normal,
+      textColor: textColor,
+    ),
+    titleSmall: _UbuntuTextStyle(
+      fontSize: 14,
+      letterSpacing: 0.1,
+      fontWeight: FontWeight.w500,
+      textColor: textColor,
+    ),
+    bodyLarge: _UbuntuTextStyle(
+      fontSize: 16,
+      letterSpacing: 0.5,
+      fontWeight: FontWeight.normal,
+      textColor: textColor,
+    ),
+    bodyMedium: _UbuntuTextStyle(
+      fontSize: 14,
+      letterSpacing: 0.25,
+      fontWeight: FontWeight.normal,
+      textColor: textColor,
+    ),
+    labelLarge: _UbuntuTextStyle(
+      fontSize: 14,
+      letterSpacing: 0.25,
+      fontWeight: FontWeight.w500,
+      textColor: textColor,
+    ),
+    bodySmall: _UbuntuTextStyle(
+      fontSize: 12,
+      letterSpacing: 0.4,
+      fontWeight: FontWeight.normal,
+      textColor: textColor,
+    ),
+    labelSmall: _UbuntuTextStyle(
+      fontSize: 10,
+      letterSpacing: 1.5,
+      fontWeight: FontWeight.normal,
+      textColor: textColor,
+    ),
+  );
+}
 
 class _UbuntuTextStyle extends TextStyle {
+  final Color textColor;
   const _UbuntuTextStyle({
     super.fontSize,
     super.letterSpacing,
     super.fontWeight,
+    required this.textColor,
   }) : super(
           fontFamily: 'Ubuntu',
           package: 'yaru',
+          color: textColor,
         );
 }