繁体   English   中英

如何为我的整个 Flutter 应用程序提供线性渐变?

[英]How can I give Linear gradient to my entire flutter app?

这是代码,问题是由于主题数据为黑色,圆角周围存在黑色间隙。 我无法用上述容器中的渐变填充它。 图片已附上。 任何解决方案?

 class _TrackListState extends State<TrackList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Container(
                height: double.infinity,
                //child: Text('hello'),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                      colors: [Color(0xFF04DCB6), Color(0xFF6DE079)]),
                ),
                child: Column(
                  children: <Widget>[],
                ),
              ),
            ),
            Expanded(
              flex: 3,
              child: Container(
                //padding: EdgeInsets.symmetric(horizontal: 20),
                foregroundDecoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30),
                    topRight: Radius.circular(30),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

我遇到问题的图像

我在 DartPad 上测试过。 试一试。 使用堆栈,您可以填充背景并在其上绘制。

      @override
      Widget build(BuildContext context) {
        return Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                gradient:
                    LinearGradient(colors: [Color(0xFF04DCB6), Color(0xFF6DE079)]),
              ),
            ),
            Positioned.fill(
              top: 80,
              child: Container(
                foregroundDecoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30),
                    topRight: Radius.circular(30),
                  ),
                ),
              ),
            ),
          ],
        );
      }

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM