百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

Flutter漂亮动画 Navigator跳转 菜鸟都能看懂的代码 建议收藏

bigegpt 2024-08-27 11:57 2 浏览

周末也不断更，是本头条的亮点，坚持365天都学习到头条，「技术刚刚好」能做到就是每天更新至少一篇Flutter文章，如果不想错误更新，你应该怎么做？你懂的。

本头条核心宗旨

欢迎来到「技术刚刚好」头条，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本文核心要点

今天「技术刚刚好」给大家带来一篇值得学习到文章，flutter动画实现，项目跳转到一些逻辑，有动画、有跳转、有ListView的学习，我相信大家应该能喜欢，如果喜欢我就动动手指关注我吧，谢谢大家到支持。

main.dart类的具体实现

//导入包
import 'package:flutter/material.dart';
import 'screens/homescreen.dart';

//启动类，每个类都有的
void main() => runApp(MyApp());

//一个StatelessWidget组件
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 //项目的标题
 title: 'Flutter Demo',
 //当为true时，在debug模式下显示右上角的debug字样的横幅，false即为不显示
 debugShowCheckedModeBanner: false,
 //主题样式
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 //首页页面
 home: new HomePage(),
 );
 }
}

homescreen.dart页面代码

//导入包
import 'package:flutter/material.dart';
import 'material_animation.dart';
import 'hero_animations.dart';
import 'package:flutter_screen_an/slide_animations/slide_animation.dart';


class HomePage extends StatefulWidget {
 @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text("屏幕动画学习"),
 ),
 body: ListView(
 children: <Widget>[
 ListTile(
 leading: Icon(Icons.ac_unit),
 title: Text("Hero动画学习"),
 onTap: () {
 Navigator.push(context,
 MaterialPageRoute(builder: (context) => HeroAnimation()));
 },
 ),
 ListTile(
 leading: Icon(Icons.ac_unit),
 title: Text("右到左动画"),
 onTap: () {
 Route r = SlideLeftAnimation(
 builder: (context) => MaterialAnimation(),
 );
 Navigator.push(context, r);
 },
 ),
 ListTile(
 leading: Icon(Icons.ac_unit),
 title: Text("左到右动画"),
 onTap: () {
 Route r = SlideRightAnimation(
 builder: (context) => MaterialAnimation(),
 );
 Navigator.push(context, r);
 },
 ),
 ListTile(
 leading: Icon(Icons.ac_unit),
 title: Text("从上到下动画"),
 onTap: () {
 Route r = SlideDownAnimation(
 builder: (context) => MaterialAnimation(),
 );
 Navigator.push(context, r);
 },
 ),
 ListTile(
 leading: Icon(Icons.ac_unit),
 title: Text("从下到上动画"),
 onTap: () {
 Route r = SlideUpAnimation(
 builder: (context) => MaterialAnimation(),
 );
 Navigator.push(context, r);
 },
 ),
 ListTile(
 leading: Icon(Icons.ac_unit),
 title: Text("持续时间（5秒）的动画"),
 onTap: () {
 Route r = SlideTimeAnimation(widget: MaterialAnimation());
 Navigator.push(context, r);
 },
 ),
 ListTile(
 leading: Icon(Icons.ac_unit),
 title: Text("弹跳动画"),
 onTap: () {
 Route r = BounceAnimation(widget: MaterialAnimation());
 Navigator.push(context, r);
 },
 )
 ],
 ),
 );
 }
}

slide_animation.dart具体到动画实现类

import 'package:flutter/material.dart';

//具体到动画实现页面
class SlideUpAnimation extends MaterialPageRoute {
 SlideUpAnimation({WidgetBuilder builder, RouteSettings routeSettings})
 : super(builder: builder, settings: routeSettings);

 @override
 Widget buildTransitions(BuildContext context, Animation<double> animation,
 Animation<double> secondaryAnimation, Widget child) {
 Animation<Offset> costum =
 Tween<Offset>(begin: Offset(0.0, 1.0), end: Offset(0.0, 0.0))
 .animate(animation);
 return SlideTransition(position: costum, child: child);
 }
}


//从上到下动画
class SlideDownAnimation extends MaterialPageRoute {
 SlideDownAnimation({WidgetBuilder builder, RouteSettings routeSettings})
 : super(builder: builder, settings: routeSettings);

 @override
 Widget buildTransitions(BuildContext context, Animation<double> animation,
 Animation<double> secondaryAnimation, Widget child) {
 Animation<Offset> costum =
 Tween<Offset>(begin: Offset(0.0, -1.0), end: Offset(0.0, 0.0))
 .animate(animation);
 return SlideTransition(position: costum, child: child);
 }
}

//右到左动画
class SlideLeftAnimation extends MaterialPageRoute {
 SlideLeftAnimation({WidgetBuilder builder, RouteSettings routeSettings})
 : super(builder: builder, settings: routeSettings);

 @override
 Widget buildTransitions(BuildContext context, Animation<double> animation,
 Animation<double> secondaryAnimation, Widget child) {
 Animation<Offset> costum =
 Tween<Offset>(begin: Offset(1.1, 0.0), end: Offset(0.0, 0.0))
 .animate(animation);
 return SlideTransition(position: costum, child: child);
 }
}

class SlideRightAnimation extends MaterialPageRoute {
 SlideRightAnimation({WidgetBuilder builder, RouteSettings routeSettings})
 : super(builder: builder, settings: routeSettings);

 @override
 Widget buildTransitions(BuildContext context, Animation<double> animation,
 Animation<double> secondaryAnimation, Widget child) {
 Animation<Offset> costum =
 Tween<Offset>(begin: Offset(-1.1, 0.0), end: Offset(0.0, 0.0))
 .animate(animation);
 return SlideTransition(position: costum, child: child);
 }
}

class SlideTimeAnimation extends PageRouteBuilder {
 Widget widget;

 SlideTimeAnimation({this.widget})
 : super(
 pageBuilder: (BuildContext context, Animation<double> animation,
 Animation<double> secondaryAnimation) {
 return widget;
 },
 transitionDuration: Duration(milliseconds:1000 ),
 transitionsBuilder: (BuildContext context,
 Animation<double> animation,
 Animation<double> secondaryAnimation,
 Widget widget) {
 Animation<Offset> costom =
 Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0))
 .animate(animation);
 return SlideTransition(position: costom, child: widget);
 });
}
class BounceAnimation extends PageRouteBuilder {
 Widget widget;

 BounceAnimation({this.widget})
 : super(
 pageBuilder: (BuildContext context, Animation<double> animation,
 Animation<double> secondaryAnimation) {
 return widget;
 },
 transitionDuration: Duration(milliseconds:2000 ),
 transitionsBuilder: (BuildContext context,
 Animation<double> animation,
 Animation<double> secondaryAnimation,
 Widget widget) {
 Animation<Offset> costom =
 Tween<Offset>(begin: Offset(1.0, 1.0), end: Offset(0.0, 0.0))
 .animate(CurvedAnimation(parent: animation, curve: Curves.bounceIn));
 return SlideTransition(position: costom, child: widget);
 });
}

hero_animations.dart动画类

import 'package:flutter/material.dart';
import 'hero_detail.dart';

class HeroAnimation extends StatelessWidget {
 Widget build(BuildContext context) {
 var timeDilation = 5.0; // 1.0 means normal animation speed.

 return Scaffold(
 appBar: AppBar(
 title: const Text('基本Hero动画'),
 ),
 body: Column(
 children: <Widget>[
 Padding(
 padding: const EdgeInsets.all(8.0),
 child: ListTile(
 title: Text("点击跳转进入详情页面"),
 onTap: () {
 Navigator.push(context,
 MaterialPageRoute(builder: (context) => HeroDetail()));
 },
 leading: Hero(
 tag: "asap",
 child: Image.network(
 "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT63fUqRPxwETd5YTf-l4_l828QPBOXvIBHR7m2Z7uczZGcVT6Q",
 width: 50,
 ),
 ),
 ),
 ),
 ],
 ),
 );
 }
}

hero_detail.dart 详情页面

import 'package:flutter/material.dart';

class HeroDetail extends StatefulWidget {
 @override
 HeroDetailState createState() {
 return new HeroDetailState();
 }
}

class HeroDetailState extends State<HeroDetail> {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: const Text('Asap HipHop'),
 ),
 body: Center(
 child: Column(
 crossAxisAlignment: CrossAxisAlignment.center,
 children: <Widget>[
 Padding(
 padding: const EdgeInsets.all(8.0),
 child: Hero(
 tag: "asap",
 child: Image.network(
 "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT63fUqRPxwETd5YTf-l4_l828QPBOXvIBHR7m2Z7uczZGcVT6Q"),
 ),
 ),
 Text(
 "技术刚刚好",
 style: TextStyle(
 fontSize: 25.0,
 fontWeight: FontWeight.bold,
 color: Colors.orangeAccent),
 ),
 Card(
 child: Padding(
 padding: const EdgeInsets.all(8.0),
 child: Text(
 "欢迎来到「技术刚刚好」头条，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。",
 style: TextStyle(fontSize: 18, color: Colors.grey),
 ),
 ),
 ),
 Padding(
 padding: EdgeInsets.all(8.0),
 ),
 Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Icon(Icons.favorite),
 Padding(
 padding: EdgeInsets.all(8.0),
 ),
 Icon(Icons.tablet_mac)
 ],
 )
 ],
 ),
 ),
 );
 }
}

总结

这篇文章还是很基础到知识，简单实用。学习了Flutter到ListView组件，看了以后就知道一个列表应该怎么写了，还有路由功能，就是页面跟页面之间到跳转方法。再就是一些简单到动画运用学习，好了周末了，也算是给大家到一篇周末福利。

谢谢观看技术刚刚好头条文章，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

相关推荐

【Docker 新手入门指南】第十章:Dockerfile

Dockerfile是Docker镜像构建的核心配置文件，通过预定义的指令集实现镜像的自动化构建。以下从核心概念、指令详解、最佳实践三方面展开说明，帮助你系统掌握Dockerfile的使用逻...

Windows下最简单的ESP8266_ROTS_ESP-IDF环境搭建与腾讯云SDK编译

前言其实也没啥可说的,只是我感觉ESP-IDF对新手来说很不友好,很容易踩坑,尤其是对业余DIY爱好者搭建环境非常困难,即使有官方文档,或者网上的其他文档,但是还是很容易踩坑,多研究,记住两点就行了,...

python虚拟环境迁移（python虚拟环境conda）

主机A的虚拟环境向主机B迁移。前提条件：主机A和主机B已经安装了virtualenv1.主机A操作如下虚拟环境目录：venv进入虚拟环境：sourcevenv/bin/active(1)记录虚拟环...

Python爬虫进阶教程(二):线程、协程

简介线程线程也叫轻量级进程，它是一个基本的CPU执行单元，也是程序执行过程中的最小单元，由线程ID、程序计数器、寄存器集合和堆栈共同组成。线程的引入减小了程序并发执行时的开销，提高了操作系统的并发性能...

基于网络安全的Docker逃逸（docker）

如何判断当前机器是否为Docker容器环境Metasploit中的checkcontainer模块、（判断是否为虚拟机，checkvm模块）搭配学习教程1.检查根目录下是否存在.dockerenv文...

Python编程语言被纳入浙江高考，小学生都开始学了

今年9月份开始的新学期，浙江省三到九年级信息技术课将同步替换新教材。其中，新初二将新增Python编程课程内容。新高一信息技术编程语言由VB替换为Python，大数据、人工智能、程序设计与算法按照教材...

CentOS 7下安装Python 3.10的完整过程

1.安装相应的编译工具yum-ygroupinstall"Developmenttools"yum-yinstallzlib-develbzip2-develope...

如何在Ubuntu 20.04上部署Odoo 14

Odoo是世界上最受欢迎的多合一商务软件。它提供了一系列业务应用程序，包括CRM，网站，电子商务，计费，会计，制造，仓库，项目管理，库存等等，所有这些都无缝集成在一起。Odoo可以通过几种不同的方式进...

Ubuntu 系统安装 PyTorch 全流程指南

当前环境：Ubuntu22.04，显卡为GeForceRTX3080Ti1、下载显卡驱动驱动网站：https://www.nvidia.com/en-us/drivers/根据自己的显卡型号和...

spark+python环境搭建（python 环境搭建）

最近项目需要用到spark大数据相关技术，周末有空spark环境搭起来...目标spark，python运行环境部署在linux服务器个人通过vscode开发通过远程python解释器执行代码准备...

centos7.9安装最新python-3.11.1（centos安装python环境）

centos7.9安装最新python-3.11.1centos7.9默认安装的是python-2.7.5版本，安全扫描时会有很多漏洞，比如：Python命令注入漏洞(CVE-2015-2010...

Linux系统下，五大步骤安装Python

一、下载Python包网上教程大多是通过官方地址进行下载Python的，但由于国内网络环境问题，会导致下载很慢，所以这里建议通过国内镜像进行下载例如：淘宝镜像http://npm.taobao.or...

centos7上安装python3（centos7安装python3.7.2一键脚本）

centos7上默认安装的是python2，要使用python3则需要自行下载源码编译安装。1.安装依赖yum-ygroupinstall"Developmenttools"...

利用本地数据通过微调方式训练 本地DeepSeek-R1 蒸馏模型

网络上相应的教程基本都基于LLaMA-Factory进行，本文章主要顺着相应的教程一步步实现大模型的微调和训练。训练环境：可自行定义，mac、linux或者window之类的均可以，本文以ma...

【法器篇】天啦噜，库崩了没备份（天啦噜是什么意思?）

背景数据库没有做备份，一天突然由于断电或其他原因导致无法启动了，且设置了innodb_force_recovery=6都无法启动，里面的数据怎么才能恢复出来？本例采用解析建表语句+表空间传输的方式进行...

一周热门
最近发表
标签列表