Flutter - How to align NavigationRail labels to the left?

Question

I have a very simple NavigationRail, and I was testing with different font sizes with selected and unselected labels. When both keep an equal font size, there are no problems with alignment, but if I give a larger value to the selected labels, or if I put a longer text, the others align to the center apparently. Is there a way to control this behavior, to align either all together, or separately?

This is my code:

    return Scaffold(
      appBar: AppBar(
        title: tituloAppBar,
        backgroundColor: colorBackground,
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          SafeArea(
              child: NavigationRail(
            selectedIndex: selectedIndex,
            onDestinationSelected: changeDestination,
            extended: MediaQuery.of(context).size.width >= 850,
            unselectedIconTheme: const IconThemeData(color: Colors.grey),
            destinations: const <NavigationRailDestination>[
              NavigationRailDestination(
                icon: Icon(Icons.search),
                label: Text('Buscar Talleres y Extracurriculares'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.engineering),
                label: Text('Ingeniería y Agronomía'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.business),
                label: Text('Sociales y Administración'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.local_hospital),
                label: Text('Salud'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.school),
                label: Text('Iniciales'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.design_services),
                label: Text('Talleres y Extracurriculares'),
              ),
            ],
            selectedLabelTextStyle:
                TextStyle(color: Colors.lightBlue, fontSize: 20),
            unselectedLabelTextStyle: 
                TextStyle(color: Colors.grey, fontSize: 18),
            groupAlignment: -1,
            minWidth: 56,
          ))
        ],
      ),
    );

I tried to change the padding, the textAlign field to each Widget Text. I tried wrapping in other Widgets to set padding or margin, but nothing worked.

Answer 1

Hi You just need to wrap NavigationRail with flexible and it will work just as needed like this image

This is code:

return Scaffold(
  appBar: AppBar(
    title: tituloAppBar,
    backgroundColor: colorBackground,
  ),
  body: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Flexible(
        child: NavigationRail(
          selectedIndex: _counter,
          onDestinationSelected: (value) {
            setState(() {
              _counter = value;
            });
          },
          extended: MediaQuery.of(context).size.width >= 850,
          unselectedIconTheme: const IconThemeData(color: Colors.grey),
          destinations: const <NavigationRailDestination>[
            NavigationRailDestination(
              icon: Icon(Icons.search),
              label: Text('Buscar Talleres y Extracurriculares'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.engineering),
              label: Text('Ingeniería y Agronomía'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.business),
              label: Text('Sociales y Administración'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.local_hospital),
              label: Text('Salud'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.school),
              label: Text('Iniciales'),
            ),
            NavigationRailDestination(
              icon: Icon(Icons.design_services),
              label: Text('Talleres y Extracurriculares'),
            ),
          ],
          selectedLabelTextStyle:
              TextStyle(color: Colors.lightBlue, fontSize: 20),
          unselectedLabelTextStyle:
              TextStyle(color: Colors.grey, fontSize: 18),
          groupAlignment: -1,
          minWidth: 56,
        ),
      )
    ],
  ),
);

Answer 2

Based on documentation here, Unfortunately, current version does not support for alignment, by default it will centered align when the NavigationRailDestination has width wider than extended width.

then, based on that behaviour, you can set value of extended Rail SHOULD be wider than the NavigationRailDestination

it will align start, see below:

NavigationRail(
  selectedIndex: selectedIndex,
  onDestinationSelected: changeDestination,
  extended: MediaQuery.of(context).size.width >= 650,
  unselectedIconTheme: const IconThemeData(color: Colors.grey),
  minExtendedWidth: 300, // you must set this property wider than child

by add this minExtendedWidth: 300, or wider, we will got this: