简体   繁体   中英

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

Here's the code, The problem is that there is a gap of black colour around the rounded corners due to theme data being black. I can't fill it with gradient present in the above container. image has been attached. any solution?

 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),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

The image where I am having the problem

I tested it on DartPad. Give it a try. Using stack, you can fill the background and draw on top of it.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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