现在要给公司开发一个内部使用的APP，但是因为是小公司，没有多余的服务器资源，只能拿公司的主机当服务器，也只能在通过映射实现外网访问。所以呀，很蛋疼，只能想办法判断用户是在内网使用APP，还是在外网使用APP，然后根据环境选择URL请求的IP地址。
首先是新建一个dart文件，把Flutter应用和页面的架子搭起来，然后运行调试，确认应用可以正常跑起来。
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
);
}
}
虽然很容易发出网络请求，但使用原始的Future <http.Response>并不是很方便。所以，为了让我们的开发更轻松一些，我们可以将http.Response转换为我们自己的Dart对象。
首先，我们需要创建一个ComeBack类，其中包含来自网络请求的数据。它还将包含一个工厂构造函数，允许我们从json创建一个ComeBack。当然，手动转换JSON只是一种选择，还可以用JSON和序列化。
class ComeBack {
final int code;
final String msg;
final data;
ComeBack({
this.code,
this.msg,
this.data,
});
factory ComeBack.fromJson(Map<String, dynamic> json) {
return ComeBack(
code: json['code'],
msg: json['msg'],
data: json['data'],
);
}
}
给两个固定的内网/外网地址，再定义一个全局变量来承载实际的请求地址。
final String urlExtranet = 'http://218.15.158.64:8001/';
final String urlIntranet = 'http://192.168.9.247/';
String url = '';
http.get方法返回包含Response的Future，Future是用于处理异步操作的核心Dart类，它用于表示将来某个时间可用的潜在值或错误信息。http.Response类包含从成功的http调用接收的数据。
如果对内网IP（urlIntranet）的调用成功，则说明当前用户处于内网环境，那么接下来使用的都是内网IP。如果该调用不成功，则抛出错误，那么就立即切换为外网IP继续访问。
Future<ComeBack> fetchToken() async {
url = urlIntranet;
await http.get(url).catchError(
(error) {
url = urlExtranet;
}
);
final response = await http.post(
url + 'api/apirunner/auth/',
body: {'username': 'username', 'password': 'password'},
);
if (response.statusCode == 200) {
return ComeBack.fromJson(json.decode(response.body));
} else {
throw Exception('无法加载数据');
}
}
为了获取数据并将其显示在屏幕上，我们可以使用FutureBuilder组件， FutureBuilder组件附带Flutter，可以轻松使用异步数据源。
future参数表示我们希望使的Future，在我们的例子中，我们将调用我们的fetchToken()函数。
builder参数是一个构建器函数，它告诉Flutter要呈现什么，具体取决于Future的状态：加载中、请求成功或请求错误。
………
return new Scaffold(
body: FutureBuilder<ComeBack>(
future: fetchToken(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.data);
} else if (snapshot.hasError) {
return Center(
child: SizedBox(
height: 92.0,
child: Column(
children: <Widget>[
Icon(
Icons.sentiment_very_dissatisfied,
size: 32.0,
),
Text('${snapshot.error}'),
],
),
),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
),
);
………
如下，屏幕可以会出现三种状态：加载中状态、请求成功状态和请求错误状态，请求错误状态会显示错误信息。
