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

lib/main.dart

@@ -35,8 +35,14 @@ 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),
@@ -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,
+      child = NavigationDestination(
+        icon: Icon(
+          item['icon'],
+          color: Theme.of(context).colorScheme.secondary,
         ),
-              )
-            : Container(
-                alignment: Alignment.center,
-                child: Text(
-                  title,
-                  style: style,
+        label: item["title"],
+        selectedIcon: Icon(
+          item['icon'],
+          color: Theme.of(context).primaryColor,
         ),
-              ),
-        onTap: () {
-          if (_index != index) {
-            setState(() {
-              _index = index;
-            });
-          }
-        },
       );
     }
 
-    //构造返回的Widget
-    return SizedBox(
-      height: 49,
-      width: MediaQuery.of(context).size.width / 5,
-      child: child,
-    );
+    return child;
   }
 }

pubspec.lock

@@ -388,10 +388,10 @@ packages:
     dependency: transitive
     description:
       name: path_provider
-      sha256: "04890b994ee89bfa80bf3080bfec40d5a92c5c7a785ebb02c13084a099d2b6f9"
+      sha256: c7edf82217d4b2952b2129a61d3ad60f1075b9299e629e149a8d2e39c2e6aad4
       url: "https://mirrors.tuna.tsinghua.edu.cn/dart-pub/"
     source: hosted
-    version: "2.0.13"
+    version: "2.0.14"
   path_provider_android:
     dependency: transitive
     description:
@@ -460,10 +460,10 @@ packages:
     dependency: transitive
     description:
       name: permission_handler_apple
-      sha256: "9c370ef6a18b1c4b2f7f35944d644a56aa23576f23abee654cf73968de93f163"
+      sha256: ee96ac32f5a8e6f80756e25b25b9f8e535816c8e6665a96b6d70681f8c4f7e85
       url: "https://mirrors.tuna.tsinghua.edu.cn/dart-pub/"
     source: hosted
-    version: "9.0.7"
+    version: "9.0.8"
   permission_handler_platform_interface:
     dependency: transitive
     description:
@@ -516,10 +516,10 @@ packages:
     dependency: transitive
     description:
       name: pointycastle
-      sha256: "57b6b78df14175658f09c5dfcfc51a46ad9561a3504fe679913dab404d0cc0f2"
+      sha256: c3120a968135aead39699267f4c74bc9a08e4e909e86bc1b0af5bfd78691123c
       url: "https://mirrors.tuna.tsinghua.edu.cn/dart-pub/"
     source: hosted
-    version: "3.7.0"
+    version: "3.7.2"
   process:
     dependency: transitive
     description:
@@ -564,10 +564,10 @@ packages:
     dependency: "direct main"
     description:
       name: shared_preferences
-      sha256: ee6257848f822b8481691f20c3e6d2bfee2e9eccb2a3d249907fcfb198c55b41
+      sha256: "78528fd87d0d08ffd3e69551173c026e8eacc7b7079c82eb6a77413957b7e394"
       url: "https://mirrors.tuna.tsinghua.edu.cn/dart-pub/"
     source: hosted
-    version: "2.0.18"
+    version: "2.0.20"
   shared_preferences_android:
     dependency: transitive
     description:
@@ -777,10 +777,10 @@ packages:
     dependency: transitive
     description:
       name: webview_flutter_wkwebview
-      sha256: ab12479f7a0cf112b9420c36aaf206a1ca47cd60cd42de74a4be2e97a697587b
+      sha256: "0b2c65355e4cc5ab5ed1b925421765178b47d647e4e9560bd076fac0b4b88dd4"
       url: "https://mirrors.tuna.tsinghua.edu.cn/dart-pub/"
     source: hosted
-    version: "3.2.1"
+    version: "3.2.2"
   win32:
     dependency: transitive
     description:

pubspec.yaml

@@ -171,7 +171,7 @@ flutter_native_splash:
   # platform.
   #android: false
   #ios: false
-  #web: false
+  web: false
 
   # The position of the splash image can be set with android_gravity, ios_content_mode, and
   # web_image_mode parameters.  All default to center.