Question

如何制作像这张图片一样的弯曲标签？ Tabs Image

这是我尝试的代码：

TabBar(
    controller: _tabcntrl,
    indicatorColor: Colors.white,
    indicator: BoxDecoration(color: Colors.white),
    indicatorSize: TabBarIndicatorSize.label,
    labelPadding: EdgeInsets.all(0),
    tabs: <Widget>[
        DecoratedBox(
            decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(50))),
              child: FlatButton(
                child: SizedBox(
                  width: 80,
                  child: Text(
                    'Expense',
                  ),
                ),
                onPressed: () {},
              ),
            ),

          ],
        ),

我尝试将半径设置为FlatButton的框，但是没有用。

Answer 1

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(
            "data",
            style: TextStyle(color: Colors.black),
          ),
        ),
        Tab(
          child: Text(
            "data",
            style: TextStyle(color: Colors.black),
          ),
        ),
      ],
    ),
  ),

如何在颤抖的TabBar中制作弯曲的Tab

1 个答案: