codelabs demo功能、官方步骤

1:模拟聊天界面
2:根据学习dart代码是的布局、事件绑定
3:构建组件
4: 简单的动画展示
5:根据ios、或android 显示界面
6:flutter 在android studio中调试

使用 Flutter 构建精美的界面 (flutter-io.cn)

debug其实类似Android 、java

函数上设置断点来练习使用调试程序，然后运行和调试应用。您可以检查堆栈框架以查看您的应用的函数调用历史记录。

image.png

demo截屏

image.png image.png

flutter的界面布局-使用代码

原生android 默认使用xml方式进行布局
flutter使用代码组件进行布局，类似vue、微信小程序

new Container 提法提醒

main.dart -step03 在添加动画前

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new FriendlychatApp());
}


final ThemeData kIOSTheme = new ThemeData(//采用 iOS 颜色（浅灰色，强调色为橙色）
 primarySwatch: Colors.orange,
  primaryColor:Colors.grey[100],
  primaryColorBrightness: Brightness.light,

);
final ThemeData kDefaultTheme = new ThemeData(//采用 Android 颜色（紫色，强调色为橙色）
  primarySwatch: Colors.purple,
  accentColor: Colors.orangeAccent[400],

);

class FriendlychatApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Friendlychat2",
      theme: defaultTargetPlatform == TargetPlatform.iOS  //根据iso平台、或android平台，使用不同的主题
      ? kIOSTheme:kDefaultTheme,
      home: new ChatScreen(),
    );
  }
}

class ChatScreen extends StatefulWidget {


  @override
  State createState()=>new ChatScreenState();
}
class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin{//创建AnimationController对象后，您需要向其传递一个vsync参数。vsync可防止处于屏幕之外的动画消耗不必要的资源。要使用ChatScreenState作为vsync，请在ChatScreenState类定义中添加一个TickerProviderStateMixin mixin。
  final List<ChatMessage> _messages = <ChatMessage>[]; //用于存放消息list，发生消息是_handleSubmitted会将新消息添加进来
  final TextEditingController _textController = new TextEditingController();//用它来读取输入字段的内容，并在发送文本消息后清除字段。
  bool _isComposing = false; //是否有输入文字，决定是否启用send 按钮

  @override
  void dispose(){
    for (ChatMessage message in _messages){
      message.animationController.dispose(); //释放动画资源
      super.dispose();
    }


  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
          title: new Text("Friendlychat")
      ) ,
      body:new Column(//可以占用多个子微件，包括滚动列表和输入字段的行。
        children: [
          new Flexible(//消息list的父容器,这将指示框架允许已接收的消息列表进行扩展以填充Column高度
              child: new ListView.builder(
                padding: new EdgeInsets.all(8.0),
                reverse: true,//可使ListView从屏幕底部开始
                itemBuilder: (_,int index)=>_messages[index],
                itemCount: _messages.length,

              )
          ),
          new Divider(height: 1.0,) ,//分割线
          new Container(//输入框+发送 Container可作为文本合成器的父微件，其可用于定义背景图片、内边距、外边距和其他常见的布局细节
            decoration: new BoxDecoration(
              color: Theme.of(context).cardColor
            ),
            child: _buildTextComposer(),
          ),



        ],

      ),
      //body: _buildTextComposer(),
    );
  }

  Widget _buildTextComposer(){
    return new IconTheme(//应用一个不同的主题背景。  图标的颜色、不透明度和大小
        data: new IconThemeData(color: Theme.of(context).accentColor),//data属性指定当前主题背景的ThemeData对象
        child: new Container(
            margin: const EdgeInsets.symmetric(horizontal: 8.0),
            child: new Row( //水平行方向创建子组件 Creates a horizontal array of children.
              children: [
                new Flexible(
                  child: new TextField(
                    controller: _textController,  //构造函数提供一个 TextEditingController。此控制器还可用于清除字段或读取字段的值。
                    onChanged: (String text){
                      setState(() {
                        _isComposing = text.length>0;
                      });
                    },

                    onSubmitted: _handleSubmitted,
                    decoration: new InputDecoration.collapsed(hintText: "send a message"),
                  ),
                ),

                new Container(
                  margin: new EdgeInsets.symmetric(horizontal:4.0),
                  child: new IconButton(
                    icon: new Icon(Icons.send),
                    onPressed:_isComposing? ()=> _handleSubmitted(_textController.text):null //粗箭头函数声明 => expression 是 { return expression; } 的简写形式。
                  ),
                ),

              ],

            )

        )
    );

  }
  

  void _handleSubmitted(String value) {
    _textController.clear();
    setState(() {
      _isComposing = false;
    });

    ChatMessage message = new ChatMessage(
      text: value,
      animationController:new AnimationController(//实例化一个AnimationController对象用于控制动画
          duration: new Duration(milliseconds: 700),
            vsync: this
        ),
    );
    setState(() { //并让框架了解此部分微件树已发生变化，且需要重新构建界面
      _messages.insert(0, message);
    });
    message.animationController.forward();
  }
}
const String _name = "牵手生活";
class ChatMessage extends StatelessWidget{
  ChatMessage({required this.text,required this.animationController});  //？？？为何需要keyword
  final String text;

  final AnimationController animationController; //存储动画控制器,在 _handleSubmitted()函数初始化 All final variables must be initialized, but 'animationController' isn't.  animationController由构造函数传入

  @override
  Widget build(BuildContext context) {
    return new SizeTransition(//CurvedAnimation对象与SizeTransition类结合使用可生成一个缓出动画效果。缓出动画效果可使消息在动画开始时快速滑入，然后慢下来，直至停止
      sizeFactor: new CurvedAnimation(
            parent: animationController,
            curve: Curves.easeOut
        ),
      axisAlignment: 0.0,
      child: 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,//消息，父微件是一个Column微件，其主轴是垂直的，因此CrossAxisAlignment.start将沿水平轴的最左侧位置对齐文本。
              children: <Widget>[
                new Text(_name, style: Theme.of(context).textTheme.subtitle2), //主题 .subhead 风格已经没有了
                new Container(
                  margin: const EdgeInsets.only(top:5.0),
                  child: new Text(text),
                ),
              ],

            ),

          ],

        ),
      ),
    );
  }
  
}