flutter - 如何在颤动中为标签栏下划线添加渐变？

Question

我正在寻找将渐变添加到标签栏下划线的方法。谢谢你。

标签： flutterflutter-web

Answer 1

您必须indicator直接在TabBar接受 a 的小部件中设置属性BoxDecoration，然后调整其他设置，例如indicatorPadding, indicatorWeight。

以下是一段工作代码示例。你可以在这里查看 dartpad 中的现场演示。

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.black,
            bottom: TabBar(                    
              indicator: BoxDecoration(             
                gradient: LinearGradient(
                  colors: [
                    Colors.green,
                    Colors.blue,
                    Colors.red,
                  ],
                ),
                borderRadius: BorderRadius.all(
                  Radius.circular(5),
                ),
              ),
              indicatorWeight: 5,
              indicatorPadding: EdgeInsets.only(top:40),              
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}