如何在Flutter中为PageView设置静态渐变背景？

Question

目前，我的PageView设置有3个页面，可从上到下滚动，所有页面都具有相同的背景渐变，但是每次更改页面时，我都将滚动渐变。可以想象，滚动时看到渐变的开始和结束看起来有些不自然。我希望它保持原状而不动。 那就是我迷路的地方。

我尝试从每个页面中删除渐变容器，并将其放入正在渲染的类中的定位小部件中，如下所示。 我尝试简单地返回一个Container（作为我选择的渐变-“ Background（null）”），然后将intropageview作为其子级返回。

class TestGenderSelection extends StatefulWidget {
  _TestGenderSelection createState() => _TestGenderSelection();
}

class _TestGenderSelection extends State<TestGenderSelection> {
  var account  = Account();
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Stack(
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 50.0,left: 20.0),
                    child: SvgPicture.asset(
                        "assets/images/rocker.svg",
                        width: 70,
                        height: 70,
                        alignment: Alignment.topLeft),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 20.0,left: 20.0),
                    child: Text(
                      "May I Assume your gender?\nYou tell me.",
                      style: TextStyle(
                          fontSize: 25,
                          fontFamily: "IntroBlackCaps",
                          fontWeight: FontWeight.w300,
                          color: Colors.white
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 250.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        InkWell(onTap: () { BamRemote.goToHome(context);print(account.username);},child: SvgPicture.asset("assets/images/baby-boy.svg",width: 150, height: 150,)),
                        InkWell(onTap: () => BamRemote.goToHome(context),child: SvgPicture.asset("assets/images/baby-girl.svg",width: 150, height: 150,)),
                        InkWell(onTap: () => BamRemote.goToHome(context),child: SvgPicture.asset("assets/images/newborn.svg",width: 150, height: 150,))
                      ],),
                  )


                ],
              ),
              Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Padding(
                        padding: const EdgeInsets.only(right: 20.0, bottom: 20.0),
                        child: Align(
                            alignment: Alignment.bottomRight,
                            child: InkWell(
                              onTap: () => introcontroller.previousPage(duration: Duration(milliseconds: 900), curve: Curves.linearToEaseOut),
                              child: RotatedBox(
                                  quarterTurns: 1,
                                  child: Icon(Icons.arrow_back_ios,color: Colors.white,size: 25.0,)),
                            ))),

                    Padding(
                        padding: const EdgeInsets.only(right: 20.0, bottom: 20.0),
                        child: Align(
                            alignment: Alignment.bottomRight,
                            child: InkWell(
                              onTap: () => introcontroller.nextPage(duration: Duration(milliseconds: 900), curve: Curves.linearToEaseOut),
                              child: RotatedBox(
                                  quarterTurns: 3,
                                  child: Icon(Icons.arrow_back_ios,color: Colors.white,size: 25.0)),
                            )))]),

            ]),
      ),
    );
  }

}

final intropageview = PageView(
  scrollDirection: Axis.vertical,
  controller: introcontroller,
  children: <Widget>[
    TestSplashScreen(),
    TestNameSelection(),
    TestGenderSelection(),
    //TestThemeSelection(),
  ],
);

class Intro extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      children: <Widget>[
        Positioned(
          top: 0.0,
          child: Background(null)
        ),
        intropageview,
      ],
    );


  }

}

我没有收到任何错误消息。我猜，它只是将背景渲染为黑色，作为我主题的主要颜色。

Answer 1

将堆栈添加到容器中。您应该在“容器”下使用它。

decoration: BoxDecoration(
            // Box decoration takes a gradient
            gradient: LinearGradient(
              // Where the linear gradient begins and ends
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              // Add one stop for each color. Stops should increase from 0 to 1
              stops: [0.1, 0.4, 0.7, 1.0],
              colors: [
                // Colors are easy thanks to Flutter's Colors class.
                const Color(0xff0D37C1),
                Colors.deepPurpleAccent,
                Colors.deepPurple,
                Colors.purple,
              ],
            ),
          ),

最后，您将必须像这样更改

class Intro extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      decoration: BoxDecoration(
            // Box decoration takes a gradient
            gradient: LinearGradient(
              // Where the linear gradient begins and ends
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              // Add one stop for each color. Stops should increase from 0 to 1
              stops: [0.1, 0.4, 0.7, 1.0],
              colors: [
                // Colors are easy thanks to Flutter's Colors class.
                const Color(0xff0D37C1),
                Colors.deepPurpleAccent,
                Colors.deepPurple,
                Colors.purple,
              ],
            ),
          ),
      child: Stack(
      children: <Widget>[
        Positioned(
          top: 0.0,
          child: Background(null)
        ),
        intropageview,
      ],
    ),
    );



  }

}

Answer 2

已解决

用容器包装每种材料，并将每种颜色设置为Colors.transparent

然后以子视图返回带有网页浏览量的渐变背景。