feat(material3): 适配并优化了底部导航

lib/main.dart

@@ -35,14 +35,20 @@ class Bistro extends StatelessWidget {
         primaryColorDark: const Color(0xFFD56937),
         scaffoldBackgroundColor: const Color(0xFF939D99),
         appBarTheme: const AppBarTheme(color: Color(0xff384444)),
-        bottomAppBarTheme: const BottomAppBarTheme(
-            color: Color(0xff2a2a22), surfaceTintColor: Color(0xffd56937)),
+        navigationBarTheme: const NavigationBarThemeData(
+          surfaceTintColor: Color(0xffd56937),
+          backgroundColor:Color(0xff2a2a22),
+          indicatorColor: Color(0x00000000),
+          labelTextStyle: MaterialStatePropertyAll(TextStyle(
+            color: Color(0xffd56937),
+          )),
+        ),
         colorScheme: const ColorScheme.dark(
           primary: Color(0xFFD56937),
           secondary: Color(0xFFC8C2B4),
           background: Color(0xff384444),
         ),
-        useMaterial3 : true,
+        useMaterial3: true,
       ),
       home: const BistroFrame(
         title: '小酒馆',
@@ -151,14 +157,19 @@ class BistroFrameState extends State<BistroFrame> {
 
     return Scaffold(
       body: _body,
-      bottomNavigationBar: BottomAppBar(
-        shape: const CircularNotchedRectangle(),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceAround,
-          children: bottomNavigationBarData,
-        ),
+      bottomNavigationBar: NavigationBar(
+        selectedIndex: _index,
+        destinations: bottomNavigationBarData,
+        // backgroundColor: Theme.of(context).colorScheme.primary,
+        onDestinationSelected: (index) => {
+          setState(() {
+            _index = index;
+          })
+        },
+        labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
       ),
       floatingActionButton: FloatingActionButton(
+        enableFeedback: true,
         backgroundColor: Theme.of(context).colorScheme.background,
         onPressed: () => {},
         child: Icon(
@@ -166,7 +177,8 @@ class BistroFrameState extends State<BistroFrame> {
           color: Theme.of(context).primaryColor,
         ),
       ),
-      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+      floatingActionButtonLocation:
+          FloatingActionButtonLocation.miniCenterDocked,
     );
   }
 
@@ -176,12 +188,10 @@ class BistroFrameState extends State<BistroFrame> {
     Map<String, dynamic> item = _iconList[index];
 
     //设置默认未选中的状态
-    double size = 14;
-    Color color = Theme.of(context).colorScheme.secondary;
-    TextStyle style = TextStyle(
-      fontSize: size,
-      color: color,
-    );
+    // TextStyle style = TextStyle(
+    //   fontSize: size,
+    //   color: color,
+    // );
 
     bool isShow = item["display"];
 
@@ -189,51 +199,19 @@ class BistroFrameState extends State<BistroFrame> {
     if (!isShow) {
       child = Container();
     } else {
-      IconData? icon = item["default"];
-      String title = item["title"];
-
-      if (_index == index) {
-        //选中的话
-        color = Theme.of(context).primaryColor;
-        style = const TextStyle(
-          fontSize: 0,
-        );
-        icon = item["icon"];
-      }
-
-      child = GestureDetector(
-        child: icon != null
-            ? SizedBox(
-                width: 25.0,
-                height: 23.0,
-                child: Icon(
-                  icon,
-                  color: color,
-                  size: size * 1.7,
-                ),
-              )
-            : Container(
-                alignment: Alignment.center,
-                child: Text(
-                  title,
-                  style: style,
-                ),
-              ),
-        onTap: () {
-          if (_index != index) {
-            setState(() {
-              _index = index;
-            });
-          }
-        },
+      child = NavigationDestination(
+        icon: Icon(
+          item['icon'],
+          color: Theme.of(context).colorScheme.secondary,
+        ),
+        label: item["title"],
+        selectedIcon: Icon(
+          item['icon'],
+          color: Theme.of(context).primaryColor,
+        ),
       );
     }
 
-    //构造返回的Widget
-    return SizedBox(
-      height: 49,
-      width: MediaQuery.of(context).size.width / 5,
-      child: child,
-    );
+    return child;
   }
 }