[flutter_adaptive_scaffold] : 🐛 [FIX] : Issue: 121135.

packages/flutter_adaptive_scaffold/CHANGELOG.md

@@ -1,4 +1,8 @@
-## NEXT
+## 0.1.1
+
+* Fixes flutter/flutter#121135) `selectedIcon` parameter not displayed even if it is provided.
+
+## 0.1.0+1
 
 * Aligns Dart and Flutter SDK constraints.
 

packages/flutter_adaptive_scaffold/README.md

@@ -49,40 +49,60 @@ animation should use AdaptiveLayout.
         )
     ];
 
-    return BottomNavigationBarTheme(
-        data: const BottomNavigationBarThemeData(
-          unselectedItemColor: Colors.black,
-          selectedItemColor: Colors.black,
-          backgroundColor: Colors.white,
+    return AdaptiveScaffold(
+      // An option to override the default breakpoints used for small, medium,
+      // and large.
+      smallBreakpoint: const WidthPlatformBreakpoint(end: 700),
+      mediumBreakpoint: const WidthPlatformBreakpoint(begin: 700, end: 1000),
+      largeBreakpoint: const WidthPlatformBreakpoint(begin: 1000),
+      useDrawer: false,
+      selectedIndex: _selectedTab,
+      onSelectedIndexChange: (int index) {
+        setState(() {
+          _selectedTab = index;
+        });
+      },
+      destinations: const <NavigationDestination>[
+        NavigationDestination(
+          icon: Icon(Icons.inbox_outlined),
+          selectedIcon: Icon(Icons.inbox),
+          label: 'Inbox',
         ),
-        child: AdaptiveScaffold(
-            // An option to override the default breakpoints used for small, medium,
-            // and large.
-            smallBreakpoint: const WidthPlatformBreakpoint(end: 700),
-            mediumBreakpoint:
-                const WidthPlatformBreakpoint(begin: 700, end: 1000),
-            largeBreakpoint: const WidthPlatformBreakpoint(begin: 1000),
-            useDrawer: false,
-            destinations: const <NavigationDestination>[
-              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
-              NavigationDestination(
-                  icon: Icon(Icons.article), label: 'Articles'),
-              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
-              NavigationDestination(
-                  icon: Icon(Icons.video_call), label: 'Video')
-            ],
-            body: (_) => GridView.count(crossAxisCount: 2, children: children),
-            smallBody: (_) => ListView.builder(
-                  itemCount: children.length,
-                  itemBuilder: (_, int idx) => children[idx],
-                ),
-            // Define a default secondaryBody.
-            secondaryBody: (_) =>
-                Container(color: const Color.fromARGB(255, 234, 158, 192)),
-            // Override the default secondaryBody during the smallBreakpoint to be
-            // empty. Must use AdaptiveScaffold.emptyBuilder to ensure it is properly
-            // overridden.
-            smallSecondaryBody: AdaptiveScaffold.emptyBuilder));
+        NavigationDestination(
+          icon: Icon(Icons.article_outlined),
+          selectedIcon: Icon(Icons.article),
+          label: 'Articles',
+        ),
+        NavigationDestination(
+          icon: Icon(Icons.chat_outlined),
+          selectedIcon: Icon(Icons.chat),
+          label: 'Chat',
+        ),
+        NavigationDestination(
+          icon: Icon(Icons.video_call_outlined),
+          selectedIcon: Icon(Icons.video_call),
+          label: 'Video',
+        ),
+        NavigationDestination(
+          icon: Icon(Icons.home_outlined),
+          selectedIcon: Icon(Icons.home),
+          label: 'Inbox',
+        ),
+      ],
+      body: (_) => GridView.count(crossAxisCount: 2, children: children),
+      smallBody: (_) => ListView.builder(
+        itemCount: children.length,
+        itemBuilder: (_, int idx) => children[idx],
+      ),
+      // Define a default secondaryBody.
+      secondaryBody: (_) => Container(
+        color: const Color.fromARGB(255, 234, 158, 192),
+      ),
+      // Override the default secondaryBody during the smallBreakpoint to be
+      // empty. Must use AdaptiveScaffold.emptyBuilder to ensure it is properly
+      // overridden.
+      smallSecondaryBody: AdaptiveScaffold.emptyBuilder,
+    );
   }
 }
 ```
@@ -129,6 +149,12 @@ displayed and the entrance animation and exit animation.
             inAnimation: AdaptiveScaffold.leftOutIn,
             key: const Key('Primary Navigation Medium'),
             builder: (_) => AdaptiveScaffold.standardNavigationRail(
+              selectedIndex: selectedNavigation,
+              onDestinationSelected: (int newIndex) {
+                setState(() {
+                  selectedNavigation = newIndex;
+                });
+              },
               leading: const Icon(Icons.menu),
               destinations: destinations
                   .map((_) => AdaptiveScaffold.toRailDestination(_))
@@ -139,6 +165,12 @@ displayed and the entrance animation and exit animation.
             key: const Key('Primary Navigation Large'),
             inAnimation: AdaptiveScaffold.leftOutIn,
             builder: (_) => AdaptiveScaffold.standardNavigationRail(
+              selectedIndex: selectedNavigation,
+              onDestinationSelected: (int newIndex) {
+                setState(() {
+                  selectedNavigation = newIndex;
+                });
+              },
               extended: true,
               leading: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceAround,
@@ -184,11 +216,14 @@ displayed and the entrance animation and exit animation.
             key: const Key('Bottom Navigation Small'),
             inAnimation: AdaptiveScaffold.bottomToTop,
             outAnimation: AdaptiveScaffold.topToBottom,
-            builder: (_) => BottomNavigationBarTheme(
-              data: const BottomNavigationBarThemeData(
-                  selectedItemColor: Colors.black),
-              child: AdaptiveScaffold.standardBottomNavigationBar(
-                  destinations: destinations),
+            builder: (_) => AdaptiveScaffold.standardBottomNavigationBar(
+              destinations: destinations,
+              currentIndex: selectedNavigation,
+              onDestinationSelected: (int newIndex) {
+                setState(() {
+                  selectedNavigation = newIndex;
+                });
+              },
             ),
           )
         },

packages/flutter_adaptive_scaffold/example/lib/adaptive_layout_demo.dart

@@ -27,10 +27,17 @@ class MyApp extends StatelessWidget {
 
 /// Creates a basic adaptive page with navigational elements and a body using
 /// [AdaptiveLayout].
-class MyHomePage extends StatelessWidget {
+class MyHomePage extends StatefulWidget {
   /// Creates a const [MyHomePage].
   const MyHomePage({super.key});
 
+  @override
+  State<MyHomePage> createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  int selectedNavigation = 0;
+
   @override
   Widget build(BuildContext context) {
     // Define the children to display within the body.
@@ -113,19 +120,23 @@ class MyHomePage extends StatelessWidget {
     const List<NavigationDestination> destinations = <NavigationDestination>[
       NavigationDestination(
         label: 'Inbox',
-        icon: Icon(Icons.inbox, color: Colors.black),
+        icon: Icon(Icons.inbox_outlined),
+        selectedIcon: Icon(Icons.inbox),
       ),
       NavigationDestination(
         label: 'Articles',
-        icon: Icon(Icons.article_outlined, color: Colors.black),
+        icon: Icon(Icons.article_outlined),
+        selectedIcon: Icon(Icons.article),
       ),
       NavigationDestination(
         label: 'Chat',
-        icon: Icon(Icons.chat_bubble_outline, color: Colors.black),
+        icon: Icon(Icons.chat_outlined),
+        selectedIcon: Icon(Icons.chat),
       ),
       NavigationDestination(
         label: 'Video',
-        icon: Icon(Icons.video_call_outlined, color: Colors.black),
+        icon: Icon(Icons.video_call_outlined),
+        selectedIcon: Icon(Icons.video_call),
       ),
     ];
 
@@ -142,6 +153,12 @@ class MyHomePage extends StatelessWidget {
             inAnimation: AdaptiveScaffold.leftOutIn,
             key: const Key('Primary Navigation Medium'),
             builder: (_) => AdaptiveScaffold.standardNavigationRail(
+              selectedIndex: selectedNavigation,
+              onDestinationSelected: (int newIndex) {
+                setState(() {
+                  selectedNavigation = newIndex;
+                });
+              },
               leading: const Icon(Icons.menu),
               destinations: destinations
                   .map((_) => AdaptiveScaffold.toRailDestination(_))
@@ -152,6 +169,12 @@ class MyHomePage extends StatelessWidget {
             key: const Key('Primary Navigation Large'),
             inAnimation: AdaptiveScaffold.leftOutIn,
             builder: (_) => AdaptiveScaffold.standardNavigationRail(
+              selectedIndex: selectedNavigation,
+              onDestinationSelected: (int newIndex) {
+                setState(() {
+                  selectedNavigation = newIndex;
+                });
+              },
               extended: true,
               leading: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceAround,
@@ -197,11 +220,14 @@ class MyHomePage extends StatelessWidget {
             key: const Key('Bottom Navigation Small'),
             inAnimation: AdaptiveScaffold.bottomToTop,
             outAnimation: AdaptiveScaffold.topToBottom,
-            builder: (_) => BottomNavigationBarTheme(
-              data: const BottomNavigationBarThemeData(
-                  selectedItemColor: Colors.black),
-              child: AdaptiveScaffold.standardBottomNavigationBar(
-                  destinations: destinations),
+            builder: (_) => AdaptiveScaffold.standardBottomNavigationBar(
+              destinations: destinations,
+              currentIndex: selectedNavigation,
+              onDestinationSelected: (int newIndex) {
+                setState(() {
+                  selectedNavigation = newIndex;
+                });
+              },
             ),
           )
         },

packages/flutter_adaptive_scaffold/example/lib/adaptive_scaffold_demo.dart

@@ -22,10 +22,17 @@ class MyApp extends StatelessWidget {
 
 /// Creates a basic adaptive page with navigational elements and a body using
 /// [AdaptiveScaffold].
-class MyHomePage extends StatelessWidget {
+class MyHomePage extends StatefulWidget {
   /// Creates a const [MyHomePage].
   const MyHomePage({super.key});
 
+  @override
+  State<MyHomePage> createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  int _selectedTab = 0;
+
   // #docregion Example
   @override
   Widget build(BuildContext context) {
@@ -41,40 +48,60 @@ class MyHomePage extends StatelessWidget {
         )
     ];
 
-    return BottomNavigationBarTheme(
-        data: const BottomNavigationBarThemeData(
-          unselectedItemColor: Colors.black,
-          selectedItemColor: Colors.black,
-          backgroundColor: Colors.white,
+    return AdaptiveScaffold(
+      // An option to override the default breakpoints used for small, medium,
+      // and large.
+      smallBreakpoint: const WidthPlatformBreakpoint(end: 700),
+      mediumBreakpoint: const WidthPlatformBreakpoint(begin: 700, end: 1000),
+      largeBreakpoint: const WidthPlatformBreakpoint(begin: 1000),
+      useDrawer: false,
+      selectedIndex: _selectedTab,
+      onSelectedIndexChange: (int index) {
+        setState(() {
+          _selectedTab = index;
+        });
+      },
+      destinations: const <NavigationDestination>[
+        NavigationDestination(
+          icon: Icon(Icons.inbox_outlined),
+          selectedIcon: Icon(Icons.inbox),
+          label: 'Inbox',
+        ),
+        NavigationDestination(
+          icon: Icon(Icons.article_outlined),
+          selectedIcon: Icon(Icons.article),
+          label: 'Articles',
+        ),
+        NavigationDestination(
+          icon: Icon(Icons.chat_outlined),
+          selectedIcon: Icon(Icons.chat),
+          label: 'Chat',
+        ),
+        NavigationDestination(
+          icon: Icon(Icons.video_call_outlined),
+          selectedIcon: Icon(Icons.video_call),
+          label: 'Video',
+        ),
+        NavigationDestination(
+          icon: Icon(Icons.home_outlined),
+          selectedIcon: Icon(Icons.home),
+          label: 'Inbox',
         ),
-        child: AdaptiveScaffold(
-            // An option to override the default breakpoints used for small, medium,
-            // and large.
-            smallBreakpoint: const WidthPlatformBreakpoint(end: 700),
-            mediumBreakpoint:
-                const WidthPlatformBreakpoint(begin: 700, end: 1000),
-            largeBreakpoint: const WidthPlatformBreakpoint(begin: 1000),
-            useDrawer: false,
-            destinations: const <NavigationDestination>[
-              NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
-              NavigationDestination(
-                  icon: Icon(Icons.article), label: 'Articles'),
-              NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
-              NavigationDestination(
-                  icon: Icon(Icons.video_call), label: 'Video')
-            ],
-            body: (_) => GridView.count(crossAxisCount: 2, children: children),
-            smallBody: (_) => ListView.builder(
-                  itemCount: children.length,
-                  itemBuilder: (_, int idx) => children[idx],
-                ),
-            // Define a default secondaryBody.
-            secondaryBody: (_) =>
-                Container(color: const Color.fromARGB(255, 234, 158, 192)),
-            // Override the default secondaryBody during the smallBreakpoint to be
-            // empty. Must use AdaptiveScaffold.emptyBuilder to ensure it is properly
-            // overridden.
-            smallSecondaryBody: AdaptiveScaffold.emptyBuilder));
+      ],
+      body: (_) => GridView.count(crossAxisCount: 2, children: children),
+      smallBody: (_) => ListView.builder(
+        itemCount: children.length,
+        itemBuilder: (_, int idx) => children[idx],
+      ),
+      // Define a default secondaryBody.
+      secondaryBody: (_) => Container(
+        color: const Color.fromARGB(255, 234, 158, 192),
+      ),
+      // Override the default secondaryBody during the smallBreakpoint to be
+      // empty. Must use AdaptiveScaffold.emptyBuilder to ensure it is properly
+      // overridden.
+      smallSecondaryBody: AdaptiveScaffold.emptyBuilder,
+    );
   }
-  // #enddocregion
+// #enddocregion
 }