Last active
November 14, 2023 05:40
-
-
Save rashnk/1d0f394697cbf864ab2b478a739cbb0a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| /// Flutter code sample for [NavigationRail]. | |
| void main() => runApp(const NavigationRailExampleApp()); | |
| class NavigationRailExampleApp extends StatelessWidget { | |
| const NavigationRailExampleApp({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| theme: ThemeData( | |
| appBarTheme: | |
| AppBarTheme(backgroundColor: Colors.grey.shade900, elevation: 0), | |
| applyElevationOverlayColor: true, | |
| focusColor: Colors.grey, | |
| scaffoldBackgroundColor: Colors.grey.shade900, | |
| navigationRailTheme: NavigationRailThemeData( | |
| backgroundColor: Colors.grey.shade900, | |
| unselectedLabelTextStyle: const TextStyle( | |
| color: Colors.white, | |
| ), | |
| selectedLabelTextStyle: TextStyle(color: Colors.yellow.shade700), | |
| unselectedIconTheme: const IconThemeData(color: Colors.white), | |
| selectedIconTheme: const IconThemeData(color: Colors.yellow), | |
| indicatorColor: Colors.grey.shade200), | |
| ), | |
| home: const NavRailExample(), | |
| ); | |
| } | |
| } | |
| class NavRailExample extends StatefulWidget { | |
| const NavRailExample({super.key}); | |
| @override | |
| State<NavRailExample> createState() => _NavRailExampleState(); | |
| } | |
| class _NavRailExampleState extends State<NavRailExample> { | |
| int _selectedIndex = 0; | |
| NavigationRailLabelType labelType = NavigationRailLabelType.all; | |
| bool showLeading = false; | |
| bool showTrailing = false; | |
| double groupAlignment = -1.0; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| body: Row( | |
| children: <Widget>[ | |
| NavigationRail( | |
| extended: true, | |
| groupAlignment: groupAlignment, | |
| labelType: NavigationRailLabelType.none, | |
| selectedIndex: _selectedIndex, | |
| onDestinationSelected: (int index) { | |
| setState(() { | |
| _selectedIndex = index; | |
| }); | |
| }, | |
| leading: showLeading | |
| ? FloatingActionButton( | |
| elevation: 0, | |
| onPressed: () { | |
| // Add your onPressed code here! | |
| }, | |
| child: const Icon(Icons.add), | |
| ) | |
| : const SizedBox(), | |
| trailing: showTrailing | |
| ? IconButton( | |
| onPressed: () { | |
| // Add your onPressed code here! | |
| }, | |
| icon: const Icon(Icons.more_horiz_rounded), | |
| ) | |
| : const SizedBox(), | |
| destinations: const <NavigationRailDestination>[ | |
| NavigationRailDestination( | |
| icon: Icon(Icons.favorite_border), | |
| selectedIcon: Icon(Icons.favorite), | |
| label: Text('First'), | |
| ), | |
| NavigationRailDestination( | |
| icon: Icon(Icons.bookmark_border), | |
| selectedIcon: Icon(Icons.book), | |
| label: Text('Second'), | |
| ), | |
| NavigationRailDestination( | |
| icon: Icon(Icons.star_border), | |
| selectedIcon: Icon(Icons.star), | |
| label: Text('Third'), | |
| ), | |
| ], | |
| ), | |
| const VerticalDivider(thickness: 1, width: 1), | |
| // This is the main content. | |
| Expanded( | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: <Widget>[ | |
| Text('selectedIndex: $_selectedIndex'), | |
| const SizedBox(height: 20), | |
| Text('Label type: ${labelType.name}'), | |
| const SizedBox(height: 10), | |
| OverflowBar( | |
| spacing: 10.0, | |
| children: <Widget>[ | |
| ElevatedButton( | |
| onPressed: () { | |
| setState(() { | |
| labelType = NavigationRailLabelType.none; | |
| }); | |
| }, | |
| child: const Text('None'), | |
| ), | |
| ElevatedButton( | |
| onPressed: () { | |
| setState(() { | |
| labelType = NavigationRailLabelType.selected; | |
| }); | |
| }, | |
| child: const Text('Selected'), | |
| ), | |
| ElevatedButton( | |
| onPressed: () { | |
| setState(() { | |
| labelType = NavigationRailLabelType.all; | |
| }); | |
| }, | |
| child: const Text('All'), | |
| ), | |
| ], | |
| ), | |
| const SizedBox(height: 20), | |
| Text('Group alignment: $groupAlignment'), | |
| const SizedBox(height: 10), | |
| OverflowBar( | |
| spacing: 10.0, | |
| children: <Widget>[ | |
| ElevatedButton( | |
| onPressed: () { | |
| setState(() { | |
| groupAlignment = -1.0; | |
| }); | |
| }, | |
| child: const Text('Top'), | |
| ), | |
| ElevatedButton( | |
| onPressed: () { | |
| setState(() { | |
| groupAlignment = 0.0; | |
| }); | |
| }, | |
| child: const Text('Center'), | |
| ), | |
| ElevatedButton( | |
| onPressed: () { | |
| setState(() { | |
| groupAlignment = 1.0; | |
| }); | |
| }, | |
| child: const Text('Bottom'), | |
| ), | |
| ], | |
| ), | |
| const SizedBox(height: 20), | |
| OverflowBar( | |
| spacing: 10.0, | |
| children: <Widget>[ | |
| ElevatedButton( | |
| onPressed: () { | |
| setState(() { | |
| showLeading = !showLeading; | |
| }); | |
| }, | |
| child: | |
| Text(showLeading ? 'Hide Leading' : 'Show Leading'), | |
| ), | |
| ElevatedButton( | |
| onPressed: () { | |
| setState(() { | |
| showTrailing = !showTrailing; | |
| }); | |
| }, | |
| child: Text( | |
| showTrailing ? 'Hide Trailing' : 'Show Trailing'), | |
| ), | |
| ], | |
| ), | |
| ], | |
| ), | |
| ), | |
| ], | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment