NavigationRail Example

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  var _icons = [Icons.favorite, Icons.book, Icons.star];

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Row(
       children: <Widget>[
         Expanded(
           child: Center(
             child: Text('selectedIndex: $_selectedIndex'),
           ),
         ),
//          VerticalDivider(thickness: 1, width: 1),
         Card(
           elevation: 0.0,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(15.0),
           ),
           child: NavigationRail(
             backgroundColor: Colors.grey.shade800,
             selectedIndex: _selectedIndex,
             onDestinationSelected: (int index) {
               setState(() {
                 _selectedIndex = index;
               });
             },
             labelType: NavigationRailLabelType.selected,
             destinations: [
               NavigationRailDestination(
                 icon: Icon(Icons.favorite_border, color: Colors.grey),
                 selectedIcon: Icon(Icons.favorite, color: Colors.cyanAccent),
                 label: Text(
                   'First', style: TextStyle(color: Colors.cyanAccent)),
               ),
               NavigationRailDestination(
                 icon: Icon(Icons.bookmark_border, color: Colors.grey),
                 selectedIcon: Icon(Icons.book, color: Colors.pinkAccent),
                 label: Text(
                   'Second', style: TextStyle(color: Colors.pinkAccent)),
               ),
               NavigationRailDestination(
                 icon: Icon(Icons.star_border, color: Colors.grey),
                 selectedIcon: Icon(Icons.star, color: Colors.yellow),
                 label: Text(
                   'Third', style: TextStyle(color: Colors.yellow)),
               ),
             ],
           ),
         ),
//          VerticalDivider(thickness: 1, width: 1),
         Expanded(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Icon(_icons[_selectedIndex], size: 50.0),
               Center(
                 child: Text('selectedIndex: $_selectedIndex'),
               ),
             ],
           ),
         ),
       ],
     ),
   );
 }
}