Flutter实战指南

《Flutter实战指南》从零基础讲解Flutter和Dart，以及如何使用Flutter提供的丰富的小部件来添加常用的UI元素，如按钮、开关、表单、工具栏和列表等。本书循序渐进地讲解如何通过Flutter构建一个完整的App，让读者通过边学习边构建的方式深入理解Flutter的完整开发周期，逐步构建完整的Flutter知识体系。

本书针对零基础的读者，循序渐进地讲解如何通过Flutter构建一个完整的、跨平台的App，让读者通过边学习边构建的方式深入理解Flutter的完整开发周期，逐步构建完整的Flutter知识体系。本书分为基础篇和高级篇。基础篇（第1~9章）详细讲述如何使用一种语言、一个代码库构建跨平台移动App，内容包括如何构建小部件，如何使用这些小部件搭建应用，以及调试Flutter应用、使用页面导航、处理用户输入、使用表单等； 高级篇（第10~20章）系统讲解Flutter权限控制，如何使用Flutter添加动画效果、跨平台开发Flutter、发布Flutter应用、混合开发、异步编程、数据存储、网络编程等。本书可作为Flutter初学者的入门书籍，也可作为从事跨平台移动开发的技术人员及培训机构的参考书籍。

李楠，资深全栈架构师，擅长用Flutter、HTML5、Java、Python等语言进行技术开发，曾任中石油集团总部、58集团总部资深研发工程师，具有多年移动和互联网开发经验，主导过人民旅游App、旅游大数据平台、中国石油物资采购系统等项目的设计和架构，涉及教育、互联网、旅游、媒体、医疗、物资等领域。对iOS、Android等移动端开发、Web开发、机器学习和系统底层有深入研究。

基础篇
第1章 Flutter简介
1.1 什么是Flutter
1.2 Flutter的架构
1.3 在macOS下安装F1utter
1.4 在macOS下安装Visual Studio Code
1.5 在Windows下安装Flutter
1.6 在Windows下安装Visual Studio Code
1.7 Flutter中的Material Design体系
第2章 深入理解Flutter基础知识和小部件概念
2.1 创建一个Flutter项目
2.2 Flutter目录结构及main文件
2.3 Flutter中小部件的概念
2.4 创建Flutter小部件
2.5 小部件中的build方法
2.6 添加Scaffold页面
2.7 深入学习Dart语法
2.8 使用Card小部件和图片
2.9 官方文档及使用按钮RaisedButton
2.10 创建StatefulWidget小部件
2.11 在StatefulWidget中管理数据
2.12 在StatefuIWidget小部件中添加数据
2.13 把小部件拆分到单独的文件中
2.14 使用自定义小部件
2.15 给StatefulWidget传递参数
2.16 深入学习生命周期
2.17 深入学习Google的Material Design设计体系
2.18 Dart语言特性及位置参数与可选参数
2.19 Flutter中解除状态的特性
2.20 理解Dart语言中的final和const
2.21 总结
第3章 调试Flutter应用程序
3.1 解决语法错误
3.2 运行时错误和运行时日志消息
3.3 处理逻辑错误
3.4 使用debug断点调试
3.5 UI调试及视觉帮助工具
第4章 在不同设备上运行Flutter应用程序
4.1 将App运行到Android模拟器上
4.2 将Flutter应用运行到Android设备上
4.3 将App运行到iOS模拟器和设备上
第5章 列表ListView小部件和条件过滤
5.1 使用ListView创建滚动列表
5.2 优化列表加载功能
5.3 根据条件渲染列表内容
5.4 根据条件渲染内容的替代方案
5.5 总结
第6章 Flutter页面导航
6.1 在App中添加多个页面
6.2 给导航页面添加按钮
6.3 实现基本导航功能
6.4 优化详情页面
6.5 通过Push给页面传递数据
6.6 通过Pop获取页面返回的数据
6.7 给导航页面中的按钮添加单击事件
6.8 添加登录页面并切换页面
6.9 抽屉式导航
……
高级篇

     第3章 调试Flutter应用程序 在开发任何类型的App时，调试是一定要做的事情。通过调试我们可以定位App的错误。本章我们将学习在开发App时遇到的各种问题和解决方法。让我们开始吧！ 3．1解决语法错误 我们以一个简单的问题或经常出现的语法错误开始。什么是语法错误？语法错误表示编写的代码无法工作。 视频讲解 例如： 调用某个对象不存在的方法、忘记添加import引入等。 在news_manager．dart文件中注释掉import这行代码，代码如下： // import 'package:flutter/material．dart';//注释引入的包 IDE中报了语法错误，如图3．1所示。 图3．1错误提示信息 IDE能检测大多数的语法错误，把鼠标悬停在红线处，被告知“没有定义StatefulWidget，方法也没有在superclass中定义”。Dart语言中任何值都是对象，数字是对象，列表是对象，它们都继承于一个基类Superclass，即使自己定义的类继承了其他的类，它的上级的类终将继承这个基类，这就是这里报错的原因。 news_manager．dart很多错都是报“没有定义方法”。这意味着我们没有定义类或者忘记引入类，所以语法错误通常是逻辑上出的问题。语法错误不仅仅是漏掉import。如果把news_manager．dart中的属性_news前面的下画线去掉，就会出现如图3．2所示的错误提示信息。 图3．2属性的错误提示信息 错误提示没有定义_news，所以出现这些情况的时候，首先要做的是检查代码。代码中是否添加了这个属性？忘记引入什么了吗？ 还有一些错误是忘记编写了一些内容，例如分号，这是典型的语法错误。还有一种语法错误是赋值类型与属性类型不符，例如需要传入的是浮点型数据，但是如果传入了整型数据，会有错误提示“整型不能赋值给浮点型”。 IDE可以提供给我们很多警告或者是错误信息，如果阅读这些错误信息就可以很好地解决语法错误。 视频讲解 3．2运行时错误和运行时日志消息 在模拟器中多次单击添加资讯的按钮，如图3．3所示。 图3．3模拟器 发现如图3．4所示，显示了一些错误信息。这是Flutter的一个很好的功能。 图3．4显示的错误信息 在Debug Console中可以看到一个错误信息。那样怎样阅读Flutter的错误信息呢？首先检查底部，有时可以在底部找到重要的信息。Debug Console中打印了很多信息，需要向上滚动，找到如图3．5所示的分隔线。 图3．5Debug Console中的分隔线 在分隔线下面可以发现“底部的渲染超过了174像素”，这部分信息很有用，Flutter中的错误信息通常提供解决办法或者提供一个间接的解决方案，例如这里可以看到详细的问题描述，建议使用flex factor，或者可以使用ListView。这些建议很有用。当遇到错误信息时，要认真阅读它们，很多错误信息描述得都很清晰，甚至提供了解决方法，没有解决方法的也会告诉哪里错了。 看另外一个例子，在属性_news的值前面加上static const，编译没有报错，但如果重启应用会看到错误信息，屏幕上也有错误信息，显示不能给一个不可以改变的列表添加值。在Debug Console中检查时会发现这样的提示： unsupported operation cannot add to an unmodified list．这些错误叫运行时错误，它们不会在开发的时候报错。运行时错误通常描述得很清晰，显示错误是在文件中的哪个地方发生的，同时也可以通过跟踪问题栈直接找到有用的错误信息。 视频讲解 3．3处理逻辑错误 现在学习一下如何处理逻辑错误。什么是逻辑错误呢？在news_manager．dart中的_addNews()方法中，可能由于一时疏忽，忘记调用setState()方法。 这样的错误不会产生提示，因为是忘记了添加内容。保存并重启应用，没有任何错误提示，但如果单击添加资讯按钮，什么事情都没有发生，这时我们意识到可能是哪里出错了，然而却没有任何错误提示。应用并没有按照我们想要的效果显示，这就是逻辑错误。也是最难发现的错误，因为App运行正常，而且没有错误提示。 如何调试这样的逻辑错误呢？一种方法是查看代码，我们自己最清楚单击按钮时应该发生什么，所以首先检查单击按钮是否调用了正确的方法，同时检查是否传递了正确的数据，然而并没有发现问题。 再检查_addNews()方法，快速核对一下这个_news列表是否更新了，可以打印一条语句，代码如下： // Chapter03/03-03/lib/news_manager.dart void _addNews(String news) {// 添加资讯方法 _news.add(news); // 给_news列表添加数据 print(_news); // 打印_news列表中的数据 } print()方法不会在模拟器上显示任何内容，所以我们把print()方法叫作调试工具。保存重新加载后，在控制台中显示的内容一切正常，所以问题不在这里。这时应该想到是不是Flutter没有意识到这里的改变？我们在这里添加setState()方法，解决了这个问题。这种代码跟踪的方式可以解决像这样的逻辑错误