Flutter之環境配置與項目搭建

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官方爲中國開發者搭建了臨時鏡像，你們能夠將以下環境變量加入到用戶環境變量中：

1 export PUB_HOSTED_URL=https://pub.flutter-io.cn
2 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

以下圖所示：

第二步:獲取Flutter SDK

去flutter官網下載其最新可用的安裝包，下載地址：https://flutter.dev/docs/development/tools/sdk/releases ，打開後如圖所示：

1. 1. 將安裝包zip解壓到你想安裝Flutter SDK的路徑（如：D:\flutter；注意，不要將flutter安裝到須要一些高權限的路徑如C:\Program Files\）。

   2. 在Flutter安裝目錄的flutter文件下找到flutter_console.bat，雙擊運行並啓動flutter命令行，接下來，你就能夠在Flutter命令行運行flutter命令了。

第三步:配置環境變量

若是不配置環境變量,在全局環境中是沒法使用flutter命令的,轉到 「控制面板>用戶賬戶>用戶賬戶>更改個人環境變量」，在Path下添加D:\flutter\bin條目,保存便可。

第四步:運行 flutter doctor命令

在Flutter命令行運行以下命令來查看是否還須要安裝其它依賴，若是須要，安裝它們：

1 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插件

1. 1. 啓動 VS Code。
   2. 調用 View>Command Palette…。
   3. 輸入 ‘install’, 而後選擇 Extensions: Install Extension action。
   4. 在搜索框輸入 flutter ，在搜索結果列表中選擇 ‘Flutter’, 而後點擊 Install。
   5. 選擇 ‘OK’ 從新啓動 VS Code。
   6. 驗證配置
   • • 調用 View>Command Palette…
     • 輸入 ‘doctor’, 而後選擇 ‘Flutter: Run Flutter Doctor’ action。
     • 查看「OUTPUT」窗口中的輸出是否有問題

建立Flutter應用

1. 1. 啓動 VS Code
   2. 調用 View>Command Palette…
   3. 輸入 ‘flutter’, 而後選擇 ‘Flutter: New Project’ action
   4. 輸入 Project 名稱 (如myapp), 而後按回車鍵
   5. 指定放置項目的位置，而後按藍色的肯定按鈕
   6. 等待項目建立繼續，並顯示main.dart文件

VS Code格式化dart代碼的快捷方式是shift+alt+f

三,項目搭建

第一步:建立Flutter應用

1 flutter create yingqi_flutter

 第二步:底部tab

 Flutter中的路由管理和原生開發相似，不管是Android仍是iOS，導航管理都會維護一個路由棧，路由入棧(push)操做對應打開一個新頁面，路由出棧(pop)操做對應頁面關閉操做，而路由管理主要是指如何來管理路由棧。

1  final result =
2         await Navigator.of(context).push(MaterialPageRoute(builder: (context) {
3       return LoginPage();
4     }));

1  Navigator.pop(context, "refresh");

  1 class AppHomeState extends State<AppHome> {
  2   final appBarTitles = ['首頁', '資訊', '產品', '個人'];
  3  
  4   ... 
  5 
  6   int _tabIndex = 0;
  7 
  8   var tabImages;
  9   var _body;
 10   var pages;
 11 
 12   Image getTabImage(path) {
 13     return Image.asset(path, width: 20.0, height: 20.0);
 14   }
 15 
 16   @override
 17   void initState() {
 18     super.initState();
 19 
 20    ...
 21 
 22     });
 23     pages = <Widget>[HomePage(), NewsPage(), ProductPage(), MyPage()];
 24     if (tabImages == null) {
 25       tabImages = [
 26         [
 27           getTabImage('images/ic_nav_news_normal.png'),
 28           getTabImage('images/ic_nav_news_actived.png')
 29         ],
 30         [
 31           getTabImage('images/ic_nav_tweet_normal.png'),
 32           getTabImage('images/ic_nav_tweet_actived.png')
 33         ],
 34         [
 35           getTabImage('images/ic_nav_discover_normal.png'),
 36           getTabImage('images/ic_nav_discover_actived.png')
 37         ],
 38         [
 39           getTabImage('images/ic_nav_my_normal.png'),
 40           getTabImage('images/ic_nav_my_pressed.png')
 41         ]
 42       ];
 43     }
 44   }
 45 
 46   TextStyle getTabTextStyle(int curIndex) {
 47     if (curIndex == _tabIndex) {
 48       return tabTextStyleSelected;
 49     }
 50     return tabTextStyleNormal;
 51   }
 52 
 53   Image getTabIcon(int curIndex) {
 54     if (curIndex == _tabIndex) {
 55       return tabImages[curIndex][1];
 56     }
 57     return tabImages[curIndex][0];
 58   }
 59 
 60   Text getTabTitle(int curIndex) {
 61     return Text(appBarTitles[curIndex], style: getTabTextStyle(curIndex));
 62   }
 63 
 64   @override
 65   Widget build(BuildContext context) {
 66     _body = IndexedStack(
 67       children: pages,
 68       index: _tabIndex,
 69     );
 70     return MaterialApp( 74       home: Scaffold( 80         body: _body,
 81         bottomNavigationBar: CupertinoTabBar(
 82           items: <BottomNavigationBarItem>[
 83             BottomNavigationBarItem(
 84                 icon: getTabIcon(0),
 85                 title: getTabTitle(0)),
 86             BottomNavigationBarItem(
 87                 icon: getTabIcon(1),
 88                 title: getTabTitle(1)),
 89             BottomNavigationBarItem(
 90                 icon: getTabIcon(2),
 91                 title: getTabTitle(2)),
 92             BottomNavigationBarItem(
 93                 icon: getTabIcon(3),
 94                 title: getTabTitle(3)),
 95           ],
 96           currentIndex: _tabIndex,
 97           onTap: (index) {
 98             setState((){
 99               _tabIndex = index;
100             });
101           },
102         ),
103       ),
104     );
105   }
106 }

 第三步:包管理與資源配置

Flutter項目默認的配置文件是pubspec.yaml,包與資源配置,均修改此文件

包配置以下圖所示:

• • dependencies：應用或包依賴的其它包或插件。
  • flutter：flutter相關的配置選項。

http: ^0.12.0就是項目中須要使用外部包配置,使用以下命令便可下載:

1 flutter packages get

資源配置以下圖所示:

 

 須要使用什麼資源,以圖片中的格式在assets下繼續添加便可。

 第四步:數據緩存

1,在pubspec.yaml文件中，添加以下包:

1   shared_preferences: ^0.4.3

2,數據記錄類

1 import 'package:shared_preferences/shared_preferences.dart';
2 import 'dart:async';
3 
4 class DataUtils {
5 
6 ...
7 
8 }

3,用戶登陸信息操做

 1   static const String SP_USER_NAME = "name";
 2   static const String SP_USER_ID = "userId";
 3   static const String SP_IS_LOGIN = "isLogin";
 4 
 5   // 保存用戶登陸信息，data中包含了token等信息
 6   static saveLoginInfo(Map data) async {
 7     if (data != null) {
 8       SharedPreferences sp = await SharedPreferences.getInstance();
 9       String userId = data['UserId'];
10       await sp.setString(SP_USER_ID, userId);
11       String name = data['Name'];
12       await sp.setString(SP_USER_NAME, name);
13       await sp.setBool(SP_IS_LOGIN, true);
14     }
15   }
16 
17   // 清除登陸信息
18   static clearLoginInfo() async {
19     SharedPreferences sp = await SharedPreferences.getInstance();
20     await sp.setString(SP_USER_ID, "");
21     await sp.setString(SP_USER_NAME, "");
22     await sp.setBool(SP_IS_LOGIN, false);
23   }
24 
25  // 獲取用戶登陸信息
26   static Future<LoginInfo> getLoginInfo() async {
27      SharedPreferences sp = await SharedPreferences.getInstance();
28     bool isLogin = sp.getBool(SP_IS_LOGIN);
29     if (isLogin == null || !isLogin) {
30       return null;
31     }
32     LoginInfo loginInfo = LoginInfo();
33     loginInfo.userId = sp.getString(SP_USER_ID);
34     loginInfo.name = sp.getString(SP_USER_NAME);
35     return loginInfo;
36   }

 下一章->Flutter之網絡請求