Flutter ios 启动图片 flutter加载gif图片

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

import ‘package:flutter/material.dart’;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget 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 AnimatedOpacity
 child: 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 {
 @override
 Widget 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 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 {
 // Whether the green box should be visible or invisible
 bool _visible = true;@override
 Widget 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 AnimatedOpacity
 child: 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.
 );
 }
 }