實現效果：

ezgif.com-gif-maker.gif

實現方式，在pubspec.yaml里面添加依賴

依賴鏈接：https://pub.dev/packages/link_scroll_menu#1stringlist

link_scroll_menu: ^0.0.5

具體代碼調用：

List<Color> colorList = [
    Color(0xFF969AF9),
    Color(0xFF53CFA1),
    Color(0xFFFF9E59),
    Color(0xFFFF99CB),
    Color(0xFF80D0FF),
  ];
  List<String> menuList = ['關注','推薦','熱榜','抗疫','視頻','小視頻','直播','娛樂','新聞'];

1、默認頂部菜單樣式，此樣式只能傳string類型的list

return CCMenuPage(
        menuList: menuList,
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

2、可以設置頂部菜單樣式，文字顏色、大小、下劃線顏色等，此樣式只能傳string類型的list

return CCMenuPage.custom(
        menuList: menuList,
        tabHeight: 60,
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

3、可以自定義頂部菜單樣式

return CCMenuPage.builder(
        itemCount: menuList.length,
        tabBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: 60,
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 Container(
                   width: 30,
                   height: 30,
                   margin: EdgeInsets.only(
                     bottom: 10,
                     top: 10
                   ),
                   color: Colors.amber,
                 ),
                 Text(
                   menuList[index],style: TextStyle(fontSize: 18),
                 )
               ],
             ),
          );
        },
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

4、可以在滾動頁面添加頭部和底部，不會影響菜單選中

return CCMenuPage.custom(
        menuList: menuList,
        tabHeight: 60,
        headerWidget: Container(
          alignment: Alignment.center,
          height: 200,
          color: Colors.black38,
          child: Text('這是頭部',style: TextStyle(fontSize: 20),),
        ),
        bottomWidget: Container(
          alignment: Alignment.center,
          height: 200,
          color: Colors.black38,
          child: Text('這是底部',style: TextStyle(fontSize: 20),),
        ),
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

5、動態實現菜單個數

GlobalKey<CCMenuPageState> menuState = GlobalKey<CCMenuPageState>();

return CCMenuPage.custom(
        key: menuState,
        menuList: menuList,
        tabHeight: 60,
        itemBuilder: (BuildContext context,int index){
          return Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 200,
            color: colorList[index % colorList.length],
            child: Text('${menuList[index]}',style: TextStyle(fontSize: 20),),
          );
        },
      );

點擊添加菜單按鈕：

      GestureDetector(
             onTap: (){
              menuList.add('新增菜單');
              menuState.currentState.updateMenu();
              setState(() {

              });
             },
             child: Container(
               width: 50,
               child: Icon(Icons.add,color: Colors.white,),
             ),
           )