mirror of https://github.com/flutter/samples.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
7.3 KiB
277 lines
7.3 KiB
6 years ago
|
import 'package:flutter/material.dart';
|
||
|
|
||
|
|
||
|
final ThemeData kIOSTheme = ThemeData(
|
||
|
primarySwatch: Colors.orange,
|
||
|
primaryColor: Colors.grey[100],
|
||
|
primaryColorBrightness: Brightness.light
|
||
|
);
|
||
|
final ThemeData kDefaultTheme = ThemeData(
|
||
|
primarySwatch: Colors.purple,
|
||
|
accentColor: Colors.orangeAccent
|
||
|
);
|
||
|
void main() {
|
||
|
runApp(FriendlychatApp());
|
||
|
}
|
||
|
|
||
|
class FriendlychatApp extends StatelessWidget {
|
||
|
final String name = 'Kenneth Ford';
|
||
|
|
||
|
@override
|
||
|
Widget build(BuildContext build) {
|
||
|
return MaterialApp(
|
||
|
title: 'Friendlychat',
|
||
|
theme: Theme.of(build).platform == TargetPlatform.iOS ? kIOSTheme : kDefaultTheme,
|
||
|
home: ChatAppHomePage(title: 'Friendlychat'),
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class ChatAppHomePage extends StatefulWidget {
|
||
|
ChatAppHomePage({Key key, this.title}) : super(key: key);
|
||
|
|
||
|
final String title;
|
||
|
|
||
|
|
||
|
@override
|
||
|
_ChatAppHomePageState createState() => _ChatAppHomePageState();
|
||
|
}
|
||
|
|
||
|
class _ChatAppHomePageState extends State<ChatAppHomePage> {
|
||
|
final List<ChatListEntry> chats = List<ChatListEntry>();
|
||
|
|
||
|
@override
|
||
|
Widget build(BuildContext context) {
|
||
|
return Scaffold(
|
||
|
appBar: AppBar(
|
||
|
title: Text(widget.title),
|
||
|
),
|
||
|
// Use LayoutBuilder to determine which layout to use.
|
||
|
// 500 is an arbitray number for this example. Adjust
|
||
|
// accordingly based on your needs.
|
||
|
body: LayoutBuilder(
|
||
|
builder: (context, constraints) {
|
||
|
final double width = constraints.maxWidth;
|
||
|
debugPrint('width: $width');
|
||
|
if (constraints.maxWidth > 800)
|
||
|
return TwoPaneChatLayout(chatEntries: chats);
|
||
|
else
|
||
|
return ChatListScreen(chatEntries: chats);
|
||
|
},
|
||
|
),
|
||
|
);
|
||
|
}
|
||
|
|
||
|
@override
|
||
|
void initState() {
|
||
|
chats.add(ChatListEntry("Person 1"));
|
||
|
chats.add(ChatListEntry("Person 2"));
|
||
|
chats.add(ChatListEntry("Person 3"));
|
||
|
super.initState();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Code layout in row
|
||
|
class TwoPaneChatLayout extends StatelessWidget {
|
||
|
final List<ChatListEntry> chatEntries;
|
||
|
|
||
|
TwoPaneChatLayout({Key key, @required this.chatEntries}) : super(key: key);
|
||
|
|
||
|
@override
|
||
|
Widget build(BuildContext context) {
|
||
|
return Row(
|
||
|
children: <Widget>[
|
||
|
Container(
|
||
|
child: ChatListScreen(chatEntries: chatEntries),
|
||
|
constraints: BoxConstraints(minWidth: 100, maxWidth: 300),
|
||
|
),
|
||
|
VerticalDivider(),
|
||
|
Flexible(
|
||
|
child: ChatScreen(contactName: chatEntries[0].name),
|
||
|
)
|
||
|
],
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class ChatListScreen extends StatelessWidget {
|
||
|
final List<ChatListEntry> chatEntries;
|
||
|
|
||
|
ChatListScreen({Key key, @required this.chatEntries}) : super(key: key);
|
||
|
|
||
|
@override
|
||
|
Widget build(BuildContext context) {
|
||
|
return Scaffold(
|
||
|
body: ListView.builder(
|
||
|
itemCount: chatEntries.length,
|
||
|
itemBuilder: (context, index) {
|
||
|
return ListTile(
|
||
|
leading: CircleAvatar(
|
||
|
child: Text(chatEntries[index].name[0])
|
||
|
),
|
||
|
title: Text(chatEntries[index].name),
|
||
|
onTap: () {
|
||
|
Navigator.push(
|
||
|
context,
|
||
|
MaterialPageRoute(
|
||
|
builder: (context) => ChatScreen(
|
||
|
contactName: chatEntries[index].name
|
||
|
),
|
||
|
),
|
||
|
);
|
||
|
},
|
||
|
);
|
||
|
}
|
||
|
),
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class ChatScreen extends StatefulWidget {
|
||
|
final String contactName;
|
||
|
|
||
|
ChatScreen({Key key, @required this.contactName}) : super(key: key);
|
||
|
@override
|
||
|
State<StatefulWidget> createState() {
|
||
|
return ChatScreenState(contactName: contactName);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
|
||
|
final TextEditingController _textController = TextEditingController();
|
||
|
final List<ChatMessage> _messages = <ChatMessage>[];
|
||
|
final String contactName;
|
||
|
|
||
|
ChatScreenState({@required this.contactName}) : super();
|
||
|
|
||
|
bool _isComposing = false;
|
||
|
@override
|
||
|
Widget build(BuildContext context) {
|
||
|
return Scaffold(
|
||
|
body: Column(
|
||
|
children: <Widget>[
|
||
|
Flexible(
|
||
|
child: ListView.builder(
|
||
|
padding: EdgeInsets.all(8.0),
|
||
|
reverse: true,
|
||
|
itemBuilder: (_, int index) => _messages[index],
|
||
|
itemCount: _messages.length,
|
||
|
)
|
||
|
),
|
||
|
Divider(height: 1.0),
|
||
|
Container(
|
||
|
decoration: BoxDecoration(color: Theme.of(context).cardColor),
|
||
|
child: _buildTextComposer(),
|
||
|
)
|
||
|
],
|
||
|
)
|
||
|
);
|
||
|
}
|
||
|
|
||
|
@override
|
||
|
void dispose() {
|
||
|
for (ChatMessage message in _messages) {
|
||
|
message.animationController.dispose();
|
||
|
}
|
||
|
super.dispose();
|
||
|
}
|
||
|
|
||
|
Widget _buildTextComposer() {
|
||
|
return IconTheme(
|
||
|
data: IconThemeData(color: Theme.of(context).accentColor),
|
||
|
child: Container(
|
||
|
margin: const EdgeInsets.symmetric(horizontal: 8.0),
|
||
|
child: Row(
|
||
|
children: <Widget>[
|
||
|
Flexible(
|
||
|
child: TextField(
|
||
|
controller: _textController,
|
||
|
onSubmitted: _handleSubmitted,
|
||
|
decoration: InputDecoration.collapsed(hintText: "Send a message"),
|
||
|
onChanged: (String text) {
|
||
|
setState(() {
|
||
|
_isComposing = text.length > 0;
|
||
|
});
|
||
|
},
|
||
|
)
|
||
|
),
|
||
|
Container(
|
||
|
margin: EdgeInsets.symmetric(horizontal: 4.0),
|
||
|
child: IconButton( //modified
|
||
|
icon: Icon(Icons.send),
|
||
|
onPressed: _isComposing ?
|
||
|
() => _handleSubmitted(_textController.text) : null,
|
||
|
)
|
||
|
)
|
||
|
],
|
||
|
)
|
||
|
)
|
||
|
);
|
||
|
}
|
||
|
|
||
|
void _handleSubmitted (String text) {
|
||
|
_textController.clear();
|
||
|
setState(() {
|
||
|
_isComposing = false;
|
||
|
});
|
||
|
ChatMessage message = ChatMessage(
|
||
|
text: text,
|
||
|
animationController: AnimationController(
|
||
|
duration: Duration(milliseconds: 200),
|
||
|
vsync: this
|
||
|
),
|
||
|
name: contactName,
|
||
|
);
|
||
|
setState(() {
|
||
|
_messages.insert(0, message);
|
||
|
});
|
||
|
message.animationController.forward();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class ChatMessage extends StatelessWidget {
|
||
|
ChatMessage({this.text, this.animationController, this.name});
|
||
|
final String text;
|
||
|
final AnimationController animationController;
|
||
|
final String name;
|
||
|
@override
|
||
|
Widget build(BuildContext context) {
|
||
|
return SizeTransition(
|
||
|
sizeFactor: CurvedAnimation(
|
||
|
parent: animationController,
|
||
|
curve: Curves.easeOut
|
||
|
),
|
||
|
axisAlignment: 0.0,
|
||
|
child: Container(
|
||
|
margin: const EdgeInsets.symmetric(vertical: 10.0),
|
||
|
child: Row(
|
||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||
|
children: <Widget>[
|
||
|
Container(
|
||
|
margin: const EdgeInsets.only(right: 16.0),
|
||
|
child: CircleAvatar(child: Text(name[0])),
|
||
|
),
|
||
|
Expanded(
|
||
|
child: Column(
|
||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||
|
children: <Widget>[
|
||
|
Text(name, style: Theme.of(context).textTheme.subhead),
|
||
|
Container(
|
||
|
margin: const EdgeInsets.only(top: 5.0),
|
||
|
child: Text(text),
|
||
|
)
|
||
|
],
|
||
|
),
|
||
|
)
|
||
|
],
|
||
|
),
|
||
|
)
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
class ChatListEntry {
|
||
|
final String name;
|
||
|
|
||
|
ChatListEntry(this.name);
|
||
|
}
|