Skip to content

Instantly share code, notes, and snippets.

@cnruby
Created December 8, 2019 16:49
Show Gist options
  • Save cnruby/270cf06d70b00ba85fee99cc2e8b860e to your computer and use it in GitHub Desktop.
Save cnruby/270cf06d70b00ba85fee99cc2e8b860e to your computer and use it in GitHub Desktop.
Flutter App 3C: wrapping longer messages, and adding native-looking customizations
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, this.animationController});
final String text;
final AnimationController animationController;
@override
Widget build(BuildContext context) {
return new SizeTransition(
sizeFactor: new CurvedAnimation(
parent: animationController,
// https://api.flutter.dev/flutter/animation/Curves-class.html
//curve: Curves.easeOut
curve: Curves.linear),
axisAlignment: 0.0,
child: 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 Expanded(
child: 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),
),
],
),
),
],
),
));
}
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> with TickerProviderStateMixin {
final List<ChatMessage> _messages = <ChatMessage>[];
final TextEditingController _textController = new TextEditingController();
bool _isComposing = false;
@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) => _messages[index],
itemCount: _messages.length,
),
),
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,
onChanged: (String text) {
setState(() {
_isComposing = text.length > 0;
});
},
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: _isComposing
? () => _handleSubmitted(_textController.text)
: null,
//onPressed: () => _handleSubmitted(_textController.text)
),
),
],
),
);
}
@override
void dispose() {
for (ChatMessage message in _messages)
message.animationController.dispose();
super.dispose();
}
void _handleSubmitted(String text) {
_textController.clear();
setState(() {
_isComposing = false;
});
ChatMessage message = new ChatMessage(
text: text,
animationController: new AnimationController(
duration: new Duration(milliseconds: 1500),
vsync: this,
),
);
setState(() {
_messages.insert(0, message);
});
message.animationController.forward();
}
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