How to create a tabbar with icon and text in same row in flutter?

user_16407586 0
Viewed 2396

I am trying to create a tab bar which contains icon and text in the same row in tab.

I have tried below code to implement the same , due to which the icon and text are shown in column manner in tab.

     bottom: TabBar(
                      tabs: [
                        Tab(icon: new Image.asset("assets/images/ic_policy@2x.png",width: 18,height: 18), child: Text("Policies")
                            ),
                        Tab(
                          child: Container(
                            child: Align(
                                alignment: Alignment.center,
                                child: Text("Policy Payments")),
                          ),
                        )

Can anyone guide me how to achieve the same. My tabbar currently looks as below.

enter image description here

I want to design something like below :-

enter image description here

flutter-layout flutter
1 Answers

why don't you define tabs like this?

Tab(
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Image.asset('assets/images/ic_policy@2x.png', width: 18, height: 18),
      const SizedBox(width: 8),
      Text('Policies'),
    ],
  ),
),
user_150844200
Related