Создать градиент между цветами фона страниц PageView во Flutter?

У меня есть PageView с 4 страницами, настроенными так:

PageView(
          children: [
              _buildPage(color: Colors.orange[600]),
              _buildPage(color: Colors.deepPurple[400]),
              _buildPage(color: Colors.yellow[300]),
              _buildPage(color: Colors.blue[400]),
            ],
          ),

Внутри каждой страницы у меня есть контейнер с цветом, который я передал в качестве параметра:

Widget _buildPage({color: Color}) {
    return Container(
      color: color,
      ...

Всякий раз, когда я пролистываю страницы, наблюдается резкий переход между цветами введите описание изображения здесь

Я хочу иметь это так, чтобы всякий раз, когда я проводил пальцем по страницам, цвет с одной страницы плавно переходил в цвет с новой страницы. Возможно ли это? Я новичок во Flutter, и мне ничего не удалось найти по этому поводу.

ИЗМЕНИТЬ: вот как я хочу, чтобы они выглядели.

Быстрое перелистывание.
И медленно.

Я добавляю ссылки gfycat, так как загруженные гифки воспроизводились слишком медленно.


flutter flutter-layout
person Rafael Uchoa    schedule 20.08.2018    source источник
comment
Можете ли вы добавить гифку с желаемыми эффектами? Может быть много потенциальных результатов   -  person Rémi Rousselet    schedule 20.08.2018
comment
@ RémiRousselet спасибо за предложение, я их добавил   -  person Rafael Uchoa    schedule 20.08.2018
comment
Но как с ним переходит контент?   -  person Rémi Rousselet    schedule 20.08.2018
comment
@ RémiRousselet О, контент перемещается, как обычно, просто удаляется. Только фон плавно выцветает.   -  person Rafael Uchoa    schedule 20.08.2018

Ответы (1)


arrow_upward
15
arrow_downward

Вы можете использовать TweenSequence для перехода между несколькими анимациями. В сочетании с ColorTween для определения цветового перехода.

Затем вы можете обернуть все это с помощью AnimatedBuilder, послушав свой PageController.

введите описание изображения здесь

class Home extends StatefulWidget {
  @override
  HomeState createState() {
    return new HomeState();
  }
}

class HomeState extends State<Home> {
  PageController pageController;
  Animatable<Color> background;

  @override
  void initState() {
    _initialize();
    super.initState();
  }

  void _initialize() {
    background = TweenSequence<Color>([
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(
          begin: Colors.orange[600],
          end: Colors.deepPurple[400],
        ),
      ),
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(
          begin: Colors.deepPurple[400],
          end: Colors.yellow[300],
        ),
      ),
      TweenSequenceItem(
        weight: 1.0,
        tween: ColorTween(
          begin: Colors.yellow[300],
          end: Colors.blue[400],
        ),
      ),
    ]);
    pageController = PageController();
  }

  @override
  void reassemble() {
    pageController.dispose();
    _initialize();
    super.reassemble();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: pageController,
        builder: (context, child) {
          final color = pageController.hasClients ? pageController.page / 3 : .0;

          return DecoratedBox(
            decoration: BoxDecoration(
              color: background.evaluate(AlwaysStoppedAnimation(color)),
            ),
            child: child,
          );
        },
        child: PageView(
          controller: pageController,
          children: [
            Center(child: Text("Orange")),
            Center(child: Text("Purple")),
            Center(child: Text("Lime")),
            Center(child: Text("Blue")),
          ],
        ),
      ),
    );
  }
}
person Rémi Rousselet    schedule 20.08.2018
comment
Вы знаете, что нужно импортировать? Я все время получаю ошибки о том, что TweenSequence и TweenSequenceItem не определены. Я попытался импортировать пакет анимации, но этого не произошло. - person Rafael Uchoa; 20.08.2018
comment
Обычная штука. Но это новая функция. Возможно, вам придется обновить флаттер или даже переключиться на главную ветку - person Rémi Rousselet; 20.08.2018
comment
не могли бы вы объяснить немного больше, почему pageController.page / 3 это? - person rahul Kushwaha; 14.05.2020
comment
Поскольку существует 4 страницы, у которых длина страницы в три раза больше ширины (первая страница имеет pageController.page = 0, вторая страница имеет значение pageController.page = 1 или одну ширину и так далее). Итак, если у вас есть, скажем, 7 страниц, вам нужно разделить на 6 (n-1) - person Georg Panteleev; 24.01.2021