Flutter 安装简化教程

总体步骤

• 安装 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'),
           ),
         ),
      );
    }
  }
  

  运行效果

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