Search code examples
flutterflutter-layout

Is there a way to reduce the height of each element in a NavigationRail in Flutter?


Let's say I have the following NavigationRail:

I'm aware that this widget is quite new, and as such, its functionality may be limited. However, I'd like to know if there's any way to reduce the height of each element in a NavigationRail, such as the element I indicated on the image above, as it seems that the parameters in the NavigationRail widget don't allow for such a thing as of now.

EDIT: I did what chunhunghan told, and even so, the problem still persists. Even using a container, the width and the height of each element remains the same. My code:

class _HomePageState extends ModularState<HomePage, HomeController> {

  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          NavigationRail(
            onDestinationSelected: (index) {
              selectedIndex = index;
            },
            backgroundColor: navigationRailColor,
            selectedIndex: selectedIndex,
            destinations: [
              NavigationRailDestination(
                icon:
                Container(height: 200, child: Icon(Icons.favorite_border)),
                selectedIcon:
                Container(height: 200, child: Icon(Icons.favorite)),
                label: Text(''),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.bookmark_border),
                selectedIcon: Icon(Icons.book),
                label: Text(''),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.star_border),
                selectedIcon: Icon(Icons.star),
                label: Text(''),
              ),
            ],
          )
        ],
      ),
    );
  }
}

How it looks:


Solution

  • You can copy paste run full code below
    You can use Container wrap icon and provide height
    I use a large value 200 for demo purpose

     NavigationRailDestination(
                    icon:
                        Container(height: 200, child: Icon(Icons.favorite_border)),
                    selectedIcon:
                        Container(height: 200, child: Icon(Icons.favorite)),
                    label: Text(''),
                  ),
    

    working demo

    enter image description here

    full code

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    /// This Widget is the main application widget.
    class MyApp extends StatelessWidget {
      static const String _title = 'Flutter Code Sample';
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: _title,
          home: MyStatefulWidget(),
        );
      }
    }
    
    class MyStatefulWidget extends StatefulWidget {
      MyStatefulWidget({Key key}) : super(key: key);
    
      @override
      _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
    }
    
    class _MyStatefulWidgetState extends State<MyStatefulWidget> {
      int _selectedIndex = 0;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("demo"),
          ),
          body: Row(
            children: <Widget>[
              NavigationRail(
                selectedIndex: _selectedIndex,
                onDestinationSelected: (int index) {
                  setState(() {
                    _selectedIndex = index;
                  });
                },
                labelType: NavigationRailLabelType.selected,
                destinations: [
                  NavigationRailDestination(
                    icon:
                        Container(height: 200, child: Icon(Icons.favorite_border)),
                    selectedIcon:
                        Container(height: 200, child: Icon(Icons.favorite)),
                    label: Text(''),
                  ),
                  NavigationRailDestination(
                    icon: Icon(Icons.bookmark_border),
                    selectedIcon: Icon(Icons.book),
                    label: Text(''),
                  ),
                  NavigationRailDestination(
                    icon: Icon(Icons.star_border),
                    selectedIcon: Icon(Icons.star),
                    label: Text(''),
                  ),
                ],
              ),
              VerticalDivider(thickness: 1, width: 1),
              // This is the main content.
              Expanded(
                child: Center(
                  child: Text('selectedIndex: $_selectedIndex'),
                ),
              )
            ],
          ),
        );
      }
    }