1、AnimatedOpacity
控制widget淡入或淡出效果
栗子是点击MaterialButton后,通过更新opacity变量,控制details的opacity;
import 'package:flutter/material.dart'; const owl_url = 'https://raw.githubusercontent.com/flutter/website/master/src/images/owl.jpg'; class FadeInDemo extends StatefulWidget { _FadeInDemoState createState() => _FadeInDemoState(); } class _FadeInDemoState extends State<FadeInDemo> { double opacity = 0.0; @override Widget build(BuildContext context) { return Column(children: <Widget>[ Image.network(owl_url), MaterialButton( child: Text( 'Show details', style: TextStyle(color: Colors.blueAccent), ), onPressed: () => setState(() { opacity = opacity == 1 ? 0.0 : 1; }), ), AnimatedOpacity( opacity: opacity, duration: Duration(seconds: 2), child: Column( children: <Widget>[ Text('Type: Owl'), Text('Age: 39'), Text('Employment: None'), ], ), ) ]); } } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: FadeInDemo(), ), ), ); } } void main() { runApp( MyApp(), ); }View Code
2、AnimatedContainer
控制widget的样式属性
栗子是通过点击changebutton使AnimatedContainer widget随即获取新的样式
import 'dart:math'; import 'package:flutter/material.dart'; double randomBorderRadius() { return Random().nextDouble() * 64; } double randomMargin() { return Random().nextDouble() * 64; } Color randomColor() { return Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF)); } const _duration = Duration(milliseconds: 1000); class AnimatedContainerDemo extends StatefulWidget { _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState(); } class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> { Color color; double borderRadius; double margin; @override initState() { super.initState(); color = randomColor(); borderRadius = randomBorderRadius(); margin = randomMargin(); } void change() { setState(() { color = randomColor(); borderRadius = randomBorderRadius(); margin = randomMargin(); }); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( children: <Widget>[ SizedBox( width: 128, height: 128, child: AnimatedContainer( margin: EdgeInsets.all(margin), duration: _duration, decoration: BoxDecoration( color: color, borderRadius: BorderRadius.circular(borderRadius), ), ), ), MaterialButton( color: Theme.of(context).primaryColor, child: Text( 'change', style: TextStyle(color: Colors.white), ), onPressed: () => change(), ), ], ), ), ); } } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: AnimatedContainerDemo(), ); } } void main() async { runApp( MyApp(), ); }View Code
3、FadeInImage
一般用于网络图片未加载完的placeholder与加载后的图片替换动画
栗子很简单,就是上面的描述
FadeInImage.assetNetwork( placeholder:'images/pic8.jpg',///本地图片 image:'http://pics.sc.chinaz.com/files/pic/pic9/201909/zzpic19910.jpg', )View Code
3、FadeInImage
原文地址:https://www.cnblogs.com/webcabana/p/12133198.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。