如何在 flutter 中创建可滚动标签

Question

In the web world I have scrollable tabs offered by material-ui that looks like that.

I am trying create the same thing using flutter, I did a listview in a row however I am unable to create the next and previous buttons.

Help or a reference of the widget if it is already made is highly appreciated. Thank you

Answer 1

Check this out

Builder(
          builder: (context) {
            return Row(
              children: [
                IconButton(
                  icon: Icon(Icons.arrow_back_ios),
                  onPressed: (){
                    if(_tabController.index > 0){
                      _tabController.animateTo(_tabController.index - 1);
                    }else{
                      Scaffold.of(context).showSnackBar(SnackBar(content: Text("Can't go back"),));
                    }
                  },
                ),
                Expanded(
                  child: TabBar(
                    isScrollable: true,
                    controller: _tabController,
                    labelStyle: TextStyle(
                      color: Colors.black
                    ),
                    unselectedLabelColor: Colors.black,
                    labelColor: Colors.blue,
                    tabs: List.generate(
                      20,
                      (index) {
                        return Tab(
                          text: "Tab $index",
                        );
                      },
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.arrow_forward_ios),
                  onPressed: (){
                    if(_tabController.index+1 < 20){
                      _tabController.animateTo(_tabController.index + 1);
                    }else{
                      Scaffold.of(context).showSnackBar(SnackBar(content: Text("Can't move forward"),));
                    }
                  },
                ),
              ],
            );
          }
        )