Как установить статический градиентный фон для PageView во Flutter?

Question

В настоящее время у меня есть PageView, настроенный на 3 страницы, с возможностью прокрутки сверху вниз, с одинаковым градиентом фона, но при каждом изменении страницы я прокручиваю градиент.Как вы можете себе представить, выглядит несколько неестественно видеть начало и конец градиента во время прокрутки.Я бы хотел, чтобы он оставался на месте и не двигалсяВот где я потерялся.

Я попытался удалить контейнер градиента с каждой страницы и поместить его в позиционированный виджет в классе, который отображается, как показано ниже.Я попытался просто вернуть Контейнер (являющийся градиентом моего выбора - "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

Решено

Оберните каждый материал контейнером и установите цвет каждого в Colors.transparent

Затем вернул градиентный фон с просмотром страницы как ребенок.

Answer 2

Добавьте стек внутри контейнера.Вы должны использовать это под своим Контейнером.

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



  }

}