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

2019-06-25 本文已影响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

为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

用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),
          ),
        ),
      ),
    );
  }
}