Flutter之环境配置与项目搭建

2019-11-19 来源: jackson影琪 发布在  https://www.cnblogs.com/jackson-yqj/p/11764720.html

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 ,打开后如图所示:

    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命令行运行如下命令来查看是否还需要安装其它依赖,如果需要,安装它们:

 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. 启动 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. 启动 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应用

 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,
     );
               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相关的配置选项。
http: ^0.12.0就是项目中需要使用外部包配置,使用如下命令即可下载:
 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;
   }

下一章->Flutter之网络请求

相关文章