一、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
作者:IIronMan
链接:https://www.jianshu.com/p/a73dd86d807f
本文由 投稿者 创作,文章地址:https://blog.isoyu.com/archives/flutterdeanzhuangyushiyong.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:3月 14, 2019 at 09:48 下午