Search code examples
flutterflutter-layout

How to center text in destination in flutter navigation rail?


I'm trying to create navigation like the below Image using a navigation rail to get the solution The result I'm trying to get

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.

result i'm getting

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

Solution

  • Use textAlign: TextAlign.center, on lavbel Text.

    label: Text(
      "${subCategory.subCategory?[i].subCategoryName}", //null acceptation
      textAlign: TextAlign.center, //this
      style: TextStyle(color: Colors.black),
    ),