Flutter 实现背景 Parallax 动画

Flutter 实现背景 Parallax 动画

原文 https://arkapp.medium.com/background-parallax-animation-in-flutter-4aa9e23d6cfb

前言

我们将创建我们的 Flutter 项目惊人的 Parallax 动画。

在本文中，我们将实现一个简单的实用工具 widget ，它将在任何 widget 之上添加 Parallax 效果。

正文

创建 Base Widget

让我们创建我们的基础 widget ，我们将添加 Parallax 动画。在 BaseWidget 中，我们将从 Asset 目录添加一个图像。稍后，我们将添加 Parallax 效果到这个图像。

import 'package:flutter/material.dart';

class BaseWidget extends StatelessWidget {
   
  const BaseWidget({
   super.key});

  @override
  Widget build(BuildContext context) {
   

    ///We will add parallax effect to this image
    return Image.asset(
      'assets/moon.webp',
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
    );
  }
}

1
2
3
4

创建 Parallax widget

现在我们将创建一个实用工具 widget ，它将为上面的 BaseWidget 添加 Parallax 效果。这将是采用子窗口 widget 作为构造函数参数的状态窗口 widget 。