Add a UI for displaying messages

Author: Fernando Aguilar

friendlychat/lib/chatMessage.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+class ChatMessage extends StatelessWidget {
+ ChatMessage({this.text});
+ final String text;
+ static const String _name = "Fraguilar";
+
+ @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].toUpperCase() + _name[1].toUpperCase())
+ ),
+ ), 
+ 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),
+ ),
+ ],
+ )
+ ],
+ ),
+ );
+ }
+}

friendlychat/lib/chatscreen.dart renamed to friendlychat/lib/chatScreen.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'chatMessage.dart';
 
 class ChatScreen extends StatefulWidget {
  @override
@@ -7,12 +8,30 @@ class ChatScreen extends StatefulWidget {
 
 class ChatScreenState extends State<ChatScreen> {
  final TextEditingController _textController = new TextEditingController();
+ final List<ChatMessage> _messages = <ChatMessage>[];
 
  @override
  Widget build(BuildContext context) {
  return new Scaffold(
  appBar: new AppBar(title: new Text("FriendlyChat")),
- body: _buildTextComposer(),
+ 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(),
+ ),
+ ],
+ ),
  );
  }
 
@@ -47,5 +66,11 @@ class ChatScreenState extends State<ChatScreen> {
 
  void _handleSubmitted(String text) {
  _textController.clear();
+ ChatMessage message = new ChatMessage(
+ text: text,
+ );
+ setState(() {
+ _messages.insert(0, message);
+ });
  }
 }

friendlychat/lib/main.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'chatscreen.dart';
+import 'chatScreen.dart';
 
 void main() {
  runApp(new FriendlyChatApp());