Search code examples
flutterflutter-layout

Push trailing widget to bottom of Flutter Navigation Rail


How can one push the trailing widget within a Flutter Navigation Rail to the bottom of the rail? I thought it would be as simple as wrapping the trailing widget with an Expanded widget, but I get the usual flutter needs paint error message.

I can get it working if I add a Column with a first child of SizedBox with a fixed height, and then the widget I want to display, but I need the spacer to fill the available space, not a fixed height. Here's the SizedBox example which does indeed fill 200px of space, but how do I get it to fill the available space?

// other navrail properties....

     trailing: Column(
        children: [
          SizedBox(
            height: 200,
          ),
          IconButton(icon: Icon(Icons.settings), onPressed: () {})
        ],
      ),

Solution

  • Use Expanded with Align widgets:

    NavigationRail(
      selectedIndex: _selectedIndex,
      destinations: _destinations,
      trailing: Expanded(
        child: Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: IconButton(icon: const Icon(Icons.help), onPressed: (){}),
          ),
        ),
      ),
    );