美文网首页
Flutter : 图片, 动画, 异步, 手势检测, 主题及文

Flutter : 图片, 动画, 异步, 手势检测, 主题及文

作者: 奋斗的老王 | 来源:发表于2019-06-25 10:56 被阅读0次

Image Widget

    1. Image Widget简介
    • 屏幕快照 2019-06-13 下午2.52.33.png
    1. 支持的图片格式
    • 屏幕快照 2019-06-13 下午2.53.15.png
    1. 如何加载网络图片
    • 屏幕快照 2019-06-13 下午2.54.36.png
    1. 如何加载静态图片, 以及处理不同分辨率的图片
    • 声明图片路径
    • 使用AssetImage / Image.asset访问图图片
    1. 如何加载本地图片
    • 加载完整路径的本地图片
    • 加载相对路径的本地图片
    1. 如何设置placeholder

    为了设置Placeholder我们需要借助FadeInImage, 它能够从内存, 本地资源中加载placeholder

    • 从内存中加载placeholder
    • 从本地资源中加载placeholder
    1. 如何配置图片缓存
    • 屏幕快照 2019-06-13 下午3.25.32.png
    1. 如何加载Icon
    • Icon的使用
    • 具体代码
    • 自定义的Icon

Flutter : 动画

    1. 在Flutter中有哪些动画?
    • 屏幕快照 2019-06-19 上午10.11.07.png
    1. 如何使用动画库中的基础类给widget添加动画?
    • 屏幕快照 2019-06-19 上午10.12.16.png
    • Animation
    • CurvedAnimation
    • AnimationController
    • AnimationController注意事项
    • Tween
    • Tween.animate
    1. 为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,),
              )
            ],
          ),
        );
      }
    }
    
    1. 如何为动画提供监听器
    • 屏幕快照 2019-06-19 上午10.31.14.png
    1. 用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,);
      }
    }
    
    1. 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,
          ),
        );
      }
    }
    
    1. 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的异步代码

    1. 如何编写异步的代码?
    • async/await & Isolate
    • async/await的使用
    1. 如何把工作放到后台线程执行?
    • async/await关键字
    • Isolate的使用方法
    • Isolate代码示例
    • Isolate代码示例
    1. 如何进行网络请求
    • http网络请求使用
    1. 如何为长时间运行的任务添加一个进度指示器?
    • ProgressIndicator的使用
    • 代码示例 - 1
    • 代码示例 - 2

手势检测 / 触摸事件处理

    1. 如何给Flutter的widget添加一个点击事件的监听?
    • 第一种方法
    • 第二种方法
    1. 如何处理widget上的其他手势?
    • 屏幕快照 2019-06-25 上午10.50.36.png

主题和文字处理

    1. 如何在Text widget上设置自定义字体?
    • 添加字体
    • 使用字体
    1. 如何在Text上定义样式?
    • Text的属性
    1. 如何给App设置主题?
    • 主题概述
    • 代码示例

Flutter调试技巧

    1. 调试技巧概述:
    • Flutter调试技巧

相关文章

网友评论

      本文标题:Flutter : 图片, 动画, 异步, 手势检测, 主题及文

      本文链接:https://www.haomeiwen.com/subject/fdlsfctx.html