Figma design我在为渐变色的Container创建边框时遇到了困难。该设计基于Figma设计,我必须编写代码。我的想法是将外部容器 Package 起来并在内部填充,但效果不佳。我该怎么办?
class PoppinButton extends StatelessWidget {
const PoppinButton({Key? key, required this.text}) : super(key: key);
final String text;
@override
Widget build(BuildContext context) {
return Container(
height: 55,
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
gradient: const LinearGradient(
begin: Alignment(1,-1),
end: Alignment(1,-1),
colors: <Color>[Color(0xFFFF53C0),Color(0x00FF53C0),],
// stops: [0.1507, 1.044]
)
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
gradient: const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[Color(0xFFB6116B),Color(0xFF3B1578)],
stops: [0.1507, 1.044]
)
),
child: Center(
child: Text(text,style: GoogleFonts.poppins(
textStyle: const TextStyle(
color: Colors.white,
fontSize: 18,
)
),),
),
),
);
}
}
Figma color and border
我期待一个正确的答案,可以帮助我解决我的问题,tks家伙新编辑:下面的答案代码无效:((
1条答案
按热度按时间bd1hkmkf1#
你可以尝试添加2个嵌套的容器,其中内部的填充实际上是边框的厚度。为每个容器定义你喜欢的渐变: