import 'package:flutter/material.

dart';

void main() {
runApp(MyApp());
}

class Contact {
final String name;
final String profileImage;
final String lastMessage;

const Contact({
required this.name,
required this.profileImage,
required this.lastMessage,
});
}

class MyApp extends StatelessWidget {

final List<Contact> contacts = const [
Contact(
name: 'Alice',
profileImage:
'https://randomuser.me/api/portraits/women/24.jpg',
lastMessage: 'Hey, what\'s up?',
),
Contact(
name: 'Bob',
profileImage:
'https://randomuser.me/api/portraits/men/21.jpg',
lastMessage: 'How\'s it going?',
),
Contact(
name: 'Charlie',
profileImage:
'https://randomuser.me/api/portraits/men/23.jpg',
lastMessage: 'Long time no see.',
),
];

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Chat App',
home: Scaffold(
appBar: AppBar(
title: Text('Chat App'),
),
body: ListView.builder(
itemCount: contacts.length,
itemBuilder: (BuildContext context, int index) {
final contact = contacts[index];
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(contact.profileImage),
),
title: Text(contact.name),
subtitle: Text(contact.lastMessage),
onTap: () {
 Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ChatScreen(contact: contact),
),
);
},
);
},
),
),
);
}
}

class ChatScreen extends StatefulWidget {

final Contact contact;

const ChatScreen({required this.contact});

@override
_ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {

final TextEditingController _textController = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: BackButton(
onPressed: () {
Navigator.pop(context);
},
),
title: Text(widget.contact.name),
),
body: Column(
children: [
Expanded(
child: ListView(
children: [
_buildMessage('Hey, what\'s up?', true),
_buildMessage('Not much, how about you?', false),
_buildMessage('Same old, same old.', true),
_buildMessage('Cool.', false),
],
),
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(25.0),
),
child: Row(
children: [
Expanded(
 child: Padding(
padding: const EdgeInsets.only(left: 16.0),
child: TextField(
controller: _textController,
decoration: InputDecoration.collapsed(
hintText: 'Send a message...',
),
),
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: () {
if (_textController.text.isNotEmpty) {
setState(() {
// TODO: add logic to send message
_textController.clear();
});
}
},
),
],
),
),
],
),
);
}
Widget _buildMessage(String text, bool isMe) {
return Align(
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: isMe ? Colors.blue : Colors.grey[300],
borderRadius: BorderRadius.circular(16.0),
),
child: Text(
text,
style: TextStyle(fontSize: 16.0),
),
),
);
}
}