Flutter- 系列（四）基础 UI 实践，从外包月薪 5K 到阿里月薪 15K

Scaffold.of(context).showSnackBar(snackBar);}

###二.从网络加载图片在 Flutter 中直接使用 Image.network 就可以加载图片了

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var title = 'Web Images';

return MaterialApp(title: title,home: Scaffold(appBar: AppBar(title: Text(title),),body: Image.network('https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',),),);}}

该方法还可以直接加载 GIF 图片

Image.network('https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',);

通过 placeholder 属性可以增加一个占位图：

FadeInImage.assetNetwork(placeholder: 'assets/loading.gif',image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',);

值得注意的是用 Image.network 加载的图片并没有缓存，如果想加载图片并缓存，需要使用：

CachedNetworkImage(placeholder: CircularProgressIndicator(),imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',);

如果对 Flutter 的图片缓存策略感兴趣，请继续关注本专栏，之后的文章中我会分享给大家

###三.动画本段只简单的介绍动画入门，之后有文章会详细介绍 Flutter 动画。上篇文章说到过在 Flutter 中所有的东西都是 Widget，包括动画也不例外，如果你想让某个 Widget 包含动画属性，那么你需要用 AnimatedOpacity 将其包裹起来，AnimatedOpacity 也是一个 Widget。

AnimatedOpacity(// If the Widget should be visible, animate to 1.0 (fully visible). If// the Widget should be hidden, animate to 0.0 (invisible).opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 500),// The green box needs to be the child of the AnimatedOpacitychild: Container(width: 200.0,height: 200.0,color: Colors.green,),);

我们使用一个 StatefulWidget 来调用 setState()方法刷新_visible 的值，就能显示动画了,是不是很简单？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {final appTitle = 'Opacity Demo';return MaterialApp(title: appTitle,home: MyHomePage(title: appTitle),);}}

// The StatefulWidget's job is to take in some data and create a State class.// In

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

this case, our Widget takes in a title, and creates a _MyHomePageState.class MyHomePage extends StatefulWidget {final String title;

MyHomePage({Key key, this.title}) : super(key: key);

@override_MyHomePageState createState() => _MyHomePageState();}

// The State class is responsible for two things: holding some data we can// update and building the UI using that data.class _MyHomePageState extends State<MyHomePage> {// Whether the green box should be visible or invisiblebool _visible = true;

@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: AnimatedOpacity(// If the Widget should be visible, animate to 1.0 (fully visible). If// the Widget should be hidden, animate to 0.0 (invisible).opacity: _visible ? 1.0 : 0.0,duration: Duration(milliseconds: 500),// The green box needs to be the child of the AnimatedOpacitychild: Container(width: 200.0,height: 200.0,color: Colors.green,),),),floatingActionButton: FloatingActionButton(onPressed: () {// Make sure we call setState! This will tell Flutter to rebuild the// UI with our changes!setState(() {_visible = !_visible;});},tooltip: 'Toggle Opacity',child: Icon(Icons.flip),), // This trailing comma makes auto-formatting nicer for build methods.);}}