create your flutter project
flutter create chat_appadd following packages in your pubspec.yaml
cupertino_icons: ^1.0.6
smooth_page_indicator: ^1.1.0
image_picker: ^1.1.2
get: ^4.6.6main.dart
import 'package:chat_app/chat_room.dart';
import 'package:chat_app/chat_screen.dart';
import 'package:chat_app/chat_screen2.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'first_screen.dart';
import 'second_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Chat UI',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const HomePage(),
);
}
}
create widgets folder under your lib folder
create build_container.dart under lib>>widgets
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class BuildContainer extends StatelessWidget {
final Color? startColor;
final Color? endColor;
final String? text;
final String? imagePath;
const BuildContainer(
{super.key, this.startColor, this.endColor, this.text, this.imagePath});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 9),
width: MediaQuery.of(context).size.width * 0.8,
height: 150,
decoration: BoxDecoration(
image:
DecorationImage(image: AssetImage(imagePath!), fit: BoxFit.cover),
gradient: LinearGradient(
colors: [startColor!, endColor!],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
// image: DecorationImage(
// image: AssetImage(imagePath),
// fit: BoxFit.cover
// ),
borderRadius: const BorderRadius.all(
Radius.circular(35),
),
),
child: Column(
children: [
const SizedBox(
height: 70,
),
Padding(
padding: const EdgeInsets.only(
left: 2,
),
child: Text(
text!,
style: const TextStyle(color: Colors.white, fontSize: 15),
),
),
Align(
alignment: Alignment.bottomRight,
child: IconButton(
onPressed: () {},
icon: const Icon(
Icons.favorite,
color: Colors.white,
),
),
)
],
),
);
}
}
// Container buildContainer(
// Color startColor,
// Color endColor,
// String? text,
// ) {
//
// }
create custom_button.dart under lib>> widgets
import 'package:flutter/material.dart';
class CustomButton extends StatelessWidget {
final Color? bgColor;
final String? text;
final Function onPressed;
const CustomButton({
super.key,
this.bgColor,
this.text,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {},
child: Text(
text!,
style: TextStyle(color: Colors.black),
),
);
}
}
create list_tile.dart under lib>> widgets
import 'package:flutter/material.dart';
ListTile buildListTile(
String imagePath, String title, String subtitle, String trailing,
{String? notificationCount}) {
return ListTile(
leading: Stack(
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(imagePath),
fit: BoxFit.cover,
),
),
),
if (notificationCount != null)
Positioned(
right: 10,
top: 0,
bottom: 15,
child: Container(
padding: const EdgeInsets.all(3),
decoration: const BoxDecoration(
color: Color(0xff414756),
shape: BoxShape.circle,
),
constraints: const BoxConstraints(
minWidth: 18,
minHeight: 18,
),
child: Center(
child: Text(
notificationCount,
style: const TextStyle(
color: Colors.white,
fontSize: 15,
),
textAlign: TextAlign.right,
),
),
),
),
],
),
title: Text(
title,
style: const TextStyle(color: Colors.white),
),
subtitle: Text(
subtitle,
style: const TextStyle(color: Colors.white70),
),
trailing: Text(
trailing,
style: const TextStyle(color: Colors.white),
),
);
}
create received_message.dart under lib>>widgets
import 'package:flutter/material.dart';
import '../chat_screen.dart';
import '../message_class.dart';
class ReceivedMessageWidget extends StatelessWidget {
final Message message;
const ReceivedMessageWidget({Key? key, required this.message})
: super(key: key);
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.centerLeft,
child: Container(
margin: const EdgeInsets.symmetric(vertical: 5),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: const Color(0xff373e4e),
borderRadius: BorderRadius.circular(18),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
message.content,
style: const TextStyle(color: Colors.white),
),
Text(
message.msg!,
style: const TextStyle(color: Colors.white, fontSize: 10),
),
],
),
),
);
}
}
create sent_message.dart under lib>>widgets
import 'package:flutter/material.dart';
import '../message_class.dart';
class SentMessageWidget extends StatelessWidget {
final Message message;
const SentMessageWidget({Key? key, required this.message}) : super(key: key);
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.centerRight,
child: Container(
margin: const EdgeInsets.symmetric(vertical: 5),
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: const Color(0xff272a35),
borderRadius: BorderRadius.circular(18),
),
child: Text(
message.content,
style: const TextStyle(color: Colors.white),
),
),
);
}
}
create chat_room.dart in lib folder
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import 'message_class.dart';
import 'widgets/received_message.dart';
import 'widgets/sent_message.dart';
class ChatRoom extends StatefulWidget {
const ChatRoom({super.key});
@override
State<ChatRoom> createState() => _ChatRoomState();
}
class _ChatRoomState extends State<ChatRoom> {
List<Message> messages = [
Message(content: "Coders ICU", isSent: false, msg: "hello"),
Message(content: "Hi, how are you?", isSent: true),
Message(content: "Coders ICU", isSent: false, msg: "hello"),
Message(content: "Hi, how are you?", isSent: true),
Message(content: "Coders ICU", isSent: false, msg: "hello"),
Message(content: "Hi, how are you?", isSent: true),
Message(content: "Coders ICU", isSent: false, msg: "hello"),
Message(content: "Hi, how are you?", isSent: true),
];
File? _selectedImage;
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: const Color(0xff292f3f),
appBar: AppBar(
backgroundColor: const Color(0xff292f3f),
titleTextStyle: const TextStyle(color: Colors.white, fontSize: 20),
title: const Text('Chat Room'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Padding(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: Row(
children: [
SizedBox(width: 10),
CircleAvatar(
backgroundImage: AssetImage("assets/pic1.jpg"),
),
SizedBox(width: 5),
CircleAvatar(
backgroundImage: AssetImage("assets/pic2.jpg"),
),
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
],
),
SizedBox(width: 10),
],
),
),
const Center(
child: Text(
'12:30 PM',
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
Expanded(
child: ListView.builder(
itemCount: messages.length,
itemBuilder: (context, index) {
return messages[index].isSent
? SentMessageWidget(message: messages[index])
: ReceivedMessageWidget(message: messages[index]);
},
),
),
Padding(
padding: const EdgeInsets.only(left: 18.0, right: 18, bottom: 10),
child: Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: 'Write a message...',
hintStyle: const TextStyle(color: Colors.white),
filled: true,
fillColor: const Color(0xff1f232f),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
suffixIcon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.message,
color: Colors.white,
size: 25,
),
),
),
),
),
const SizedBox(width: 5),
FloatingActionButton(
onPressed: () {
_pickImageFromGallery();
},
backgroundColor: const Color(0xff00ac83),
child: const Icon(
Icons.camera_alt_rounded,
color: Colors.white,
),
),
],
),
),
],
),
);
}
Future _pickImageFromGallery() async {
final returnedImage =
await ImagePicker().pickImage(source: ImageSource.gallery);
setState(() {
_selectedImage = File(returnedImage!.path);
});
}
}
create chat_screen.dart in lib folder
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import 'message_class.dart';
import 'widgets/received_message.dart';
import 'widgets/sent_message.dart';
class ChatScreen extends StatefulWidget {
const ChatScreen({super.key});
@override
State<ChatScreen> createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
List<Message> messages = [
Message(content: "Coders ICU", isSent: false, msg: "hello"),
Message(
content: "Hi, how are you?",
isSent: true,
),
Message(content: "Coders ICU", isSent: false, msg: "hello"),
Message(content: "Hi, how are you?", isSent: true),
Message(content: "Coders ICU", isSent: false, msg: "hello"),
Message(content: "Hi, how are you?", isSent: true),
Message(content: "Coders ICU", isSent: false, msg: "hello"),
Message(content: "Hi, how are you?", isSent: true),
];
File? _selectedImage;
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: const Color(0xff292f3f),
appBar: AppBar(
backgroundColor: const Color(0xff292f3f),
titleTextStyle: const TextStyle(color: Colors.white, fontSize: 20),
title: const Text('Chat Screen'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Column(
children: [
Row(
children: [
SizedBox(
width: 10,
),
CircleAvatar(
backgroundImage: AssetImage("assets/pic1.jpg"),
),
SizedBox(
width: 5,
),
CircleAvatar(
backgroundImage: AssetImage("assets/pic2.jpg"),
),
SizedBox(
width: 200,
),
Column(
children: [
// Username will be shown here
Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
],
)
],
),
],
),
const Center(
child: Text(
'12:30 PM',
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
Expanded(
child: ListView.builder(
itemCount: messages.length,
itemBuilder: (context, index) {
return messages[index].isSent
? SentMessageWidget(message: messages[index])
: ReceivedMessageWidget(message: messages[index]);
},
),
),
Padding(
padding: const EdgeInsets.only(left: 18.0, right: 18, bottom: 10),
child: Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: 'Write a message...',
hintStyle: const TextStyle(color: Colors.white),
filled: true,
fillColor: const Color(0xff1f232f),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
suffixIcon: IconButton(
onPressed: () {},
icon: const Icon(
Icons.message,
color: Colors.white,
size: 25,
),
),
),
),
),
const SizedBox(
width: 5,
),
FloatingActionButton(
onPressed: () {
_pickImageFromGallery();
},
backgroundColor: const Color(0xff00ac83),
child: const Icon(
Icons.camera_alt_rounded,
color: Colors.white,
),
),
],
),
),
],
),
);
}
Future _pickImageFromGallery() async {
final returnedImage =
await ImagePicker().pickImage(source: ImageSource.gallery);
setState(() {
_selectedImage = File(returnedImage!.path);
});
}
}
create chat_screen2.dart in lib folder
import 'package:chat_app/chat_screen.dart';
import 'package:chat_app/chat_screen2.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'widgets/custom_button.dart';
class ChatRoomTwo extends StatelessWidget {
const ChatRoomTwo({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xff292f3f),
appBar: AppBar(
backgroundColor: const Color(0xff292f3f),
title: const Text('Chatroom'),
titleTextStyle: const TextStyle(color: Colors.white, fontSize: 20),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: SizedBox(
height: 45,
child: CustomButton(
onPressed: () {
Get.to(const ChatScreen());
},
text: "New User",
),
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 2,
child: SizedBox(
height: 45,
child: CustomButton(
onPressed: () {},
text: "Delete Chatroom",
bgColor: const Color(0xfff18303),
),
),
),
const SizedBox(
width: 10,
),
],
),
const SizedBox(
height: 15,
),
const Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text(
"Team",
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
const SizedBox(
height: 10,
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18.0),
child: CircleAvatar(
backgroundImage: AssetImage("assets/pic2.jpg"),
),
),
Padding(
padding: EdgeInsets.only(right: 18.0),
child: Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
],
),
const SizedBox(
height: 10,
),
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff373e4e),
text: 'full access',
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff7a8194),
text: 'Regular Access',
),
),
const SizedBox(
width: 10,
),
FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff373e4e),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.delete,
color: Colors.red,
),
),
const SizedBox(
width: 10,
),
],
),
const SizedBox(
height: 5,
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18.0),
child: CircleAvatar(
backgroundImage: AssetImage("assets/pic1.jpg"),
),
),
Padding(
padding: EdgeInsets.only(right: 18.0),
child: Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
],
),
const SizedBox(
height: 5,
),
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
child: CustomButton(
onPressed: () {
Get.to(const ChatScreen());
},
bgColor: const Color(0xff373e4e),
text: 'full access',
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff7a8194),
text: 'regular access',
),
),
const SizedBox(
width: 10,
),
FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff373e4e),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.delete,
color: Colors.red,
),
),
const SizedBox(
width: 10,
),
],
),
const SizedBox(
height: 5,
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18.0),
child: CircleAvatar(
backgroundImage: AssetImage("assets/pic3.jpg"),
),
),
Padding(
padding: EdgeInsets.only(right: 18.0),
child: Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
],
),
const SizedBox(
height: 5,
),
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff373e4e),
text: 'full access',
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff7a8194),
text: 'regular access',
),
),
const SizedBox(
width: 10,
),
FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff373e4e),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.delete,
color: Colors.red,
),
),
const SizedBox(
width: 10,
),
],
),
const SizedBox(
height: 5,
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18.0),
child: CircleAvatar(
backgroundImage: AssetImage("assets/pic1.jpg"),
),
),
Padding(
padding: EdgeInsets.only(right: 18.0),
child: Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
],
),
const SizedBox(
height: 5,
),
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff373e4e),
text: 'full access',
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff7a8194),
text: 'regular access',
),
),
const SizedBox(
width: 10,
),
FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff373e4e),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.delete,
color: Colors.red,
),
),
const SizedBox(
width: 10,
),
],
),
const SizedBox(
height: 5,
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18.0),
child: CircleAvatar(
backgroundImage: AssetImage("assets/pic2.jpg"),
),
),
Padding(
padding: EdgeInsets.only(right: 18.0),
child: Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
],
),
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff373e4e),
text: 'full access',
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff7a8194),
text: 'regular access',
),
),
const SizedBox(
width: 10,
),
FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff373e4e),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.delete,
color: Colors.red,
),
),
const SizedBox(
width: 10,
),
],
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18.0),
child: CircleAvatar(
backgroundImage: AssetImage("assets/pic1.jpg"),
),
),
Padding(
padding: EdgeInsets.only(right: 18.0),
child: Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
],
),
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff373e4e),
text: 'full access',
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff7a8194),
text: 'regular access',
),
),
const SizedBox(
width: 10,
),
FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff373e4e),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.delete,
color: Colors.red,
),
),
const SizedBox(
width: 10,
),
],
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18.0),
child: CircleAvatar(
backgroundImage: AssetImage("assets/pic1.jpg"),
),
),
Padding(
padding: EdgeInsets.only(right: 18.0),
child: Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
],
),
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff373e4e),
text: 'full access',
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff7a8194),
text: 'regular access',
),
),
const SizedBox(
width: 10,
),
FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff373e4e),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.delete,
color: Colors.red,
),
),
const SizedBox(
width: 10,
),
],
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18.0),
child: CircleAvatar(
backgroundImage: AssetImage("assets/pic1.jpg"),
),
),
Padding(
padding: EdgeInsets.only(right: 18.0),
child: Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
],
),
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff373e4e),
text: 'full access',
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff7a8194),
text: 'regular access',
),
),
const SizedBox(
width: 10,
),
FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff373e4e),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.delete,
color: Colors.red,
),
),
const SizedBox(
width: 10,
),
],
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.only(left: 18.0),
child: CircleAvatar(
backgroundImage: AssetImage("assets/pic1.jpg"),
),
),
Padding(
padding: EdgeInsets.only(right: 18.0),
child: Text(
"Coders ICU",
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
],
),
Row(
children: [
const SizedBox(
width: 10,
),
Expanded(
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff373e4e),
text: 'full access',
),
),
const SizedBox(
width: 10,
),
Expanded(
flex: 1,
child: CustomButton(
onPressed: () {},
bgColor: const Color(0xff7a8194),
text: 'regular access',
),
),
const SizedBox(
width: 10,
),
FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff373e4e),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.red,
),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.delete,
color: Colors.red,
),
),
const SizedBox(
width: 10,
),
],
),
],
),
),
),
);
}
}
create first_screen.dart in lib folder
import 'package:chat_app/chat_room.dart';
import 'package:chat_app/chat_screen.dart';
import 'package:chat_app/chat_screen2.dart';
import 'package:chat_app/second_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:get/get.dart';
import 'widgets/build_container.dart';
import 'widgets/list_tile.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
final PageController controller = PageController(viewportFraction: 0.3);
final String? image;
return Scaffold(
backgroundColor: const Color(0xff292f3f),
appBar: AppBar(
backgroundColor: const Color(0xff292f3f),
title: const Text(
"Simple Chat UI",
style: TextStyle(color: Colors.white),
),
centerTitle: true,
leading: const Padding(
padding: EdgeInsets.only(left: 5.0),
child: CircleAvatar(
backgroundColor: Colors.black87,
),
),
),
body: LayoutBuilder(
builder: (context, constraints) {
double screenWidth = constraints.maxWidth;
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(18.0),
child: Row(
children: [
Expanded(
child: SizedBox(
height: 50,
child: TextField(
decoration: InputDecoration(
hintText: 'Search...',
hintStyle:
const TextStyle(color: Color(0xffa5a7ac)),
filled: true,
fillColor: const Color(0xff1f232f),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
suffixIcon: FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff565e70),
child: const Icon(
Icons.search,
color: Colors.white,
size: 25,
),
),
),
),
),
),
const SizedBox(width: 10),
Container(
width: 50,
height: 50,
margin: const EdgeInsets.only(right: 12),
child: FloatingActionButton(
onPressed: () {
Get.to(const ChatRoomTwo());
},
backgroundColor: const Color(0xff03a9f1),
child: const Icon(
Icons.add,
color: Colors.white,
),
),
),
],
),
),
const Padding(
padding: EdgeInsets.only(left: 15.0),
child: Text(
"Chatrooms",
style: TextStyle(color: Colors.white, fontSize: 22),
),
),
const SizedBox(height: 10),
SizedBox(
height: 150,
child: PageView(
scrollDirection: Axis.horizontal,
padEnds: false,
controller: controller,
children: [
GestureDetector(
onTap: () {
Get.to(const SecondScreen());
},
child: const BuildContainer(
imagePath: "",
startColor: Colors.black,
endColor: Colors.yellow,
text: "Coders ICU",
),
),
const BuildContainer(
imagePath: "",
startColor: Colors.red,
endColor: Colors.yellow,
text: "Coders ICU",
),
const BuildContainer(
imagePath: "",
startColor: Colors.pink,
endColor: Colors.yellow,
text: "Coders ICU",
),
const BuildContainer(
imagePath: "",
startColor: Colors.white,
endColor: Colors.yellow,
text: "Coders ICU",
),
const BuildContainer(
imagePath: "",
startColor: Colors.blue,
endColor: Colors.yellow,
text: "Coders ICU",
)
],
),
),
const SizedBox(height: 10),
Center(
child: SmoothPageIndicator(
controller: controller,
count: 5,
effect: const WormEffect(
dotColor: Colors.grey,
activeDotColor: Colors.white,
dotHeight: 7,
dotWidth: 7,
),
),
),
Expanded(
child: ListView(
children: [
GestureDetector(
onTap: () {
Get.to(const ChatScreen());
},
child: buildListTile("assets/pic2.jpg", "Coders ICU",
"Flutter App", "12:00"),
),
buildListTile("assets/pic3.jpg", "Coders ICU",
"Flutter App", "12:00"),
buildListTile("assets/pic1.jpg", "Coders ICU",
"Flutter App", "12:00"),
buildListTile("assets/pic2.jpg", "Coders ICU",
"Flutter App", "12:00"),
buildListTile("assets/pic3.jpg", "Coders ICU",
"Flutter App", "12:00"),
buildListTile("assets/pic3.jpg", "Coders ICU",
"Flutter App", "12:00"),
buildListTile("assets/pic3.jpg", "Coders ICU",
"Flutter App", "12:00"),
buildListTile("assets/pic3.jpg", "Coders ICU",
"Flutter App", "12:00"),
buildListTile("assets/pic3.jpg", "Coders ICU",
"Flutter App", "12:00"),
],
),
),
],
);
},
),
);
}
}
create message_class.dart in lib folder
class Message {
final String content;
final String? msg;
final bool isSent;
Message({
required this.content,
required this.isSent,
this.msg,
});
}
create second_screen.dart in lib folder
import 'package:chat_app/chat_room.dart';
import 'package:chat_app/chat_screen2.dart';
import 'package:chat_app/first_screen.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'widgets/build_container.dart';
import 'widgets/list_tile.dart';
class SecondScreen extends StatefulWidget {
const SecondScreen({super.key});
@override
State<SecondScreen> createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
final PageController _controller = PageController(viewportFraction: 0.3);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xff292f3f),
appBar: AppBar(
backgroundColor: const Color(0xff292f3f),
title: const Text(
"Simple Chat UI",
style: TextStyle(color: Colors.white),
),
centerTitle: true,
leading: const Padding(
padding: EdgeInsets.only(left: 5.0),
child: CircleAvatar(
backgroundColor: Colors.black87,
),
),
actions: [
FloatingActionButton(
onPressed: () {
Get.to(const HomePage());
},
backgroundColor: Colors.transparent,
child: const Icon(Icons.arrow_back),
)
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 18, top: 18, bottom: 18, right: 5),
child: SizedBox(
height: 50,
width: 275,
child: TextField(
decoration: InputDecoration(
hintText: 'Search...',
hintStyle: const TextStyle(color: Color(0xffa5a7ac)),
filled: true,
fillColor: const Color(0xff1f232f),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
suffixIcon: FloatingActionButton(
onPressed: () {},
backgroundColor: const Color(0xff565e70),
child: const Icon(
Icons.search,
color: Colors.white,
size: 25,
),
),
),
),
),
),
),
Container(
width: 50,
height: 50,
margin: const EdgeInsets.only(right: 12),
child: FloatingActionButton(
onPressed: () {
Get.to(const ChatRoomTwo());
},
backgroundColor: const Color(0xff03a9f1),
child: const Icon(
Icons.add,
color: Colors.white,
),
),
),
],
),
const Padding(
padding: EdgeInsets.only(left: 15.0),
child: Text(
"Favourites",
style: TextStyle(color: Colors.white, fontSize: 22),
),
),
const SizedBox(
height: 10,
),
SizedBox(
height: 150,
child: PageView(
padEnds: false,
controller: _controller,
children: const [
BuildContainer(
startColor: Colors.red,
endColor: Colors.blue,
text: "Coders ICU",
imagePath: "assets/pic1.jpg",
),
BuildContainer(
startColor: Colors.red,
endColor: Colors.blue,
text: "Coders ICU",
imagePath: "assets/pic2.jpg",
),
BuildContainer(
startColor: Colors.blue,
endColor: Colors.blue,
text: "Coders ICU",
imagePath: "assets/pic3.jpg",
),
BuildContainer(
startColor: Colors.red,
endColor: Colors.yellow,
text: "Coders ICU",
imagePath: "assets/pic2.jpg",
),
BuildContainer(
startColor: Colors.red,
endColor: Colors.yellow,
text: "Coders ICU",
imagePath: "assets/pic2.jpg",
),
BuildContainer(
startColor: Colors.red,
endColor: Colors.yellow,
text: "Coders ICU",
imagePath: "assets/pic2.jpg",
),
BuildContainer(
startColor: Colors.red,
endColor: Colors.yellow,
text: "Coders ICU",
imagePath: "assets/pic2.jpg",
),
],
),
),
const SizedBox(height: 10),
Center(
child: SmoothPageIndicator(
controller: _controller,
count: 10,
effect: const WormEffect(
dotColor: Colors.grey,
activeDotColor: Colors.white,
dotHeight: 7,
dotWidth: 7,
),
),
),
Expanded(
child: ListView(
children: [
GestureDetector(
onTap: () {
Get.to(const ChatRoom());
},
child: buildListTile(
"assets/pic3.jpg", "Coders ICU", "Flutter App", "12:00",
notificationCount: '+5'),
),
buildListTile(
"assets/pic2.jpg", "Coders ICU", "Flutter App", "12:00"),
buildListTile(
"assets/pic3.jpg", "Coders ICU", "Flutter App", "12:00",
notificationCount: '+3'),
GestureDetector(
onTap: () {
Get.to(const ChatRoom());
},
child: buildListTile(
"assets/pic1.jpg", "Coders ICU", "Flutter App", "12:00",
notificationCount: '+22'),
),
buildListTile(
"assets/pic2.jpg", "Coders ICU", "Flutter App", "12:00"),
buildListTile(
"assets/pic2.jpg", "Coders ICU", "Flutter App", "12:00"),
buildListTile(
"assets/pic2.jpg", "Coders ICU", "Flutter App", "12:00"),
],
),
),
],
),
);
}
}
