Flutter自定义tabbar任意样式

在Flutter中，你可以通过自定义TabBar和TabBarView来创建具有任意样式的标签栏。以下是一个简单的自定义TabBar的例子，使用TabBar和Tab来展示不同的样式：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Custom Tab Bar Example'),
            bottom: TabBar(
              tabs: [
                Tab(
                  child: Text(
                    'Tab 1',
                    style: TextStyle(color: Colors.blue),
                  ),
                ),
                Tab(
                  child: Text(
                    'Tab 2',
                    style: TextStyle(color: Colors.green),
                  ),
                ),
                Tab(
                  child: Text(
                    'Tab 3',
                    style: TextStyle(color: Colors.red),
                  ),
                ),
              ],
              indicatorColor: Colors.white,
              indicatorWeight: 4.0,
              indicatorPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
              indicator: BoxDecoration(
                border: Border.all(color: Colors.blue, width: 2.0),
                borderRadius: BorderRadius.circular(10.0),
              ),
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Content of Tab 1')),
              Center(child: Text('Content of Tab 2')),
              Center(child: Text('Content of Tab 3')),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们定制了TabBar的各个属性，包括标签的样式、指示器的样式和尺寸。你可以根据需要调整Tab的样式和indicator的装饰来实现不同的设计。此外，你还可以通过自定义TabController来实现更复杂的交互。