How to implement a background with a gradient border and a gradient background-CodePudding

What I want to implement is like this style. Pls see the picture below. Need show

The border is gradient, start color is

#08FFFB

and the end color is

#FF4EEC

.And the background which like black is also gradient which start color is

#3A3A3A

and the end color is

#0B0B0B

The corner radius is 16.

I want to use it as a custom indicator in TabBar component. So, I custom the

indicator

like this.


@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(),
),
),
),
)，
);
}

I have tried to use image in BoxDecoration but it is not work. And I also get some informations from internet that maybe I can use a custom Widget extends Decoration, but I need to override paint() method. It is too difficulty to me. So I came here to ask for help. Thanks a lot.

It is my frist question at here. So the format is not that good. Pls forgive me.

CodePudding user response：

Step 1:- Design A Gradient Container First... Step 2:- With the help of Stack Take The Second Container...

I hope this is useful...

CodePudding user response：

Defining gradient for container is pretty straight forward, For border gradient please follow this good blog. https://blog.logrocket.com/how-to-create-simple-gradient-borders-flutter/