Flutter的安装与使用

2019-03-08 本文已影响66人 IIronMan

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

Flutter 总体架构
1.3、GPU渲染

GPU渲染

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

Flutter的安装与使用

猜你喜欢

热点阅读