flutteralignmentuinavigationbarleftalign

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.


Solution

  • 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,
            ),
          )
        ],
      ),
    );