自定义 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),
                ),
              ),

Answer 2

如果您需要自定义标签，我漂亮的标签源代码可能会对您有所帮助，与此无关post

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


class StudentScreen extends StatefulWidget {
  @override
  _StudentScreenState createState() => _StudentScreenState();
}

class _StudentScreenState extends State<StudentScreen> with SingleTickerProviderStateMixin {
  TabController controller;
  int activeTabIndex = 1;

  @override
  void initState() {
    super.initState();
    controller = TabController(
      length: 2,
      initialIndex: 1,
      vsync: this,
    );
    controller.addListener(() {
      setState(() {
        activeTabIndex = controller.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: <Widget>[
            TabBar(
              indicatorColor: Colors.transparent,
              tabs: [
                Tab(
                  child: Container(
                      width: 100,
                      height: 36,
                      decoration: activeTabIndex == 0
                          ? BoxDecoration(
                              border: Border.all(color: Colors.blue, width: 2),
                              borderRadius: BorderRadius.all(Radius.circular(16)),
                            )
                          : null,
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(8, 4, 8, 0),
                        child: Center(child: Text("Tab one", style: TextStyle(color: Colors.black))),
                      )),
                ),
                Tab(
                  child: Container(
                      width: 100,
                      height: 36,
                      decoration: activeTabIndex == 1
                          ? BoxDecoration(
                              border: Border.all(color: Colors.blue, width: 2),
                              borderRadius: BorderRadius.all(Radius.circular(16)),
                            )
                          : null,
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(8, 4, 8, 0),
                        child: Center(child: Text("Tab two", style: TextStyle(color: Colors.black))),
                      )),
                ),
              ],
              controller: controller,
            ),
            Container(
              child: Row(
                children: <Widget>[],
              ),
            ),
            Expanded(
              child: Container(
                child: TabBarView(
                  controller: controller,
                  children: <Widget>[
                    Center(child: Text("Tab one")),
                    Center(child: Text("Tab two")),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 3

您需要添加：

labelPadding: EdgeInsets.all(0),

到你的 TabBar！

自定义 flutter 标签栏

Customize flutter Tab bar

tabs

tabbar

flutter

flutter-layout