Created
December 8, 2019 15:20
-
-
Save cnruby/fc1b701c55dab8c7550434643fb790f3 to your computer and use it in GitHub Desktop.
Flutter App 38: Place the static message list
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
const String _name = "YourName"; | |
void main() { | |
runApp(new FriendlychatApp()); | |
} | |
class FriendlychatApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return new MaterialApp( | |
title: "Friendlychat", | |
home: new ChatScreen(), | |
); | |
} | |
} | |
class ChatScreen extends StatefulWidget { | |
@override | |
State createState() => new ChatScreenState(); | |
} | |
class ChatMessage extends StatelessWidget { | |
ChatMessage({this.text}); | |
final String text; | |
@override | |
Widget build(BuildContext context) { | |
return new Container( | |
decoration: myBoxDecoration(), | |
margin: const EdgeInsets.symmetric(vertical: 10.0), | |
child: new Row( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: <Widget>[ | |
new Container( | |
decoration: myBoxDecoration(), | |
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( | |
decoration: myBoxDecoration(), | |
margin: const EdgeInsets.only(top: 5.0), | |
child: new Text(text), | |
), | |
], | |
), | |
], | |
), | |
); | |
} | |
BoxDecoration myBoxDecoration() { | |
return BoxDecoration( | |
border: Border.all( | |
width: 3.0, | |
color: Colors.blue, | |
), | |
borderRadius: BorderRadius.all(Radius.circular(5.0)), | |
); | |
} | |
} | |
class ChatScreenState extends State<ChatScreen> { | |
final TextEditingController _textController = new TextEditingController(); | |
@override | |
Widget build(BuildContext context) { | |
return new Scaffold( | |
appBar: new AppBar(title: new Text("Friendlychat")), | |
body: new Column( | |
children: <Widget>[ | |
new Flexible( | |
child: new ListView.builder( | |
padding: new EdgeInsets.all(8.0), | |
reverse: true, | |
itemBuilder: (_, int index) => new ChatMessage( text: _name, ), | |
itemCount: 5, | |
), | |
), | |
new Divider(height: 1.0), | |
new Container( | |
decoration: myBoxDecoration(), | |
child: _buildTextComposer(), | |
), | |
], | |
), | |
); | |
} | |
Widget _buildTextComposer() { | |
return new Container( | |
decoration: myBoxDecoration(), | |
margin: const EdgeInsets.symmetric(horizontal: 8.0), | |
child: new Row( | |
children: <Widget>[ | |
new Flexible( | |
child: new TextField( | |
controller: _textController, | |
onSubmitted: _handleSubmitted, | |
decoration: | |
new InputDecoration.collapsed(hintText: "Send a message"), | |
), | |
), | |
new Container( | |
decoration: myBoxDecoration(), | |
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(); | |
} | |
BoxDecoration myBoxDecoration() { | |
return BoxDecoration( | |
border: Border.all( | |
width: 3.0, | |
color: Colors.blue, | |
), | |
borderRadius: BorderRadius.all(Radius.circular(5.0)), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment