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