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

Issue

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

Solution

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"),
              ],
            ),
          ),
        ),
      ),
    )

Answered By – eamirho3ein

Answer Checked By – Mary Flores (FlutterFixes Volunteer)