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

Question

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

Answer 1

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