Flutter 安装简化教程

2020-09-22 本文已影响0人 IIronMan

总体步骤

安装 Flutter SDK
Android 开发环境的配置
iOS 环境的配置
查看是否需要安装任何依赖项来完成设置
创建一个 Flutter 项目

一、安装 Flutter SDK

1.1、下载相应系统的 sdk，在此我选择的是 Mac系统

下载相应系统 Flutter SDK
1.2、下载完 Flutter SDK 后，解压下载包(解压后是一个flutter 文件),把 flutter 文件拖入到 /Applications 下

下载完 Flutter SDK 后，解压下载包(解压后是一个flutter 文件),把 flutter 文件拖入到 /Applications下
1.3、终端进行配置 flutter
终端进行配置 flutter
终端输入：open ~/，为了看到 .bash_profile 文件，可以同时按：cmd + shift + .,复制一份 .bash_profile 文件到桌面，把下面的内容复制到文件下面，替换掉原来的文件，完成后记得再按下 cmd + shift + . 让 . 文件隐藏起来
```
export FLUTTER_HOME=/Applications/flutter
export PATH=$FLUTTER_HOME/bin:$PATH
export PATH=$FLUTTER_HOME/bin/cache/dart-sdk/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
```
1.4、测试flutter 是否安装成功：终端运行：flutter --help，出现下面的效果，表明安装成功
提示：如果报错 zsh: command not found: flutter
- 据官方说，从 macOS Catalina 版开始，您的 Mac 将使用 zsh 作为默认登录 Shell 和交互式 Shell。您还可以在较低版本的 macOS 中将 zsh 设置为默认 Shell。运行chsh -s /bin/zsh之后，发现flutter的命令不能用了，这是因为切换了shell执行工具
- 解决方法：复制一份.bash_profile，然后改名为.zprofile，终端执行source ~./zprofile
```
source ~/.zprofile
```

二、Android 开发环境的配置

2.1、下载 android studio,下载完安装到电脑即可，个人建议在社区进行 Android Studio 下载，因为在官网下载的我安装的时候遇到很多奇奇怪怪的事情，最后再社区下载的就没有任何问题

安装的过程可能会报错: 最好配置下

选择标准安装
2.2.在 Android Studio 里面安装 Flutter 和 dart, 在Android Studio 的设置(commond+,快速打开Android Studio的设置界面)里面，选择 Plugins,搜索 flutter

Android Studio里面安装 Flutter
2.3、安装好后再打开 Android Studio 如下

三、iOS 环境的配置

3.1、在 App Store 下载一个 Xcode 即可

App Store
Xcode
- 3.2、查看项目运行直接在 Xcode 的模拟器上即可

四、查看是否需要安装任何依赖项来完成设置

4.1、在终端输入
```
flutter doctor
```
提示：有报红的一个一个的解决，没有请忽略
- 问题一： Android license status unknown.
  
  解决办法：打开上面的链接，如下：偏好设置->Android SDK->SDK Tools -> 取消选中 Hide Obsolete Packages -> 选中 AndroidSDKTools(Obsolete)
都没问题的如下：

Flutter环境配置好的展示

五、创建一个 Flutter 项目

5.1、使用 Android Studio 创建一个项目

使用 `Android Studio` 创建一个项目
- 提示：推荐使用终端创建项目： flutter create 项目的名字
创建一个Flutter项目
- Flutter Application：我们要创建的应用
- Flutter Plugin 插件：做一些iOS或者Android原生的支持
- Flutter Package 包：是一些lip库
- Flutter Module：组件

5.2、使用模拟器展示 Hello World ,复制官网给的代码到main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
       title: 'Welcome to Flutter',
       home: Scaffold(
          appBar: AppBar(
             title: Text('Welcome to Flutter'),
          ),
          body: Center(
             child: Text('Hello World'),
         ),
       ),
    );
  }
}

运行效果

在安装的过程中，你可能会遇到很多的问题，解决不了的都可以联系我，方式你总会找到的😆

Flutter 安装简化教程

猜你喜欢

热点阅读