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调试技巧
网友评论