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

Question

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

Answer 1

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

以下是一段工作代码示例。您可以在 dartpad here.

查看现场演示

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),
            ],
          ),
        ),
      ),
    );
  }
}

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

How to add gradient to tab bar underline in flutter?

flutter

flutter-web