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