📜  Flutter – 液体滑动动画

📅  最后修改于: 2021-09-23 06:39:37             🧑  作者: Mango

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、 fullTransitionValuewaveTypepositionSlideIconenableSlideIcon这些是 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(),
        ),
         
      );
      }


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


  • 第 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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!