Flutter 中使用流行的 http 包 进行网络请求是很简单的。
虽然 http 包没有 OkHttp 中的所有功能,但是它抽象了很多通常你会自己实现的网络功能,这使其本身在执行网络请求时简单易用。
如果要使用 http 包,需要在 pubspec.yaml 文件中添加依赖:
如果要发起一个网络请求,在异步 (async) 方法 http.get() 上调用 await 即可:
如何为耗时任务显示进度?
在 Android 中你通常会在后台执行一个耗时任务的时候显示一个 ProgressBar 在界面上。
在 Flutter 中,我们使用 ProgressIndicator Widget。通过代码逻辑使用一个布尔标记值控制进度条的渲染。
在下面的例子中,build 方法被拆分成三个不同的方法。如果 showLoadingDialog() 返回 true(当 widgets.length == 0),渲染 ProgressIndicator。否则,在 ListView 里渲染网络请求返回的数据。
content_copy
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() { runApp(SampleApp()); } class SampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Sample App', theme: ThemeData( primarySwatch: Colors.blue, ), home: SampleAppPage(), ); } } class SampleAppPage extends StatefulWidget { SampleAppPage({Key key}) : super(key: key); @override _SampleAppPageState createState() => _SampleAppPageState(); } class _SampleAppPageState extends State<SampleAppPage> { List widgets = []; @override void initState() { super.initState(); loadData(); } showLoadingDialog() { return widgets.length == 0; } getBody() { if (showLoadingDialog()) { return getProgressDialog(); } else { return getListView(); } } getProgressDialog() { return Center(child: CircularProgressIndicator()); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Sample App"), ), body: getBody()); } ListView getListView() => ListView.builder( itemCount: widgets.length, itemBuilder: (BuildContext context, int position) { return getRow(position); }); Widget getRow(int i) { return Padding(padding: EdgeInsets.all(10.0), child: Text("Row ${widgets[i]["title"]}")); } loadData() async { String dataURL = "https://jsonplaceholder.typicode.com/posts"; http.Response response = await http.get(dataURL); setState(() { widgets = json.decode(response.body); }); } }
以上算是Flutter 当中请求网络,然后添加加载进度框的方法,码子不易,如果你也在学习Flutter,可以点赞、关注、收藏我,后续一直写Flutter相关的文章
本文暂时没有评论,来添加一个吧(●'◡'●)