随着项目的代码越来越多，我们会碰到各种问题，所以我们需要学习一下如何使用IntelliJ定位并解决问题。我们可以在IntelliJ IDE上调试在模拟器/仿真器或真机设备上运行的Flutter应用程序，使用IntelliJ编辑器可以：
选择一个设备或模拟器来调试应用程序。
查看控制台消息。
在代码中设置断点。
在运行时检查变量并评估表达式。
IntelliJ编辑器在您的应用程序运行时会显示系统日志，并提供了一个调试器UI来处理断点并控制执行流程。还可以使用断点来调试Flutter应用程序：
打开要设置断点的源文件。
找到要设置断点的行，单击它，然后在菜单中选择Run > Toggle Line Breakpoint。或者，我们也可以点击行号与代码中间的空白区切换断点。
在菜单中选择Run > Debug。
IntelliJ编辑器启动调试器UI，并在应用程序到达断点时暂停执行。然后，我们可以使用调试器UI中的控制器来确定错误的原因。
在这篇文章中，我们要创建一个显示用户聊天消息的窗口控件，将创建和组合多个较小的控件。从一个表示单个聊天消息的控件开始，将该控件嵌套在父级可滚动列表中，并将可滚动列表嵌套在基本应用程序脚手架（Scaffold）中。
首先，我们需要一个表示单个聊天消息的控件，定义一个名为ChatMessage的StatelessWidget。如下面代码所示，它的build()方法返回一个Row控件，它显示一个简单的图形头像来表示发送消息的用户，一个包含发件人姓名的Column控件和消息的文本。
我们还需要定义_name变量，我们将使用此变量标记每个聊天消息与发件人的名字。将以下类和变量的定义添加到main.dart。
const String _name = "hekaiyou"; class ChatMessage extends StatelessWidget { ChatMessage({this.text}); final String text; @override Widget build(BuildContext context) { return new Container( margin: const EdgeInsets.symmetric(vertical: 10.0), child: new Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ new Container( margin: const EdgeInsets.only(right: 16.0), child: new CircleAvatar(child: new Text(_name[0])), ), new Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ new Text(_name, style: Theme.of(context).textTheme.subhead), new Container( margin: const EdgeInsets.only(top: 5.0), child: new Text(text), ) ] ) ] ) ); } }为使CircleAvatar控件看起来更有个性，我们将_name变量的值的第一个字符传递给子Text控件。我们将使用CrossAxisAlignment.start作为Row构造函数的crossAxisAlignment参数来定位头像和消息，相对于其父窗口控件。
对于头像，父对象是一个Row控件，其主轴是水平的，因此CrossAxisAlignment.start会沿垂直轴给出最高位置。对于消息，父对象是一个Column控件，其主轴是垂直的，因此CrossAxisAlignment.start将沿着水平轴的最左侧位置的文本对齐。
在头像旁边，垂直对齐两个Text控件，以便在顶部显示发送人的名字，并在下面显示消息的文本。要设置发送人的名称并使其大于消息文本，您需要使用Theme.of(context)来获取适当的ThemeData对象。其textTheme属性可以让我们访问质感设计逻辑样式，比如文字像subhead，因此您可以避免硬编码字体大小和其他文本属性。
我们尚未为此应用程序指定主题，因此Theme.of(context)将检索默认的Flutter主题。在稍后的步骤中，我们将覆盖此默认主题，以适应Android与iOS之间不同的应用程式风格。
接下来的我们要做的是获取聊天消息列表，并在UI中显示。此列表是可以滚动的，以便用户可以查看聊天记录。列表还应按时间顺序显示消息，最近的消息显示在可见列表的最下面。
在我们的ChatScreenState控件定义中，添加名为_messages的List成员来表示每个聊天消息。每个列表项都是一个ChatMessage实例，而且需要将消息列表初始化为空列表。
class ChatScreenState extends State<ChatScreen> { final List<ChatMessage> _messages = <ChatMessage>[]; final TextEditingController _textController = new TextEditingController(); //...在当前用户从文本字段发送消息时，我们的应用程序应该将新消息添加到消息列表中。因此需要修改_handleSubmitted()方法，以执行此行为。
class ChatScreenState extends State<ChatScreen> { //... void _handleSubmitted(String text) { _textController.clear(); ChatMessage message = new ChatMessage( text: text, ); setState((){ _messages.insert(0, message); }); } //... }您调用setState()来修改_messages并让框架知道这部分控件树已经更改，并且需要重建UI。在setState()中只能执行同步操作，否则框架可能在操作完成之前重新构建窗口控件。
一般来说，可以在一些私有数据改变之后，再使用一个空的闭包调用setState()。然而，更新setState()的闭包中的数据是首选的，所以我们要记得调用它。
现在可以显示聊天消息列表了，我们将从_messages列表中获取ChatMessage控件，并将它们放在ListView控件中，作为可滚动列表。
在我们的ChatScreenState类的build()方法中，为消息列表添加一个ListView窗口控件。我们选择ListView.builder构造函数，因为默认构造函数不会自动检测其children的突然变化。
class ChatScreenState extends State<ChatScreen> { //... Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('谈天说地'), ), body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( padding: new EdgeInsets.all(8.0), reverse: true, itemBuilder: (_, int index) => _messages[index], itemCount: _messages.length, ) ), new Divider(height: 1.0), new Container( decoration: new BoxDecoration( color: Theme.of(context).cardColor, ), child: _buildTextComposer(), ) ] ) ); } //... }Scaffold控件的body属性现在包含传入消息的列表以及输入字段和发送按钮。我们正在使用以下布局控件：
Column，垂直布置其直接的子控件列表（children）。Column可以占用多个子窗口控件，这是包括一个滚动列表和一个输入字段的行。
Flexible，作为ListView的父级。这告诉框架让接收到消息的列表展开以填充Column高度，而TextField保持固定的大小。
Divider，在用于显示消息的UI和用于撰写消息的文本输入字段之间绘制水平的横线。
Container，作为文本编辑区的父级，可用于定义背景图像、填充、边距和其他常见布局细节。使用decoration来创建一个定义背景颜色的新BoxDecoration对象。在这种情况下，我们使用由默认主题的ThemeData对象定义的cardColor，这使得用于组合消息的UI与消息列表有不同的背景。
将参数传递给ListView.builder构造函数以自定义列表内容和外观：
padding对于消息文本周围的空白
reverse使ListView从屏幕底部开始
itemCount指定列表中的消息数
itemBuilder对于在[index]中构建每个窗口控件的函数。因为我们不需要当前的构建上下文，所以我们可以忽略IndexedWidgetBuilder的第一个参数。命名参数_（下划线）是一个表示不会被使用的约定。
