Flutter – 液体滑动动画

Liquid Swipe 动画用于像水一样滑动页面，在屏幕上显示不同的设计和图案。它创建一个浮动状态。 Liquid Swipe 动画是一个非常流行的设计过程。移动可以帮助客户更长时间地从您的 UI 设计中获得灵感，并更有动力与内容协作。这种方法以一种新的方式为应用程序提供了流畅的外观。

按照以下步骤实现液体滑动动画：

• 第 1 步：使用以下命令创建Flutter应用程序：

flutter create liquid_swipe

注意：您可以为您的应用程序指定任何名称。

• 第二步：在main.c中创建一个文件。dart和家。dart写代码。
• 第 3 步：将liquid_swipe依赖项导入到主文件中。 dart文件使用以下代码：

import 'package:liquid_swipe/liquid_swipe.dart';

• 第 4 步：将依赖项添加到您的pubspec.yaml 文件中，如下所示：

添加依赖项：

liquid_swipe: ^1.5.0

从 Pub 获取包：

flutter packages get

• 第五步：在LiquidSwipe()方法中，我们需要添加 pages、 fullTransitionValue 、 waveType 、 positionSlideIcon 、 enableSlideIcon这些是 LiquidSwipe() 方法的属性，如下所示：

body:LiquidSwipe(
   pages: page,
 enableLoop: true,
 fullTransitionValue: 300,
 enableSlideIcon: true,
 waveType: WaveType.liquidReveal,
 positionSlideIcon: 0.5,
),

在主要。在 dart文件中，我们有一个 main()函数，它通过将任何小部件作为参数来调用runApp()来创建布局。我们有一个名为MyliquidSwipe()的家，它是一个有状态的类(可变类)，如下所示：

Dart

import 'package:flutter/material.dart';
import './liquid_swipe.dart';
  
  
void main() {
  runApp(
    MaterialApp(
        
          title: "My Ani",
           home: MyliquidSwipe(),
        ),
         
      );
      }

• 第 6 步：我们将在资产文件夹中添加图像。您可以在屏幕上添加您需要的所有图像。激活pubspec .yaml文件中的资产，如下所示：

assets:
 - assets/

完整的源代码：

Dart

import 'package:flutter/material.dart';
import 'package:liquid_swipe/liquid_swipe.dart';
class MyliquidSwipe extends StatelessWidget {
    
  final page = [
    Container( 
      color:Colors.brown,
      child: Padding(
        padding: const EdgeInsets.all(100.0),
        child: Center(
          child: Column(
            children:[
                 
             Text("Welcome To GeeksforGeeks",style:TextStyle(
              fontSize: 30,
              color:Colors.green[600],
              ),
              ),
            
            ]
          ),
        ),
      ),),
  Container(color:Colors.yellow[100],
  child: Padding(
    padding: const EdgeInsets.all(120.0),
    child: Center(
          child: Column(
            children:[
              Image.asset("assets/save.png"),
             Text("",style:TextStyle(
              fontSize: 20,
              color:Colors.green,
              ),
             )
            ] 
    ),),
  ),),
   
  Container(color: Colors.blue[100],
  child: Padding(
    padding: const EdgeInsets.all(100.0),
    child: Center(
          child: Column(
            children:[
              
             Text("   GeeksforGeeks  A Computer Science portal
                      for  geeks",
              style:TextStyle(
              fontSize:30 , 
              color:Colors.green[600],
              ),
              ),
    ]),),
  ))
            ];
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: LiquidSwipe(
       pages:page,
       enableSlideIcon: true,
       ),);
 }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！