Flutter环境搭建和创建第一个Flutter程序

2022-01-10 12:01:54 浏览数 (1)

什么是Flutter

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

优点

  • 号称是可以一次开发Android和iOS的原生级别的应用，热重新加载 ，表现灵活的用户界面 ，
  • 使用Dart语言编写一套代码即可同时在Android和iOS平台运行，性能无限接近原生，支持android 4.1以上 和 iOS8以上，一般都没有听过Dart 这个语言是什么鬼，但是啊，不要紧张，dart的语言可以说就是Java的语法，so,对于我们Android开发者来说就很容易接受
  • flutter 里面调用了Java和kotlin的类库 ，当然还有swift ，不用开发者在配置一遍
  • 并且flutter的正式版可以实现跨平台
  • -在现有的开发工具中完全支持开发，Dart语言优越性，使得同样的功能只需要很少的代码。 迭代更加方便， hot reload 功能

我们Android开发者直接可以使用Android studio进行开发 很简单

Flutter架构

Flutter 分为两个部分，上层是函数响应式的Framework（开源），下层是Engine，可以这样理解，基于Framework开发App，在Engine里运行。

安装Flutter

环境：Mac 开发工具：Android studio 3.0

  • 安装Flutter 1、下载Flutter源码 （官方建议下载beta分支）
代码语言：javascript复制
git clone -b beta https://github.com/flutter/flutter.git

2、代码下载之后在终端中打开bash_profile文件 进行配置，当该文件存在时，打开并编辑该文件 open -e .bash_profile

代码语言：javascript复制
export PATH=$PATH:XXX/flutter/bin   或者(效果是一样的)
export PATH="XXX/flutter/bin:$PATH"

更新刚配置的环境变量，命令如下： source .bash_profile 如下图

3 、然后输入flutter 进行测试。没有出现commond not found 即是配置成功。然后验证PATH是否包含了flutter

4、执行命令flutter doctor ，命令的作用是检测还需要安装的依赖。

代码语言：javascript复制
wangweideMac:~ wangwei$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.6.0, on Mac OS X 10.12.6 16G1510, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
 ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✗] iOS toolchain - develop for iOS devices
 ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
   Download at: https://developer.apple.com/xcode/download/
   Or install Xcode via the App Store.
   Once installed, run:
     sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
 ✗ Brew not installed; use this to install tools for iOS device development.
   Download brew at https://brew.sh/.
[✓] Android Studio (version 3.0)
[✓] Connected devices (1 available)

! Doctor found issues in 2 categories.
wangweideMac:~ wangwei$

证明就安装成功了 如果第二项 android toolchan...... 哪里出错 ,需要按照提示下载新的sdk，本人在安装过程就遇到此坑，

配置Android Studio

下载插件flutter ，在下载的过程中会自动下载dart 在Android Studio 中添加Dart和Flutter两个插件，其中dart用于代码的分析，flutter用于工程的编译。

配置flutter会自动一起下载Dart插件

创建第一个Flutter Demo

  • androidStudio创建 打开 Android Studio 新建一个Flutter项目 点击new –> new Flutter project –> Flutter Application –> 选择Flutter SDK（刚才下载的） –> finish 创建完成
  • 终端创建 最简单的命令即可。注意 flutter 建议使用使用这样命名方式。新建工程，工程名不能含大写字母，这与Android Stuidio不同。
代码语言：javascript复制
flutter create myflutterapp
cd myflutterapp
flutter run

Creating Flutter Project这个界面可能会卡一会。 后面可能会遇到： Running "flutter packages get" in try_flutter_app...

这个时候可以考虑使用国内的镜象。下面是我们的环境变量配置:

代码语言：javascript复制
export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

设置好镜象之后可以运行其他命令如 flutter run 或者 flutter packages get

如下代码 是一次成功运行的过程

代码语言：javascript复制
I/SurfaceView( 6339): updateWindow -- OnPreDrawListener, mHaveFrame = true, this = io.flutter.view.FlutterView{cff2a5f VFE...... .F...... 0,0-720,1280}
 5.4s




	


flutter 




	






	

 0 人点赞