Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to align NavigationRail labels to the left?

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?

Screenshot

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.

Tags:

2

Answers


  1. 0

    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:

    enter image description here

    Login or Signup to reply.
  2. 0

    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,
        ),
      )
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search