Image Widget
-
- Image Widget简介
-
屏幕快照 2019-06-13 下午2.52.33.png
-
- 支持的图片格式
-
屏幕快照 2019-06-13 下午2.53.15.png
-
- 如何加载网络图片
-
屏幕快照 2019-06-13 下午2.54.36.png
-
- 如何加载静态图片, 以及处理不同分辨率的图片
-
声明图片路径
-
使用AssetImage / Image.asset访问图图片
-
- 如何加载本地图片
-
加载完整路径的本地图片
-
加载相对路径的本地图片
-
- 如何设置placeholder
为了设置Placeholder我们需要借助
FadeInImage
, 它能够从内存, 本地资源中加载placeholder-
从内存中加载placeholder
-
从本地资源中加载placeholder
-
- 如何配置图片缓存
-
屏幕快照 2019-06-13 下午3.25.32.png
-
- 如何加载Icon
-
Icon的使用
-
具体代码
-
自定义的Icon
Flutter : 动画
-
- 在Flutter中有哪些动画?
-
屏幕快照 2019-06-19 上午10.11.07.png
-
- 如何使用动画库中的基础类给widget添加动画?
-
屏幕快照 2019-06-19 上午10.12.16.png
-
Animation
-
CurvedAnimation
-
AnimationController
-
AnimationController注意事项
-
Tween
-
Tween.animate
-
- 为widget添加动画
- 代码示例
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; class AnimateDemoPage extends StatefulWidget { AnimateDemoPage({Key key}) : super(key: key); _AnimateDemoPageState createState() => _AnimateDemoPageState(); } class _AnimateDemoPageState extends State<AnimateDemoPage> with SingleTickerProviderStateMixin { Animation<double> animation; AnimationController controller; AnimationStatus animationState; double animationValue; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); animation = Tween<double>(begin: 0, end: 300).animate(controller) ..addListener(() { setState(() { animationValue = animation.value; }); }) ..addStatusListener((AnimationStatus status) { setState(() { animationState = status; }); }); } @override void dispose() { // TODO: implement dispose controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.only(top: 100), child: Column( children: <Widget>[ GestureDetector( onTap: (){ controller.reset(); controller.forward(); }, child: Text('Start', textDirection: TextDirection.ltr,), ), Text('State: ' + animationState.toString(), textDirection: TextDirection.ltr,), Text('Value: ' + animationValue.toString(), textDirection: TextDirection.ltr,), Container( height: animation.value, width: animation.value, color: Colors.red, child: Icon(Icons.fullscreen, color: Colors.blue,), ) ], ), ); } }
-
- 如何为动画提供监听器
-
屏幕快照 2019-06-19 上午10.31.14.png
-
- 用AnimatedWidget与AnimatedBuilder简化和重构我们对动画的使用
-
什么是AnimatedWidget?
- 代码示例
class AnimatedLogo extends AnimatedWidget { const AnimatedLogo({Key key, Animation<double> animation}) : super(key: key, listenable: animation); @override Widget build(BuildContext context) { final Animation<double> animation = listenable; return Center( child: Container( margin: new EdgeInsets.symmetric(vertical: 10.0), height: animation.value, width: animation.value, child: new Text('测试'), ), ); } } class LogoApp extends StatefulWidget { LogoApp({Key key}) : super(key: key); _LogoAppState createState() => _LogoAppState(); } class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin { Animation<double> animation; AnimationController controller; AnimationStatus animationState; double animationValue; @override void initState() { super.initState(); controller = new AnimationController(duration: const Duration(seconds: 2), vsync: this); animation = Tween<double>(begin: 0, end: 300).animate(controller) controller.forward(); } @override void dispose() { // TODO: implement dispose controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return AnimatedLogo(animation: animation,); } }
-
- AnimatedBuilder
-
AnimatedBuilder概述
-
AnimatedBuilder树状图
- 代码示例
class LogoApp extends StatefulWidget { LogoApp({Key key}) : super(key: key); _LogoAppState createState() => _LogoAppState(); } class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin { Animation<double> animation; AnimationController controller; AnimationStatus animationState; double animationValue; @override void initState() { super.initState(); controller = new AnimationController(duration: const Duration(seconds: 2), vsync: this); animation = Tween<double>(begin: 0, end: 300).animate(controller); controller.forward(); } @override void dispose() { // TODO: implement dispose controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return GrowTransition( childWidget: LogoWidget(), animation: animation, ); // return AnimatedLogo(animation: animation,); } } class LogoWidget extends StatelessWidget { const LogoWidget({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.symmetric(vertical: 10), child: Text('LogoWidget'), ); } } class GrowTransition extends StatelessWidget { const GrowTransition({this.animation, this.childWidget}); final Widget childWidget; final Animation<double> animation; @override Widget build(BuildContext context) { return Center( child: AnimatedBuilder( animation: animation, builder: (context, child) => Container( height: animation.value, width: animation.value, child: child, ), child: childWidget, ), ); } }
-
- Hero动画
-
Hero动画概述
- 代码示例
import 'package:flutter/material.dart'; class HeroAnimation extends StatelessWidget { const HeroAnimation({Key key}) : super(key: key); @override Widget build(BuildContext context) { double timeDilation = 10.0; return Scaffold( appBar: AppBar( title: Text('Basic Hero Animation'), ), body: Center( child: PhotoHero( photo: '', width: 300, ontap: () { Navigator.of(context) .push(MaterialPageRoute<void>(builder: (BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flippers Page'), ), body: Container( color: Colors.lightBlueAccent, padding: EdgeInsets.all(15.0), alignment: Alignment.topLeft, child: PhotoHero( photo: '', width: 300, ontap: () { Navigator.of(context).pop(); }), ), ); })); }, ), ), ); } } class PhotoHero extends StatelessWidget { final VoidCallback ontap; final double width; final String photo; const PhotoHero({Key key, this.photo, this.width, this.ontap}) : super(key: key); @override Widget build(BuildContext context) { return SizedBox( width: width, child: Hero( tag: photo, // 关联两个动画的标识 child: Material( color: Colors.transparent, child: InkWell( onTap: ontap, child: Image.network(photo, fit: BoxFit.contain), ), ), ), ); } }
Flutter的异步代码
-
- 如何编写异步的代码?
-
async/await & Isolate
-
async/await的使用
-
- 如何把工作放到后台线程执行?
-
async/await关键字
-
Isolate的使用方法
-
Isolate代码示例
-
Isolate代码示例
-
- 如何进行网络请求
-
http网络请求使用
-
- 如何为长时间运行的任务添加一个进度指示器?
-
ProgressIndicator的使用
-
代码示例 - 1
-
代码示例 - 2
手势检测 / 触摸事件处理
-
- 如何给Flutter的widget添加一个点击事件的监听?
-
第一种方法
-
第二种方法
-
- 如何处理widget上的其他手势?
-
屏幕快照 2019-06-25 上午10.50.36.png
主题和文字处理
-
- 如何在Text widget上设置自定义字体?
-
添加字体
-
使用字体
-
- 如何在Text上定义样式?
-
Text的属性
-
- 如何给App设置主题?
-
主题概述
-
代码示例
Flutter调试技巧
-
- 调试技巧概述:
-
Flutter调试技巧
网友评论