How to make a gradient background color full screen and blend between the appbar and body in Flutter

Question

how to make a gradient background color full screen and blend between the appbar and body, so the colors look merged and don't look disconnected between the colors in the appbar and body. this is the view:

this is my code:

    return Scaffold(
    appBar: AppBar(
      title: Text("Title"),
      elevation: 0,
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.centerRight,
            colors: [
              Color.fromRGBO(205, 193, 255, 1.0),
              Color.fromARGB(255, 252, 99, 99),
              Color.fromARGB(255, 173, 41, 1),
            ],
          ),
        ),
      ),
    ),
    body: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.centerRight,
          colors: [
            Color.fromRGBO(205, 193, 255, 1.0),
            Color.fromARGB(255, 252, 99, 99),
            Color.fromARGB(255, 173, 41, 1),
          ],
        ),
      ),
      padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
      child: Center(
        child: Column(
          children: [
            Text("bla bla bla"),
            Text("bla bla bla"),
          ],
        ),
      ),
    ));

Answer 1

Solution one: set appbar background and scaffold background to transparent and set extendBodyBehindAppBar true and set top padding manually:

Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        leading: Icon(Icons.arrow_back),
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text('test'),
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.centerRight,
            colors: [
              Color.fromRGBO(205, 193, 255, 1.0),
              Color.fromARGB(255, 252, 99, 99),
              Color.fromARGB(255, 173, 41, 1),
            ],
          ),
        ),
        padding: EdgeInsets.fromLTRB(
        10,
        AppBar().preferredSize.height +
            MediaQuery.of(context).viewPadding.top,
        10,
        0),
        child: Center(
          child: Column(
            children: [
              Text("bla bla bla"),
              Text("bla bla bla"),
            ],
          ),
        ),
      ),
    )

Solution two: use DecoratedBox and set appbar and scaffold background to transparent:

DecoratedBox(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.centerRight,
          colors: [
            Color.fromRGBO(205, 193, 255, 1.0),
            Color.fromARGB(255, 252, 99, 99),
            Color.fromARGB(255, 173, 41, 1),
          ],
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          leading: Icon(Icons.arrow_back),
          backgroundColor: Colors.transparent,
          elevation: 0,
          title: Text('test'),
        ),
        body: Container(
          padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
          child: Center(
            child: Column(
              children: [
                Text("bla bla bla"),
                Text("bla bla bla"),
              ],
            ),
          ),
        ),
      ),
    )