![5543dd8a2ed0676ce0196312ba03ecf6.png](https://i-blog.csdnimg.cn/blog_migrate/e7b1fec6e8717dafbe59c140addd7ded.jpeg)
欢迎转载,转载是请注明原文链接: http:// blog.joouis.com/2018/07 /25/first-flutter-app-review/
标题图片引用自 Reactive app state in Flutter
TL;DR
站在负责 UI 层的 Web 前端视角看无线端框架,评判的第一个标准无非是文档够不够全、Demo 能不能很容易在手机上跑起来。近来的热门框架 Flutter 就上手而言给出了漂亮的答案。
Prolog
- 我是谁:曾是 Embedded C 开发的 Web 前端攻城狮,完全没有
dart
或是flutter
开发经验 - 开发环境:MacBook Pro,XCode with iOS simulator
- 学习初心:2018 年的 Weex 开发体验依然不好,不如拥抱下一个技术红利(假笑.jpg
- 种草文:什么你还没听过 Flutter,简单介绍一下吧《Release Flutter的最后一公里》
- 最后一句话:以下"学习笔记"中,若有错误/模糊概念请友好指正,么么哒
Introduction
Flutter 最近真的是大热,可能笔者身处阿里的缘故,自从咸鱼在他们的商品详情页成功使用后,集团内无论是 ATA 技术论坛还是周报都能看到有人学习研究这门技术。
笔者一直都想尝试原生的无线端开发,在错过 React Native、受够 Weex 之后,身处这个时间点刚好趁热学习一下 Flutter,说不定这次真的跟过往的轮子不一样。
Setup
照着官方文档来,一切还算顺利:装好 Flutter SDK,flutter doctor
把相关依赖都装好,插上 iPhone 手机,VS Code 新建一个 Flutter Demo
工程,调试...
在真机调试时,出现了第一个与苹果应用验证相关的问题:
Failed to create provisioning profile.
The app ID "com.example.flutterFlutterDemo" cannot be registered to your development team. Change your bundle identifier to a unique string to try again.
解决方法有两种:
- 使用自己的 Apple ID,详见这里;(好吧我也没试过)
- 使用模拟器。
命令行输入 open ios/Runner.xcworkspace
打开 Runner 工程,选择模拟器即可跑起来默认的 Demo 工程。
Code Review for Official Counter
Intro
官方默认的 Demo 工程是一个简易计数器。先看眼效果,真的非常简单,右下角点击加号,中间的数字对应增长,就酱~
![ab24d0679c9bd67d14b7ffce242f7303.png](https://i-blog.csdnimg.cn/blog_migrate/b79ffee0f508f623e5b49b2fc2281c57.jpeg)
外行看热闹,内行看门道。应用层代码总共就六十多行,反正也不会 Dart,就边看边学习一下。
Import
import 'package:flutter/material.dart';