Flutter代码锦囊---根据环境选择URL地址

现在要给公司开发一个内部使用的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 {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',home: MyHomePage(),);}
}class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget 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(),);},),);………

如下，屏幕可以会出现三种状态：加载中状态、请求成功状态和请求错误状态，请求错误状态会显示错误信息。

Flutter代码锦囊---根据环境选择URL地址相关推荐

php获取当前页面地址代码,PHP获取当前页面URL地址程序代码
在php中要获取当前页面url地址方法很简单,下面我来给大家总结一下利用相关函数获取完整页面url地址的实例. PHP的预定义变量$_SERVER是一个包含头部(headers),路径信息及脚本位置的 ...
Flutter代码锦囊---摇一摇
现在很多APP里面的会出现让用户拿起手机摇一摇的场景,除了最常见的微信.QQ等社交APP里面的摇一摇,我们在把APP给测试人员测试的时候,也经常要添加上摇一摇弹窗切换环境的场景,比如下面的场景. 所以 ...
Flutter代码锦囊---魔改进度条
Flutter框架提供了Material Design风格的线性进度条(LinearProgressIndicator)组件,就是下面的样子,方方正正的,一点也不圆润. 但是很多APP的设计都按照Ma ...
Flutter代码锦囊---切换时页面保持状态
一个正常的Flutter项目中,通过底部导航栏(BottomNavigationBar)或者标签栏(TabBar)组件来切换页面内容,是很正常的操作.但是大家是否有发现,每次导航栏或标签栏切换页面时, ...
几行代码实现Android 地图选择，地址选择，坐标选择
效果图准备工作先在腾讯地图控制台里注册一个app,替换下面的参数主要代码布局 <?xml version="1.0" encoding="utf-8&quo ...
Flutter代码锦囊---淘口令复制弹窗
对于淘系电商APP或其他类似的APP而言,获取剪贴板上的淘口令,再解析出具体的商品详情,是整个APP的核心业务操作,就像下面图片展示的这样. 下面我们就用Flutter实现这个功能,首先是前面一部分导 ...
Flutter代码锦囊---自定义曲线裁剪
在实际开发中,很多APP里面都会有一些布局需要用到曲线,而不是直线,下面举两个例子,一个是京东APP的页面,一个是淘宝APP的页面,它们都用到了曲线. 在Flutter中可以怎么实现这个效果呢,有一个 ...
Flutter代码锦囊---集中管理路由与导航
当一个Flutter项目的页面多来以后,页面跳来跳去的,开发者自己都会晕,所以需要用一个集中.灵活的方式去管理项目中所有页面的路由与导航. 通常我们是使用主页(home)属性设置应用程序的默认路由,即 ...
Lync Server多SIP域环境和简单URL地址部署
在前面的文章中我们提到一种情况,那就是我们ADDS域与我们外部实际的域名不同的情况,在这种情况我们的SIP域该如何部署才能够让组织中的用户获得较好的体验呢?比如我们的公司组织遍及全球,或者说是全国.每 ...

Flutter代码锦囊---根据环境选择URL地址

Flutter代码锦囊---根据环境选择URL地址相关推荐

最新文章

热门文章