作者｜严嘉俊
Flutter 是 Google 公布的一个用于创立跨平台、高性能挪动利用的框架。随着 Google 在 IO19 发表 Flutter 反对 Web 平台，就标记着 Flutter 曾经全面持所有平台。
Flutter 提供了十分敌对的文档，开发过程中遇到的问题都能够在 Stackoverflow 或其 github issue 中找到答案，帮忙各端的同学迅速地进入到 Flutter 中。同时它的齐全开源也让其有了更快的迭代，更好的生态。
依据谷歌官网 2020 年 4 月的统计数据，Flutter 自公布以来的 16 个月内，已有 200 万开发者应用 Flutter，3 月份的时候也有 10% 的增长，Google Play Store 中公布的 Flutter 利用约有 5 万个，仅在 2020 年 4 月就有近 1 万个利用上传。开发者所在的团队，初创公司最多，占比 35%，其次是企业开发者，占比 26% 。
???? 来自谷歌开发者《Flutter 势头正盛 | 2020 秋季速递》
通晓云正式反对 Flutter，同样也标记着通晓云曾经全面反对所有平台了。开发者通过应用通晓云 Flutter SDK ，能够在 Flutter 中操作存储在通晓云中的数据表、内容库、媒体文件，以及调用云函数进行后端逻辑的执行，节俭了搭建服务器、数据库，域名备案，数据接口实现等繁琐流程，开发利用门槛更低、效率更高。
当初，咱们将联合通晓云 Flutter SDK 来实战做一个 Todo App，看看有多不便多快捷。
????Todo App demo
开发实战
构建一个 Todo App，咱们须要三步走：
- 构建根本构造和款式
- 引入通晓云 SDK
- 对 Todo 数据进行增删查改
可下拉至文末，间接观看教学视频。
构建根本构造和款式
1）创立一个新我的项目
a. 应用 Flutter create 命令创立一个 project：
$ flutter create todoApp$ cd todoApp上述命令创立一个 Flutter 我的项目，项目名称为 todoApp，其中蕴含一个应用 Material 组件的简略演示应用程序。
b. 将 lib/ 下的 main.dart 外面的代码全副删除。
2）筹备工作
首先咱们先在 lib 文件夹新建一个 pages 文件夹并在该文件夹里创立一个 home.dart 文件作为咱们的首页。
而后在 home.dart 这个文件里，创立一个 stateful widget，增加引入 material 库。
import 'package:flutter/material.dart';class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState();}class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Container( ); }}最初在 main.dart 中引入该页面即可。
import 'package:flutter/material.dart';import './pages/home.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: HomePage(), ); }}3）构建根本构造
返回 home.dart 这个文件，在 build 的 return 处增加 Scaffold，并增加 AppBar 题目等信息。因为咱们 Demo 的构造是纵向排列，因而咱们间接用 Column 即可。
为了让咱们的按钮都可能撑开屏幕的宽度，能够设置 CrossAxisAlignment.stretch。目前代码：
class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('通晓云 Flutter SDK Demo'), ), body: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ ], ), ); }}接着咱们开始写输入框。咱们能够用 Form 以及 TextFormField 来创立一个输入框，并且通过构建一个 controller 来管制输入框的行为。最初，能够定义 decoration 值来实现相似于占位符的成果：
Form( child: TextFormField( controller: inputController, decoration: InputDecoration(labelText: '请输出 Todo 内容'), ),)下一步便是构建一个增加 Todo 的按钮。咱们能够通过创立一个 RaisedButton 并指定按钮内容为「增加 Todo」。因为目前还没到须要确定点击工夫的时候，因而 onPressed 这个性能能够临时设置为一个无动作的函数。之后为了让按钮难看一点，咱们能够把按钮的背景设置为蓝色，文字设置为红色，高度设置 50，并让按钮和输入框略微有一点间距：
SizedBox( height: 5.0, ), ButtonTheme( height: 50.0, child: RaisedButton( onPressed: () {}, child: Text( '增加 Todo', style: TextStyle(color: Colors.white), ), color: Colors.blue, ), ),接下来咱们持续构建咱们的 Todo 列表。
首先，咱们在写构造之前先定义好一些将会用到的假数据，不便接下来的款式调整。咱们能够定义一个 todoList 列表，每个子项都蕴含两个字段，一个是「name」，示意 todo 的名字，另一个是「isDone」，用于判断这个 todo 是否曾经实现。
List todoList = [ {"name": "学习 SDK", "isDone": false}, {"name": "开早会", "isDone": true}, ];之后咱们持续写列表的构造。咱们能够用 ListView 来创立一个列表项，其 children 属性循遍历 todoList 的内容。之后每个 child 里咱们都用一个 Row 来示意，其 children 属性蕴含三样货色，别离是 todo 的名称，实现按钮和删除按钮。为了 todo 名称能够撑开残余宽度，咱们还能够应用 Expanded 这个 widget 进行撑开：
ListView( shrinkWrap: true, children: todoList.map((todo) { return Row( children: [ Expanded(child: Text(todo['name'])), RaisedButton( onPressed: () {}, child: Text( '实现', style: TextStyle(color: Colors.white), ), color: Colors.green, ), SizedBox( width: 5, ), RaisedButton( onPressed: () {}, child: Text( '删除', style: TextStyle(color: Colors.white), ), color: Colors.redAccent, ), ], ); }).toList(),目前咱们的根本构造曾经实现，但还须要判断一下 todo 实现和未实现的状态款式。咱们能够依据 isDone 来判断实现状态。如果曾经实现，则将 todo 名称的款式置灰，并且加一条横线示意已实现。因为曾经实现，实现按钮也毋庸显示：
Expanded( child: Text( todo['name'], style: TextStyle( color: todo['isDone'] == true ? Colors.black26 : Colors.black, decoration: todo['isDone'] == true ? TextDecoration.lineThrough : TextDecoration.none, ), ), ), if (todo['isDone'] == false) RaisedButton( onPressed: () {}, child: Text( '实现', style: TextStyle(color: ), color: Colors.redAccent, ),至此，咱们根本实现了本次 Demo 的款式构造。
引入通晓云 SDK
引入 SDK 的局部绝对比较简单，咱们先去 https://pub.dev/ 搜寻 minapp，找到咱们官网通晓云 SDK 的包。在 Installing 标签页，将 dependencies 中的 minapp 局部引入到咱们我的项目根目录中的 pubspec.yaml 文件对应的局部：
dependencies: flutter: sdk: flutter minapp: ^0.0.1-dev.1下面代码块的版本号为 0.0.1-dev.1，该版本还是一个预览版本。置信您在看到这篇文章时曾经是正式版本了。
我的项目目录下跑 flutter pub get 装置依赖。
装置依赖后，咱们回到 main.dart，引入 SDK。并在 main 这个函数中，用咱们的 ClientID 初始化咱们的 SDK。该 SDK 能够在通晓云控制台的设置中找到。最初，也须要在 home.dart 中引入 SDK。
import 'package:flutter/material.dart';import 'package:minapp/minapp.dart' as BaaS;import './pages/home.dart'; void main() { BaaS.init('dce25a0b4fe0a5558b5'); runApp(MyApp());} class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: HomePage(), ); }}至此，咱们已实现对 SDK 的引入。
对 Todo 数据进行增删查改
在写 Todo 的增删查改性能前，咱们先在通晓云控制台创立一个名为 todo_demo 的表，为了接下来更不便地展现，这个表临时设置为所有人都能够读写。而后新建两个字段，第一个为类型为 string 的「name」字段，另一个为类型为 boolean 的 「isDone」字段，默认为 false。
????通晓云控制台
之后返回到 home.dart，增加一个 TableObject 变量，并指定表名为 todo_demo：
TableObject tableObject = new TableObject('todo_demo');接下来咱们正式开始对数据的新增查改。
首先先创立一个增加 Todo 的函数。这个函数须要获取用户输出的值，而后通过调用 tableObject 中的 create 办法，创立一条记录。之后通过记录中的 set 办法设定 「name”」字段中的值，也就是输出值。最初调用 save 办法发出请求保留数据。
// 增加 todo void addTodo() async { TableRecord record = tableObject.create(); record.set('name', inputController.text); try { await record.save(); } catch (e) { print(e.toString()); } }通晓云对于数据库的新增和删改都须要用户登录能力失常应用，但因为之前咱们在创立表的时候曾经对表的权限放开，容许所有人都能够增删查改，因而咱们只须要构建一个匿名登录的办法即可。最初还须要将这个匿名登录办法放到 initState 中执行一下：
void anonymousLogin() async { try { await Auth.anonymousLogin(); print('登录胜利'); } catch (e) { print(e.toString()); } } @override void initState() { super.initState(); anonymousLogin(); }接下来咱们开始增加获取 Todo 列表的办法。咱们创立一个 getTodoList 函数，通过 tableObject 中的 find 办法，获取表内所有的数据。而后对 todoList 进行赋值为 recordList.records。其中这个 records 是 SDK 封装好的数据类型，具体内容可参考官网文档。
// 获取 todo 列表 void getTodoList() async { try { TableRecordList recordList = await tableObject.find(); setState(() { todoList = recordList.records; }); } catch (e) { print(e.toString()); } }因为之前的 todoList 是假数据，当初须要移除一下。在第一步构建的构造也要对应批改，在 todo 前面增加 recordInfo：
Expanded( child: Text( todo.recordInfo['name'], style: TextStyle( color: todo.recordInfo['isDone'] == true ? Colors.black26 : Colors.black, decoration: todo.recordInfo['isDone'] == true ? TextDecoration.lineThrough : TextDecoration.none, ), ), ), if (todo.recordInfo['isDone'] == false) RaisedButton( onPressed: () {}, child: Text( '实现', style: TextStyle(color: Colors.white), ), color: Colors.green, ),最初为了更好的用户体验，咱们也要把 getTodoList 这个办法放到 initState 中，且也要相应地，在 addTodo 这个办法中放入。这样每当咱们增加 todo 时，就刷新一次 todo 列表。
@override void initState() { super.initState(); anonymousLogin(); getTodoList(); }await record.save();getTodoList();之后，咱们刷新一个页面即可看到实在数据。
接下来咱们持续写实现按钮的操作。咱们能够通过调用 tableObject.getWithoutData 来获取某条数据项，而后将这条数据的 isDone 设置为 true，示意曾经实现，而后通过 update 办法发出请求更新数据。
// 实现 todo void completeTodo(String id) async { TableRecord record =tableObject.getWithoutData(recordId: id); record.set('isDone', true); try { await record.update(); getTodoList(); } catch (e) { print(e.toString()); } }最初咱们来实现一下删除性能。通过调用 tableObject 的 delete 办法，并传入 id，进行删除：
// 删除 todo void deleteTodo(String id) async { try { await tableObject.delete(recordId: id); getTodoList(); } catch (e) { print(e.toString()); } }咱们也不要遗记每次构建一个函数，也要相应地将其绑定到咱们的按钮工夫当中：
RaisedButton( onPressed: () => deleteTodo(todo.id), child: Text( '删除', style: TextStyle(color: Colors.white), ), color: Colors.redAccent, ),至此，咱们的 todo app 曾经顺利地实现。
点此查看开发文档。
小结
本章节次要以 Todo App 为例，向大家展现了数据的增删查改等根底性能，如有不明确的中央，可通过扫描下方小程序码，观看教学视频，联合开发实战教学视频一起学习。
???? 扫描下方小程序码，观看教学视频
???? PC 端可点这里观看教学视频
另外，提到 Flutter，大家可能会联想起 SwiftUI。对于 SwiftUI 开发实战，咱们也以新闻资讯 App 为例，提供了开发实战教程。有趣味的小伙伴可点击下方题目链接进行学习。
- 查看 SwiftUI 入门实战（上）
- 查看 SwiftUI 入门实战（下）
如果有其它学习需要，可通过文末评论或小晓云微信留言（微信号：minsupport4），咱们将依据理论反馈状况安顿下期实战教学，敬请期待。
????教程预报：App Clips 苹果牌小程序完整版 demo 教程。