携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

src=http___pic4.zhimg.com_v2-d4475f94d92ae6012a4f2f727a51700d_1200x500.jpg&refer=http___pic4.zhimg.webp

Flutter是什么

Flutter是Google开源的构建用户界面工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台Flutter已推出稳定的2.0版本，无论是你是Android、IOS、还是web前端开发者都能很轻松的利用它完成复杂的业务场景。

Flutter安装（以Mac为例）

安装fluttersdk

在flutter官网下载zip包docs.flutter.dev/development…

使用git获取github的依赖库

    git clone https://github.com/flutter/flutter.git -b stable

配置flutter的环境变量

echo $PATH 查看当前环境变量

    usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:

编辑环境变量

   vim ./.bash_profile

环境变量示例

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    //flutter sdk的位置
    export Flutter_Home=/Users/用户名/file/development/flutter
    export PATH=$PATH:$Flutter_Home/bin
    export PATH=$PATH:$Flutter_Home/bin/cache/dart-sdk/bin
    //java sdk的位置
    export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_301.jdk/Contents/Home
    //android sdk的位置
    export PATH=${PATH}:/Users/用户名/Library/Android/sdk/platform-tools:/Users/用户名/Library/Android/sdk/tools

至于其中的AndroidSdk 和JavaSdk 可以自行搜索安装，教程很多很简单，就不赘述了。

保存环境变量配置

    source .bash_profile

检查依赖环境是否正常

    flutter doctor

当你在控制台看到上述输出时说明你的配置正确可以正常使用flutter了

开发工具安装

在AppStore 中下载安装Xcode
下载安装AndroidStudio, 地址：developer.android.google.cn/studio
在AndroidStudio安装Flutter插件

4. 配置FlutterSDK路径

创建Flutter工程

1. 在AndroidStudio中选择New Flutter Project

截屏2022-08-17 07.22.56.png 这里面需要注意三点
1.1 Project Type(分为四种):
Flutter Application
标准的Flutter App工程，包含标准的Dart层与Native平台层

Flutter Plugin
标准的Flutter 平台插件工程，包含标准的Dart层与Native平台层，提供Android和Ios的底层封装，在Flutter层提供组件功能，更方便调用Native平台层

Flutter Package
一般是定义一些公用的Widget

Flutter Module
混编到已有的安卓/iOS工程内。

1.2 Platforms:
这个是根据你的项目需求决定的，如果你的项目只是android ios双端之需要勾选其中两个，也是默认勾选的。如需需要其他例如web端运行需要自行勾选

1.3 Language:
Android 和IOS的开发语言选择，建议选择Kotlin 和 Swift

2.点击Finish 静待编译完成

揭开Flutter的面纱

微信截图_20220817100742.png 可以看到其中目录分为：

android (Android原生代码在此书写)
ios(ios原生代码)
lib(flutter代码)
test(测试代码)
pubspec.yaml(项目配置及依赖包引入)

接下来可以创建一个虚拟机或者使用真机，将项目运行起来
点击run 运行项目结果如下

打完收工

已经完成了Flutter的安装及Demo的创建，至于具体项目及文件的编写，等掌握了Dart和Flutter布局的编写之后，一切就得心应手了。

Flutter入门与实践(一) Flutter初识