flutterdarttabsflutter-layouthorizontal-scrolling

Horizontally scrollable tabs focus on center with snap in flutter


Here I want to ask or can I make a tutorial like tabs, focusing center but the left and right tabs are 30% transparent like this, thank you!

enter image description here


Solution

  • Same can be achieved using - unselectedLabelColor: & indicatorColor: of TabBar widget.

    Example Code:

    @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 6,
          child: Scaffold(
              appBar: AppBar(
                centerTitle: true,
                leading: Icon(Icons.person_outline),
                title: Text('DASHBOARD',style: TextStyle(fontSize: 16.0),),
                bottom: PreferredSize(
                    child: TabBar(
                        isScrollable: true,
                        unselectedLabelColor: Colors.white.withOpacity(0.3),
                        indicatorColor: Colors.white,
                        tabs: [
                          Tab(
                            child: Text('Tab 1'),
                          ),
                          Tab(
                            child: Text('Investment'),
                          ),
                          Tab(
                            child: Text('Your Earning'),
                          ),
                          Tab(
                            child: Text('Current Balance'),
                          ),
                          Tab(
                            child: Text('Tab 5'),
                          ),
                          Tab(
                            child: Text('Tab 6'),
                          )
                        ]),
                    preferredSize: Size.fromHeight(30.0)),
                actions: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(right: 16.0),
                    child: Icon(Icons.add_alert),
                  ),
                ],
              ),
              body: TabBarView(
                children: <Widget>[
                  Container(
                    child: Center(
                      child: Text('Tab 1'),
                    ),
                  ),
                  Container(
                    child: Center(
                      child: Text('Tab 2'),
                    ),
                  ),
                  Container(
                    child: Center(
                      child: Text('Tab 3'),
                    ),
                  ),
                  Container(
                    child: Center(
                      child: Text('Tab 4'),
                    ),
                  ),
                  Container(
                    child: Center(
                      child: Text('Tab 5'),
                    ),
                  ),
                  Container(
                    child: Center(
                      child: Text('Tab 6'),
                    ),
                  ),
                ],
              )),
        );
      }
    

    Output:

    enter image description here