Flutter中如何使漸變背景色全屏並在appbar和body之間混合

Question

如何使漸變背景顏色全屏並在appbar和body之間混合，因此colors看起來合並並且在appbar和body之間看起來不斷開連接。 這是視圖：

這是我的代碼：

    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

解決方案一：將appbar背景和scaffold背景設置為透明並將extendBodyBehindAppBar設置為true並手動設置頂部填充：

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

解決方案二：使用DecoratedBox並將appbar和scaffold背景設置為透明：

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

Answer 2

在AppBar中添加backgroundColor: Colors.transparent, 。