有没有办法让标签栏指示线在颤动中渐变? [英] Is there a way to make the tab bar indicator line a gradient in flutter?

问题描述

我正在尝试创建一个带有渐变下划线的 TabBar，如下图所示.

我尝试按照之前帖子的建议使用 BoxDecoration，但它并没有完全按照我想要的方式显示.

TabBar(labelColor: Theme.of(context).primaryColor,指标:BoxDecoration(渐变:线性渐变(颜色:常量 [颜色(0xFF10C7E0)，颜色(0xFF00D5C3)]，),),标签: ...,),

当我尝试这样做时，我得到的是

有人指出这篇文章是

I am trying to create a TabBar which has a gradient underline like in the image below.

I tried to use a BoxDecoration as suggested by earlier posts but it does not exactly display as i want it to.

TabBar(
        labelColor: Theme.of(context).primaryColor,
        indicator: BoxDecoration(
          gradient: LinearGradient(
  colors: const [Color(0xFF10C7E0), Color(0xFF00D5C3)],
),
        ),
        tabs: ...,
      ),

When i try that, what i get is

Someone pointed out that this post is a duplicate of how-to-give-a-gradient-line-in-tab-bar-indicator which was posted 10 months ago. BUT the method illustrated there NO longer works. Yes, i tried it.

解决方案

what's wrong with this option? (based on code from link)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('All', style: TextStyle(color: const Color(0xff596173))),
            backgroundColor: Colors.white,
            centerTitle: true,
            bottom: TabBar(
              labelColor: const Color(0xff525c6e),
              unselectedLabelColor: const Color(0xffacb3bf),
              indicatorPadding: EdgeInsets.all(0.0),
              indicatorWeight: 4.0,
              labelPadding: EdgeInsets.only(left: 0.0, right: 0.0),
              indicator: ShapeDecoration(
                  shape: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.transparent, width: 0, style: BorderStyle.solid)),
                  gradient: LinearGradient(colors: [Color(0xff0081ff), Color(0xff01ff80)])),
              tabs: <Widget>[
                Container(
                  height: 40,
                  alignment: Alignment.center,
                  color: Colors.white,
                  child: Text("Visual"),
                ),
                Container(
                  height: 40,
                  alignment: Alignment.center,
                  color: Colors.white,
                  child: Text("Tabular"),
                ),
              ],
            ),
          ),
          body: Container(color: Colors.grey[200]),
        ),
      ),
    );
  }
}

这篇关于有没有办法让标签栏指示线在颤动中渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！