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 { 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相关的文章