自定义flutter标签栏

Question

我正在使用一个TabBar部件，我想自定义TabBar视图，就像这张图片。我试了很多次，但两个标签之间有一些空格，这就是我用来定制标签栏视图的代码。

这是我用来定制标签栏视图的代码。

TabBar(
            controller: _tabController,
            labelColor: Colors.black12,
            unselectedLabelColor: Colors.black12,
            indicatorSize: TabBarIndicatorSize.label,
            tabs: [
              Tab(
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.horizontal(
                        left: Radius.circular(50), right: Radius.zero),
                    border: _tabController.index == 1
                        ? Border.all(color: Colors.black12, width: 2)
                        : Border.all(color: Colors.transparent, width: 2),

                    color: _tabController.index == 0
                        ? Colors.indigo
                        : Colors.white,
                  ),
                  child: Align(
                    alignment: Alignment.center,
                    child: Text("Income"),
                  ),
                ),
              ),
              Tab(
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.horizontal(
                        left: Radius.zero, right: Radius.circular(50)),
                    border: _tabController.index == 1
                        ? Border.all(color: Colors.transparent, width: 2)
                        : Border.all(color: Colors.black12, width: 2),
                    color: _tabController.index == 1
                        ? Colors.indigo
                        : Colors.white,
                  ),
                  child: Align(
                    alignment: Alignment.center,
                    child: Text("Expense"),
                  ),
                ),
              ),
            ],
          ),

输出

Answer 1

你可以给整个底部的半径，而不仅仅是两个标签，你可以做这样的事情，只是给半径的所有方面，我需要给只有右上角和左上角在我的情况下。

PreferredSize(
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(30),
                        topRight: Radius.circular(30),
                      ),
                    ),
                    child: TabBar(
                      // indicatorPadding: EdgeInsets.all(30),

                      tabs: [
                        Tab(
                          child: Text(
                            "Expnanse",
                            style: TextStyle(color: Colors.black),
                          ),
                        ),
                        Tab(
                          child: Text(
                            "Income",
                            style: TextStyle(color: Colors.black),
                          ),
                        ),
                      ],
                    ),
                  ),
                  preferredSize: const Size.fromHeight(70.0),
                ),
              ),