Image Widget

• 1. Image Widget簡介
  • 屏幕快照 2019-06-13 下午2.52.33.png
• 2. 支持的圖片格式
  • 屏幕快照 2019-06-13 下午2.53.15.png
• 3. 如何加載網(wǎng)絡(luò)圖片
  • 屏幕快照 2019-06-13 下午2.54.36.png

• 4. 如何加載靜態(tài)圖片, 以及處理不同分辨率的圖片
  • 聲明圖片路徑
  • 使用AssetImage / Image.asset訪問圖圖片
• 5. 如何加載本地圖片
  • 加載完整路徑的本地圖片
  • 加載相對(duì)路徑的本地圖片
• 6. 如何設(shè)置placeholder

  為了設(shè)置Placeholder我們需要借助FadeInImage, 它能夠從內(nèi)存, 本地資源中加載placeholder

  • 從內(nèi)存中加載placeholder
  • 從本地資源中加載placeholder
• 7. 如何配置圖片緩存
  • 屏幕快照 2019-06-13 下午3.25.32.png
• 8. 如何加載Icon
  • Icon的使用
  • 具體代碼
  • 自定義的Icon

Flutter : 動(dòng)畫

• 1. 在Flutter中有哪些動(dòng)畫?
  • 屏幕快照 2019-06-19 上午10.11.07.png
• 2. 如何使用動(dòng)畫庫中的基礎(chǔ)類給widget添加動(dòng)畫?
  • 屏幕快照 2019-06-19 上午10.12.16.png
  • Animation
  • CurvedAnimation
  • AnimationController
  • AnimationController注意事項(xiàng)
  • Tween
  • Tween.animate
• 5. 為widget添加動(dòng)畫
  • 代碼示例

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

• 6. 如何為動(dòng)畫提供監(jiān)聽器
  • 屏幕快照 2019-06-19 上午10.31.14.png
• 7. 用AnimatedWidget與AnimatedBuilder簡化和重構(gòu)我們對(duì)動(dòng)畫的使用
  • 什么是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,);
    }
  }
  

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

• 9. Hero動(dòng)畫
  • Hero動(dòng)畫概述
  • 代碼示例

  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, // 關(guān)聯(lián)兩個(gè)動(dòng)畫的標(biāo)識(shí)
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: ontap,
              child: Image.network(photo, fit: BoxFit.contain),
            ),
          ),
        ),
      );
    }
  }
  
  

Flutter的異步代碼

• 1. 如何編寫異步的代碼?
  • async/await & Isolate
  • async/await的使用
• 2. 如何把工作放到后臺(tái)線程執(zhí)行?
  • async/await關(guān)鍵字
  • Isolate的使用方法
  • Isolate代碼示例
  • Isolate代碼示例
• 3. 如何進(jìn)行網(wǎng)絡(luò)請(qǐng)求
  • http網(wǎng)絡(luò)請(qǐng)求使用
• 4. 如何為長時(shí)間運(yùn)行的任務(wù)添加一個(gè)進(jìn)度指示器?
  • ProgressIndicator的使用
  • 代碼示例 - 1
  • 代碼示例 - 2

手勢檢測 / 觸摸事件處理

• 1. 如何給Flutter的widget添加一個(gè)點(diǎn)擊事件的監(jiān)聽?
  • 第一種方法
  • 第二種方法
• 2. 如何處理widget上的其他手勢?
  • 屏幕快照 2019-06-25 上午10.50.36.png

主題和文字處理

• 1. 如何在Text widget上設(shè)置自定義字體?
  • 添加字體
  • 使用字體
• 2. 如何在Text上定義樣式?
  • Text的屬性
• 3. 如何給App設(shè)置主題?
  • 主題概述
  • 代碼示例

Flutter調(diào)試技巧

• 1. 調(diào)試技巧概述:
  • Flutter調(diào)試技巧