欢迎关注
最酷最in的云资讯

Flutter的安装与使用

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

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

1.2、总体架构

image.png

Flutter 总体架构

1.3、GPU渲染

image.png

GPU渲染

二、Flutter SDK 的安装

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

image.png

Flutter SDK 的下载

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

image.png

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

2.3、终端进行配置 flutter

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

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

image.png

路径配置

然后执行:source ~/.bash_profile

source ~/.bash_profile

2.4、测试flutter 是否安装成功: 终端运行:flutter –help,出现下面的效果,表明安装成功

image.png安装成功效果

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

flutter doctor

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

都没问题的如下:

image.png

Flutter环境配置好的展示

三、Android 开发环境的配置

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

image.png

android studio

安装的过程可能会报错: 点击取消就好,不用管

image.png

image.png

选择标准安装

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

选择下载适合自己系统的 sdk

image.pngimage.png

安装成功

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

image.png

Android Studio里面安装 Flutter

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

image.png

四、iOS 环境的配置

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

image.png

App Store

image.png

Xcode

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

五、创建一个 Flutter 项目

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

image.png

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

image.png

创建一个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 {@overrideWidget build(BuildContext context) {    return MaterialApp(       title: 'Welcome to Flutter',       home: Scaffold(          appBar: AppBar(             title: Text('Welcome to Flutter'),          ),          body: Center(             child: Text('Hello World'),         ),       ),    );  }}

image.png

运行效果

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

最后推荐一篇Flutter的文章:你好,Flutter

作者:IIronMan

链接:https://www.swifty.cc/p/a73dd86d807f

赞(0) 打赏
未经允许不得转载:云微资讯 » Flutter的安装与使用
分享到: 更多 (0)

云微资讯 科技新媒体资讯平台

关于我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏