做一个酷炫的flutter tab

文章来源: https://mightytechno.com/flutter-boring-tab-to-cool-tab/

flutter提供的默认选项卡样式有点无聊。</font>但它并没有说我们无法自定义标签的外观和感觉。</font></p>

通过更改选项卡指示器可以实现最佳和轻松的自定义。在本文中,我将向您展示如何为我们的下一个应用添加5种不同的标签样式。

首先,我们需要创建一个基本选项卡。在这里,我使用DefaultTabController。您可以将DefaultTabController分配给MaterialApp小部件的home参数。对于DefaultTabController的子项,您可以将Scaffold与appbar和body一起使用。对于appBar,您可以指定Appbar小部件以使标题成为标签的一部分。对于正文,您可以添加带有3个子窗口小部件的TabBarView窗口小部件,以在单击选项卡时显示该项目。

检查默认选项卡的完整代码。


DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            bottom: TabBar(indicatorSize: TabBarIndicatorSize.label, tabs: [
              Tab(
                child: Align(
                  alignment: Alignment.center,
                  child: Text("APPS"),
                ),
              ),
              Tab(
                child: Align(
                  alignment: Alignment.center,
                  child: Text("MOVIES"),
                ),
              ),
              Tab(
                child: Align(
                  alignment: Alignment.center,
                  child: Text("GAMES"),
                ),
              ),
            ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
    )

1.Round Corners

在这里,我们将向选项卡指示器添加圆角样式。首先,我将简要介绍一下我们要修改的参数。

  • unselectedLabelColor - 指示符不存在的标签的颜色。基本上,尚未选择的指标。
    indicatorSize - 选定的指标大小。我们可以添加两个值来指示标签宽度或标签宽度。
    指标 - 这是我们要为指标
    标签指定自定义样式的地方- 这将包含标签标题列表。在这里,我们可以为每个标签页添加额外的样式。

圆角样式可以通过添加带有borderRadius 50的BoxDecoration来完成。

然后我将为每个标签页添加一个红色边框。当您选择选项卡时,它将填充红色。如果您对边框不感兴趣,可以删除添加零件的边框并保持简洁。

扑圆角标签

DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0,
          bottom: TabBar(
              unselectedLabelColor: Colors.redAccent,
              indicatorSize: TabBarIndicatorSize.label,
              indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color: Colors.redAccent),
              tabs: [
                Tab(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(color: Colors.redAccent, width: 1)),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(color: Colors.redAccent, width: 1)),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(color: Colors.redAccent, width: 1)),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ),
              ]),
        ),
        body: TabBarView(children: [
          Icon(Icons.apps),
          Icon(Icons.movie),
          Icon(Icons.games),
        ]),
      ))

2.具有渐变的圆角

In here I removed the style which I was added to each tab. After that added a gradient to BoxDecoration. In here I used LinearGradient with two colours. You can change the gradient-based on your preferences.

用渐变标签飘动圆角

DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                unselectedLabelColor: Colors.redAccent,
                indicatorSize: TabBarIndicatorSize.tab,
                indicator: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.redAccent, Colors.orangeAccent]),
                    borderRadius: BorderRadius.circular(50),
                    color: Colors.redAccent),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )

3.Square Style

Square style can be done by changing small code in the previous one. BorderRadius of the boxDecoration can be changed by adding 10 for both leftTop and rightTop. Then I change the appbar backgroundColor to the red to make it look better.

扑方形标签样式



DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.redAccent,
            elevation: 0,
            bottom: TabBar(
                labelColor: Colors.redAccent,
                unselectedLabelColor: Colors.white,
                indicatorSize: TabBarIndicatorSize.label,
                indicator: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10),
                        topRight: Radius.circular(10)),
                    color: Colors.white),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ]
            ),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )

4.Diamond Style

Diamond tab style can be done by adding ShapeDecoration with BeveledRectangleBorder for the shape parameter.BeveledRectangleBorder will allow you to add flatten corner instead of round corners.

The line segments that connect the rectangle’s four sides will begin and at locations offset by the corresponding border radius, but not farther than the side’s center. If all the border radii exceed the sides’ half widths/heights the resulting shape is diamond made by connecting the centers of the sides.

BeveledRectangleBorder – flutter.dev

In here I used borderRadius as 10 to make it look like this.

扑动钻石标签造型

DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                unselectedLabelColor: Colors.redAccent,
                indicatorPadding: EdgeInsets.only(left: 30, right: 30),
                indicator: ShapeDecoration(
                    color: Colors.redAccent,
                    shape: BeveledRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                        side: BorderSide(
                          color: Colors.redAccent,
                        )
                    )
                ),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )

5.Diamond Style 2

Likewise, by changing the borderRadius of the BeveledRectangleBorder, you can achieve different styles. In here I used borderRadius as 20. You can try different styles by changing this borderRadius value.

扑动钻石标签造型

DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                unselectedLabelColor: Colors.redAccent,
                indicatorPadding: EdgeInsets.only(left: 30, right: 30),
                indicator: ShapeDecoration(
                    color: Colors.redAccent,
                    shape: BeveledRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                        side: BorderSide(
                          color: Colors.redAccent,
                        ))),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )

I hope you get a better understanding of how to change the tab style by a few lines of code. If you are like to watch this in action, please watch the video mentioned below. Don’t forget to subscribe my channel 🤗

参考

https://flutter.dev/docs/cookbook/design/tabs

https://api.flutter.dev/flutter/painting/BeveledRectangleBorder-class.html

0%