Question 168650 in Flutter Question posted in
The official Flutter documentation can be found here.

Can Flutter create custom tabs with images?

how can we create a custom tab like bellow image in Flutter ?

enter image description here

I searched and saw many custom tabs but any of them did not like this.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @MrOrhan I create my tabs with bellow code

    Column(
            children: [
              Container(
                height: 50.0,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    Row(
                      children: [
                        InkWell(
                          onTap: () => homeProvider.setTabIndex(0),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            mainAxisSize: MainAxisSize.max,
                            children: [
                              Container(
                                decoration: BoxDecoration(
                                  borderRadius: const BorderRadius.only(
                                    topRight: Radius.circular(
                                      10.0,
                                    ),
                                  ),
                                  color: homeProvider.tabs[0].color,
                                ),
                                width: 100,
                                height: homeProvider.tabIndex == 0 ? 50 : 40,
                                child: Center(
                                    child: Text(
                                  homeProvider.tabs[0].title,
                                  style: const TextStyle(
                                      fontSize: 18, color: Colors.white),
                                )),
                              ),
                            ],
                          ),
                        ),
                        InkWell(
                          onTap: () => homeProvider.setTabIndex(1),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            mainAxisSize: MainAxisSize.max,
                            children: [
                              Container(
                                decoration: BoxDecoration(
                                  borderRadius: const BorderRadius.only(
                                    topRight: Radius.circular(
                                      10.0,
                                    ),
                                    topLeft: Radius.circular(
                                      10.0,
                                    ),
                                  ),
                                  color: homeProvider.tabs[1].color,
                                ),
                                width: 150,
                                height: homeProvider.tabIndex == 1 ? 50 : 40,
                                child: Center(
                                    child: Text(
                                  homeProvider.tabs[1].title,
                                  style: const TextStyle(
                                      fontSize: 18, color: Colors.white),
                                )),
                              ),
                            ],
                          ),
                        ),
                        InkWell(
                          onTap: () => homeProvider.setTabIndex(2),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            mainAxisSize: MainAxisSize.max,
                            children: [
                              Container(
                                decoration: BoxDecoration(
                                  borderRadius: const BorderRadius.only(
                                    topLeft: Radius.circular(
                                      10.0,
                                    ),
                                  ),
                                  color: homeProvider.tabs[2].color,
                                ),
                                width: 150,
                                height: homeProvider.tabIndex == 2 ? 50 : 40,
                                child: Center(
                                    child: Text(
                                  homeProvider
                                      .tabs[homeProvider.tabIndex].title,
                                  style: const TextStyle(
                                      fontSize: 18, color: Colors.white),
                                )),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              SizedBox(
                height: 5.0,
                child: Container(
                  color: homeProvider.tabs[homeProvider.tabIndex].color,
                ),
              )
            ],
          );

    and the output is like bellow

    enter image description here

    enter image description here


  2. 0
    • First you create a List, where you will specify your tab Items, with
      color, name and so on. It would be better to create a model for that
      and hold them in a List.
    • Then you generate a Horizontal Scrollable-Listview. And you will wrap each ListView with an InkWell, so they are "Tab-able". also They have to be wrapped within a container, where you give them on the top lieft and right a rounded border and the color you wish
    • Then create a Container with height of 2 and update its color, based on the tablist-item color.
    • If you also want to be more advanced, you can take an Animated Container instead of a normal Container for the Listview-Items, so you can change its size when its tapped. This will need a lot of fine tuning.

    With this cookbook you can build your own.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search