Сделана имитация текстового чатика, с прокручивающимся списком и текстовым вводом

lib/main.dart

@@ -1,74 +1,102 @@
 import 'package:flutter/material.dart';
 
+const String _name = "Ivan Murashov";
+
 void main() {
-  runApp(new MyApp());
+  runApp(new DemoApp());
 }
 
-class MyApp extends StatelessWidget {
-  // This widget is the root of your application.
-  @override
-  Widget build(BuildContext context) {
-    return new MaterialApp(
-      title: 'Flutter Demo',
-      theme: new ThemeData(
-        // This is the theme of your application.
-        //
-        // Try running your application with "flutter run". You'll see
-        // the application has a blue toolbar. Then, without quitting
-        // the app, try changing the primarySwatch below to Colors.green
-        // and then invoke "hot reload" (press "r" in the console where
-        // you ran "flutter run", or press Run > Hot Reload App in
-        // IntelliJ). Notice that the counter didn't reset back to zero;
-        // the application is not restarted.
-        primarySwatch: Colors.blue,
-      ),
-      home: new RegistrationPage(title: 'Flutter Demo Home Page'),
-    );
+class DemoApp extends StatelessWidget {
+  @override Widget build(BuildContext context) {
+    return new MaterialApp(title: "DemoApp", home: new ChatScreen());
   }
 }
 
-class RegistrationPage extends StatefulWidget {
-  RegistrationPage({Key key, this.title}) : super(key: key);
-
-  // This widget is the home page of your application. It is stateful,
-  // meaning that it has a State object (defined below) that contains
-  // fields that affect how it looks.
-
-  // This class is the configuration for the state. It holds the
-  // values (in this case the title) provided by the parent (in this
-  // case the App widget) and used by the build method of the State.
-  // Fields in a Widget subclass are always marked "final".
-
-  final String title;
-
-  @override
-  _RegistrationPageState createState() => new _RegistrationPageState();
+class ChatScreen extends StatefulWidget {
+  @override State createState() => new ChatScreenState();
 }
 
-class _RegistrationPageState extends State<RegistrationPage> {
-  int _counter = 0;
+class ChatScreenState extends State<ChatScreen> {
 
-  void _incrementCounter() {
-    setState(() {
-      // This call to setState tells the Flutter framework that
-      // something has changed in this State, which causes it to rerun
-      // the build method below so that the display can reflect the
-      // updated values. If we changed _counter without calling
-      // setState(), then the build method would not be called again,
-      // and so nothing would appear to happen.
-      _counter++;
-    });
+  final List<ChatMessage> _messages = <ChatMessage>[];
+  final TextEditingController _textController = new TextEditingController();
+
+  @override Widget build(BuildContext context) {
+    return new Scaffold(appBar: new AppBar(
+        title: new Text("DemoApp")), body: _buildScreen());
   }
 
-  @override
-  Widget build(BuildContext context) {
-    return new Scaffold(appBar: new AppBar(title: new Text(widget.title)),
-      					body: new Column(children: <Widget>[
-      						new Container(height:48.0, 
-      						  			alignment: FractionalOffset.center,
-      									child: new TextField(decoration: new InputDecoration.collapsed(hintText: 'Deliver features faster'))),
-    						new Container(height:48.0, 
-    									alignment: FractionalOffset.center,
-      									child: new TextField(decoration: new InputDecoration.collapsed(hintText:'Deliver features faster')))]));
+  Widget _buildScreen() {
+    return 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: _getDecoratedScreenComposer(),
+          child: _buildStyledTextComposer())
+    ]);
+  }
+
+  BoxDecoration _getDecoratedScreenComposer() {
+    return new BoxDecoration(color: Theme.of(context).cardColor);
+  }
+
+  Widget _buildStyledTextComposer() {
+    return new IconTheme(data: _getIconThemeData(), child: _buildTextComposer());
+  }
+
+  IconThemeData _getIconThemeData() {
+    return new IconThemeData(color: Theme.of(context).accentColor);
+  }
+
+  Widget _buildTextComposer() {
+    return new Container(margin: const EdgeInsets.symmetric(horizontal: 8.0),
+      child: _buildInputFieldRow());
+  }
+
+  Row _buildInputFieldRow() {
+    var textField = new InputDecoration.collapsed(hintText: "Send a message");
+    return new Row(children: <Widget>[
+      new Flexible(child: new TextField(controller: _textController,
+                                        onSubmitted: _handleSubmitted,
+                                        decoration: textField)),
+      new Container(margin: new EdgeInsets.symmetric(horizontal: 4.0),
+                    child: new IconButton(icon: new Icon(Icons.send),
+                    onPressed: () => _handleSubmitted(_textController.text)))
+    ]);
+  }
+
+  void _handleSubmitted(String text) {
+    _textController.clear();
+    ChatMessage message = new ChatMessage(text);
+    setState(() {_messages.insert(0, message);});
   }
 }
+
+class ChatMessage extends StatelessWidget {
+
+  final String text;
+
+  ChatMessage(this.text);
+
+  @override Widget build(BuildContext context) {
+    return new Container(margin: const EdgeInsets.symmetric(vertical: 8.0),
+                        child: _getMessageRow(context));
+  }
+
+  Widget _getMessageRow(BuildContext context) {
+    return 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: 4.0),
+                    child: new Text(text))
+              ])
+        ]);
+  }
+}