child: new Container(),
);
技巧4:实现页面异步加载
============
Flutter 可以通过 `FutureBuilder` 或者 `StreamBuilder` 简单实现页面的异步加载。
FutureBuilder 和 StreamBuilder 是通过 Future 和 Stream 获取数据后实现页面布局。如下代码所示:
import ‘package:flutter/material.dart’;
class Test extends StatelessWidget {
const Test({Key key}) : super(key: key);
Future mockNetworkData() async {
await Future.delayed(Duration(seconds: 3));
return "success";
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Scaffold(
body: Center(
child: FutureBuilder<String>(
future: mockNetworkData(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
// 根据结果返回不同页面
switch (snapshot.connectionState) {
case ConnectionState.none:
return Text('start...');
case ConnectionState.active:
case ConnectionState.waiting:
return SizedBox(
width: 60,
height: 60,
child: CircularProgressIndicator(
valueColor:
new AlwaysStoppedAnimation(Color(0xff000000))),
);
case ConnectionState.done:
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
return Text('Result: ${snapshot.data}');
}
return null; // unreachable
},
),
),
),
);
}
}
这里分享一部B站的视频,里面详细讲述了Flutter2.0的一些用法:[https://www.bilibili.com/video/BV1DK4y197uk/](
)
更多关于Flutter2.0的学习文档可以[点击这里免费获得](
)
---------------------------------------------------------------------------
Flutter学习进阶
-----------
2021 年无疑是 Flutter 技术如火如荼发展的一年。
每一个移动开发者都在为 Flutter 带来的“快速开发、富有表现力和灵活的 UI、原生性能”的特色和理念而痴狂,从超级 App 到独立应用,从纯 Flutter 到混合栈,开发者们在不同的场景下乐此不疲的探索和应用着 Flutter 技术,也在面临着各种各样不同的挑战。
**知识要点:**
1、Flutter跨平台开发概述
2、Windows中Flutter开发环境搭建
3、编写你的第一个Flutter APP
4、Flutter Dart语言系统入门
…
![](https://img-blog.csdnimg.cn/img_convert/c994bd0aad40988cd9f952f38c25da55.png)
以上资料全部免费赠送,[点击这里免费下载!!!](
)
--------------------------------------------------------------------