Flutter的安装与使用

一、Flutter官网 简介，Flutter中文网

• 1.1、 2018年2月27日，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。Flutter是Google用以帮助开发者在Ios和Android两个平台开发高质量原生应用的全新移动UI框架，点击查看Flutter介绍视频。

• 1.2、总体架构

  
  Flutter 总体架构

• 1.3、GPU渲染

  
  GPU渲染

二、Flutter SDK 的安装

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

  
  Flutter SDK 的下载

• 2.2、下载完 Flutter SDK 后，解压下载包(解压后是一个flutter 文件),把 flutter 文件 拖入到 /Applications下
  

  把 `flutter` 文件 拖入到 `/Applications`下

• 2.3、终端进行配置 flutter

  • 配置路径：终端输入：vim ~/.bash_profile,把下面代码复制进去

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    export PATH=$PATH:/Applications/flutter/bin
    

    路径配置

    • 然后执行：source ~/.bash_profile

      source ~/.bash_profile
      

• 2.4、测试flutter 是否安装成功： 终端运行：flutter --help，出现下面的效果，表明安装成功
  

  安装成功效果

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

  flutter doctor
  

  提示：有报红的一个一个的解决

  都没问题的如下：

  Flutter环境配置好的展示

三、Android 开发环境的配置

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

  android studio
  安装的过程可能会报错: 点击取消就好，不用管
  
  选择标准安装

• 3.2、下载 Java SDK 安装包，其实这个不需要单独下载，在安装 Android Studio的时候会提示去下载

  
  选择下载适合自己系统的 sdk
  安装成功

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

  Android Studio里面安装 Flutter

• 3.4、安装好后再打开 Android Studio 如下

  

四、iOS 环境的配置

• 4.1、在 App Store 下载一个 Xcode 即可

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

五、创建一个 Flutter 项目

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

  使用 `Android Studio` 创建一个项目

  创建一个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的文章：你好，Flutter