在 Flutter 中的 PageView 页面的背景颜色之间创建渐变？

Question

我有一个包含 4 个页面的 PageView，设置如下：

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 的新手，我还没有找到任何相关信息。

编辑：这就是我希望它们的样子。

Swiping across quickly.
And slowly.

我正在添加 gfycat 链接，因为下载的 gif 文件播放速度太慢。

Answer 1

您可以使用 TweenSequence 在多个补间之间进行转换。结合 ColorTween 定义颜色过渡。

然后你可以通过听你的 PageController 使用 AnimatedBuilder 把它全部包装起来。

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

在 Flutter 中的 PageView 页面的背景颜色之间创建渐变？

Create gradient between background colors of PageView pages in Flutter?

flutter

flutter-layout