Flutter 初尝

Flutter

Flutter 是 Google 研发的一套移动端开发框架,也是 Google 正在研发的下一代操作系统 Fuchsia 的 App 开发框架(Web 和 Desktop 也都在进行积极的尝试),前几天刚发布了 1.0 正式版。关于 Flutter 的原理和介绍可以参考这篇文章。
Flutter中文网:https://flutterchina.club/
如果你是iOS开发者 Flutter for iOS 开发者
如果你是android开发者 Flutter for Android 开发者
如果你是Web开发者 Flutter for Web开发者
如果你是RN开发者 Flutter for React Native 开发者
中文网站已经做了非常详细友好的教程了 这篇文章主要记录在开发中遇到的一些问题点

准备

环境搭建

按照文档上的步骤搭完MAC开发环境入门: 在macOS上搭建Flutter开发环境

使用VS Code

讲道理来说可以使用Android Studio 或其他编译器 我比较推荐VS Code VS Code下载地址

如何将VS Code 本地语言设置为中文

打开VS Code
1、Command + Shift + P 输入 Configure Display Language 将”en” 更改为”zh-CN”


Flutter 初尝_第1张图片
更改本地UI语言

2、选择扩展 输入Chinese 选择第一个插件 install ok 重新打开就可以了


Flutter 初尝_第2张图片
添加扩展插件
安装Flutter插件

调用 View>Command Palette…
输入 ‘install’, 然后选择 Extensions: Install Extension action
在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install
选择 ‘OK’ 重新启动 VS Code

Flutter 初尝_第3张图片
安装flutter插件
通过Flutter Doctor验证您的设置

调用 View>Command Palette…
输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action
查看“OUTPUT”窗口中的输出是否有问题

了解一下Dart语言

我们都知道Flutter是使用Dart来开发的 下面是关于Dart的一些东西
Dart 官网
Dart 基本语法
JSON 生成Dart 数据model
Dart vs Swift 语法

开始第一个Flutter项目

在flutter各种包库中可以搜索查看各种三方库包

官方有一个教学的项目 后面我会把自己的demo贴上来
这里有一些不错的Demo可以参考
一个入门级的FlutterDemo
这是一个用flutter仿写的微信UI Demo
仿书旗小说App
仿好奇心日报App
仿单读App

Flutter开源示例:

1.github.com/2d-inc/Hist…
2.flutterawesome.com
3.github.com/Solido/awes…

遇到的问题

vscode Could not create temporary directory: 权限被拒绝

解决方式:sudo chown $USER ~/Library/Caches/com.microsoft.VSCode.ShipIt/

未完待续...

你可能感兴趣的:(Flutter 初尝)