Flutter之环境配置与项目搭建
一,介绍
1.1,Dart
Dart 是一种 易于学习、 易于扩展、并且可以部署到 任何地方 的 应用 编程 语言。并且同时借鉴了Java和JavaScript。Dart在静态语法方面和Java非常相似，如类型定义、函数声明、泛型等，而在动态特性方面又和JavaScript很像，如函数式特性、异步支持等。
1.2,Flutter
Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图。
二,开发环境配置
2.1,安装Flutter
第一步:配置镜像
由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
如下图所示：
第二步:获取Flutter SDK
去flutter官网下载其最新可用的安装包，下载地址：https://flutter.dev/docs/development/tools/sdk/releases ，打开后如图所示：
将安装包zip解压到你想安装Flutter SDK的路径（如：D
:\flutter；注意，不要将flutter安装到需要一些高权限的路径如C:\Program Files\）。在Flutter安装目录的
flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。
第三步:配置环境变量
如果不配置环境变量,在全局环境中是无法使用flutter命令的,转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”，在Path下添加D:\flutter\bin条目,保存即可。
第四步:运行 flutter doctor命令
在Flutter命令行运行如下命令来查看是否还需要安装其它依赖，如果需要，安装它们：
flutter doctor
该命令检查你的环境并在命令行窗口中显示报告。Dart SDK已经在打包在Flutter SDK里了，没有必要单独安装Dart。安装完成后再运行flutter doctor命令来验证是否安装成功。
2.2,windows与mac本配置（模拟器）
windows下sdk与jdk配置，可参考React-Native windows环境搭建记录
mac本下sdk与jdk配置，可参考React Naive之macOs环境配置记录(iOS Android)
2.3,编辑器配置
常用编辑器是VS Code,故此这儿主要介绍VS Code的配置，VS Code支持Flutter运行和调试。
安装flutter插件
-
- 启动 VS Code。
- 调用 View>Command Palette…。
- 输入 ‘install’, 然后选择 Extensions: Install Extension action。
- 在搜索框输入
flutter，在搜索结果列表中选择 ‘Flutter’, 然后点击 Install。 - 选择 ‘OK’ 重新启动 VS Code。
- 验证配置
- 调用 View>Command Palette…
- 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action。
- 查看“OUTPUT”窗口中的输出是否有问题
创建Flutter应用
- 启动 VS Code
- 调用 View>Command Palette…
- 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
- 输入 Project 名称 (如
myapp), 然后按回车键 - 指定放置项目的位置，然后按蓝色的确定按钮
- 等待项目创建继续，并显示main.dart文件
VS Code格式化dart代码的快捷方式是shift+alt+f
三,项目搭建
第一步:创建Flutter应用
flutter create yingqi_flutter
第二步:底部tab
Flutter中的路由管理和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。
final result =
await Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return LoginPage();
}));
Navigator.pop(context, "refresh");
class AppHomeState extends State<AppHome> {
final appBarTitles = ['首页', '资讯', '产品', '我的'];
...
int _tabIndex = 0;
var tabImages;
var _body;
var pages;
Image getTabImage(path) {
return Image.asset(path, width: 20.0, height: 20.0);
}
@override
void initState() {
super.initState();
...
});
pages = <Widget>[HomePage(), NewsPage(), ProductPage(), MyPage()];
if (tabImages == null) {
tabImages = [
[
getTabImage('images/ic_nav_news_normal.png'),
getTabImage('images/ic_nav_news_actived.png')
],
[
getTabImage('images/ic_nav_tweet_normal.png'),
getTabImage('images/ic_nav_tweet_actived.png')
],
[
getTabImage('images/ic_nav_discover_normal.png'),
getTabImage('images/ic_nav_discover_actived.png')
],
[
getTabImage('images/ic_nav_my_normal.png'),
getTabImage('images/ic_nav_my_pressed.png')
]
];
}
}
TextStyle getTabTextStyle(int curIndex) {
if (curIndex == _tabIndex) {
return tabTextStyleSelected;
}
return tabTextStyleNormal;
}
Image getTabIcon(int curIndex) {
if (curIndex == _tabIndex) {
return tabImages[curIndex][1];
}
return tabImages[curIndex][0];
}
Text getTabTitle(int curIndex) {
return Text(appBarTitles[curIndex], style: getTabTextStyle(curIndex));
}
@override
Widget build(BuildContext context) {
_body = IndexedStack(
children: pages,
index: _tabIndex,
);
return MaterialApp( home: Scaffold( body: _body,
bottomNavigationBar: CupertinoTabBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: getTabIcon(0),
title: getTabTitle(0)),
BottomNavigationBarItem(
icon: getTabIcon(1),
title: getTabTitle(1)),
BottomNavigationBarItem(
icon: getTabIcon(2),
title: getTabTitle(2)),
BottomNavigationBarItem(
icon: getTabIcon(3),
title: getTabTitle(3)),
],
currentIndex: _tabIndex,
onTap: (index) {
setState((){
_tabIndex = index;
});
},
),
),
);
}
}
第三步:包管理与资源配置
Flutter项目默认的配置文件是pubspec.yaml,包与资源配置,均修改此文件
包配置如下图所示:
-
dependencies：应用或包依赖的其它包或插件。 -
flutter：flutter相关的配置选项。
-
flutter packages get
资源配置如下图所示:
需要使用什么资源,以图片中的格式在assets下继续添加即可。
第四步:数据缓存
1,在pubspec.yaml文件中，添加如下包:
shared_preferences: ^0.4.3
2,数据记录类
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:async'; class DataUtils { ... }
3,用户登录信息操作
static const String SP_USER_NAME = "name";
static const String SP_USER_ID = "userId";
static const String SP_IS_LOGIN = "isLogin"; // 保存用户登录信息，data中包含了token等信息
static saveLoginInfo(Map data) async {
if (data != null) {
SharedPreferences sp = await SharedPreferences.getInstance();
String userId = data['UserId'];
await sp.setString(SP_USER_ID, userId);
String name = data['Name'];
await sp.setString(SP_USER_NAME, name);
await sp.setBool(SP_IS_LOGIN, true);
}
} // 清除登录信息
static clearLoginInfo() async {
SharedPreferences sp = await SharedPreferences.getInstance();
await sp.setString(SP_USER_ID, "");
await sp.setString(SP_USER_NAME, "");
await sp.setBool(SP_IS_LOGIN, false);
} // 获取用户登录信息
static Future<LoginInfo> getLoginInfo() async {
SharedPreferences sp = await SharedPreferences.getInstance();
bool isLogin = sp.getBool(SP_IS_LOGIN);
if (isLogin == null || !isLogin) {
return null;
}
LoginInfo loginInfo = LoginInfo();
loginInfo.userId = sp.getString(SP_USER_ID);
loginInfo.name = sp.getString(SP_USER_NAME);
return loginInfo;
}