如何实现具有渐变边框和渐变背景的背景

Question

我想实现的是这样的风格。请看下面的图片。需要显示

边框为渐变，起始颜色为

#08FFFB 

，结束颜色为

#FF4EEC

。背景，比如黑色也是渐变的起始颜色是

#3A3A3A 

，结束颜色为

#0B0B0B

圆角半径为16。

我想在TabBar组件中使用它作为自定义指示器。因此，我自定义

indicator

。

@override
Widget build(BuildContext context) {
List<String> list = ["全部","读书","电影", "小说"];
return Padding(
padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
child: Container(
width: double.infinity,
height: 62,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Padding(
padding: EdgeInsets.fromLTRB(25, 13, 25, 13),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: YYSColors.yysTextColor(),
isScrollable: true,
indicator: new BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Color(int.parse("FF3A3A3A", radix: 16)),
Color(int.parse("FF2B2B2B", radix: 16))
],
),
borderRadius: BorderRadius.circular(16),
border: new Border.all(
color:  Color(int.parse("FF08FFFB", radix: 16)), width: 2),
),
tabs: list
.map((String arenaType) {
return Tab(text: arenaType);
}).toList(),
),
),
),
)，
);
}

我已经尝试在BoxDecoration中使用图像，但它不工作。我也从互联网上得到一些信息，也许我可以使用自定义小部件扩展装饰，但我需要重写油漆()方法。这对我来说太难了。所以我来这里寻求帮助。非常感谢。

这是我在这里的第一个问题。所以格式不是很好。请原谅我。

Answer 1

为容器定义渐变非常简单，关于边界渐变，请关注这个好的博客。https://blog.logrocket.com/how-to-create-simple-gradient-borders-flutter/

Answer 2

1. 设计渐变容器
使用Stack获取第二个容器