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