I'm trying to create navigation like the below Image using a navigation rail to get the solution
But I'm unable to center the text like in the image. The paper sheets category is not in the center. How do I get the formatted center text in the first image I have posted.
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: AppColors.blue,
title: Text(subCategory.categoryTitle!),
),
body: Row(children: [
LayoutBuilder(builder: (context, constraint) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraint.maxHeight),
child: IntrinsicHeight(
child: SizedBox(
width: 80,
child: NavigationRail(
labelType: NavigationRailLabelType.all,
destinations: <NavigationRailDestination>[
for (var i = 0; i < subCategory.subCategory!.length; i++)
NavigationRailDestination(
icon: Icon(Icons.shop),
// selectedIcon: Icon(Icons.favorite),
label: Center(
child: Text(
subCategory.subCategory![i].subCategoryName!,
style: TextStyle(color: Colors.black),
),
),
),
],
selectedIndex: selected,
onDestinationSelected: (value) {
setState(() {
selected = value;
});
},
),
)),
),
);
}),
]),
),
);
Use textAlign: TextAlign.center,
on lavbel Text.
label: Text(
"${subCategory.subCategory?[i].subCategoryName}", //null acceptation
textAlign: TextAlign.center, //this
style: TextStyle(color: Colors.black),
),