颤振中的自定义标签栏选项卡

Question

我正在做一个项目，我需要这样的标签栏选项卡。我曾尝试使用选项卡-> 图标、文本，但它更小

我想要的东西：

我当前的代码：

  List<Tab> getTabs(int count, AsyncSnapshot snapshot) {
_tabs.clear();
for (int i = 0; i < count; i++) {
  categoriesmodel categ = snapshot.data[i];
  _tabs.add(
    getTab(
      categ.categories_name.toString(),
          categ.icon_of_category.toString(),
    ),
  );
}
return _tabs;
}


Tab getTab(String tabtitle, String imagepath) {
return Tab(
  icon: Image.network(
    imagepath,
    height: 40,
    width: 40,
  ),
  child: Text(
    tabtitle,
    style: TextStyle(color: Colors.black),
  ),
);}

应用栏内

bottom: PreferredSize(
            preferredSize: Size(120, 120),
            child: Container(
              height: 120,
              color: Colors.white,
              child: TabBar(
                isScrollable: true,
                indicatorColor: mainaccent,
                tabs: _tabs,
                controller: _tabController,
              ),
            ),
          ),

我的代码结果

Answer 1

这个例子可以帮助你：

 DefaultTabController(
      length: 3,
      child: Scaffold(
       appBar: AppBar(
         backgroundColor: Colors.white,
          title: Text('Flutter is Awesome' , style: TextStyle(color: Colors.black),),
          centerTitle: true,
          bottom: TabBar(
            tabs: [
            CircleAvatar(backgroundImage: AssetImage('assets/image1.png')),
            CircleAvatar(backgroundImage: AssetImage('assets/image2.png')),
            CircleAvatar(backgroundImage:  AssetImage('assets/image3.png')),
            ],
          ),
        ),
        body: TabBarView(children: [
          Center(child: Text('First Tab')),
          Center(child: Text('Second Tab')),
          Center(child: Text('Third Tab'))
        ])
      ),
    );

输出：

<块引用>

理想情况下，不要忘记用 DefaultTabController 包裹您的 Scaffold。
您也可以像这样直接使用 TabBar 而不是 AppBar：appBar : TabBar()。但请确保您有一个 SafeArea