Flutter UI Chat View. Flutter Chat UI. Professional Mobile Chat UI. Responsive Mobile Chat UI. Chat UI for Flutter. Android Mobile Chat. Simple and Elegant Mobile Chat UI. Flutter Starter Template. Flutter List View Simple Design, Flutter Login Design Fresh & Modern, Flutter News Grid Design, Flutter Product List Grid View Page View, Flutter Vertical and Horizontal Scoll Design, Flutter Profile View
1. Create a new flutter project then copy the script below in lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Chat UI',
home: ChatScreen(),
));
}
class ChatScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0.0,
leading: Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8),
child: Material(
shape: CircleBorder(),
child: CircleAvatar(
radius: 20.0,
backgroundImage: NetworkImage(
'https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_640.png',
),
),
),
),
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Mr. Jhon Due'),
Text(
'CEO of Porkaone',
style: TextStyle(fontSize: 10),
)
],
)),
body: Container(
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ChatBubble(
message: 'Lorem ipusm sit dolor amet consectur',
isMe: index % 2 == 0 ? true : false,
);
},
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
children: [
Expanded(
child: TextField(
style: const TextStyle(fontSize: 16.0),
decoration: InputDecoration(
hintText: 'Type Message...',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
contentPadding: const EdgeInsets.symmetric(
vertical:
12.0,
horizontal:
16.0,
),
),
),
),
const SizedBox(width: 10.0),
Container(
width: 45.0,
height: 45.0,
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.send),
),
),
SizedBox(
width: 5,
),
Container(
width: 45.0,
height: 45.0,
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.camera_alt_outlined)),
)
],
),
),
],
),
),
);
}
}
class ChatBubble extends StatelessWidget {
final String message;
final bool isMe;
ChatBubble({required this.message, required this.isMe});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 10.0),
child: Row(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
Column(
crossAxisAlignment:
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width *
0.5, // Maksimal setengah lebar layar
),
child: Container(
padding: const EdgeInsets.all(12.0),
decoration: BoxDecoration(
color: isMe ? Colors.blue : Colors.grey[300],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
bottomLeft: Radius.circular(isMe ? 16 : 0),
bottomRight: Radius.circular(isMe ? 0 : 16),
),
),
child: Column(
crossAxisAlignment: isMe
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
Wrap(
alignment: WrapAlignment.start,
children: [
Text(
message,
style: TextStyle(
color: isMe ? Colors.white : Colors.black,
fontSize: 16.0,
),
),
],
),
],
),
),
),
SizedBox(
height: 5,
),
Row(
children: [
if (!isMe)
Padding(
padding: const EdgeInsets.only(right: 5),
child: CircleAvatar(
radius: 10.0, // Mengatur ukuran lingkaran avatar
backgroundImage: NetworkImage(
'https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_640.png',
),
),
),
Column(
crossAxisAlignment: isMe
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
Text(
'Monday 20 Mei 2023 15:31',
style: TextStyle(fontSize: 9),
),
Text(
'Nabil Putra',
style:
TextStyle(fontSize: 9, fontWeight: FontWeight.w500),
),
],
),
if (isMe)
Padding(
padding: const EdgeInsets.only(left: 5),
child: CircleAvatar(
radius: 10.0, // Mengatur ukuran lingkaran avatar
backgroundImage: NetworkImage(
'https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_640.png',
),
),
),
],
),
],
),
],
),
);
}
}Explanation of the script above:
- Import Flutter Packages: In this line of code, we import the necessary packages or libraries from Flutter to build the user interface (UI) of the application.
- main() function: This is the main function that will be executed when the application starts. In it, we use runApp() to run the application. MaterialApp is used as the main widget that provides the basic framework of the Flutter application. The properties set in MaterialApp are: debugShowCheckedModeBanner: Used to show or hide the "Debug" label in the top right corner of the application.
- title: Used to provide the title of the application.
- home: Directs to the ChatScreen() widget as the main page of the application.
- ChatScreen Class: This is a class that implements the StatelessWidget widget. In it, we define the user interface using the Scaffold widget. Scaffold is the basic component used to organize the application layout. The properties set in Scaffold are: appBar: Sets the top bar of the application. Inside, there is an AppBar widget with a title, avatar image and user information.
- body: Sets the main content of the application. In it, there is a Container widget which contains a Column to display the ChatBubble list.
- Class ChatBubble: This is a class that implements the StatelessWidget widget. In it, we define the appearance of the chat balloon using the Row widget. The chat balloon display consists of several elements, such as message text, time, and sender's avatar.
Overall, this script builds a user interface (UI) for a simple chat
application. This includes a chat list view and the ability for users to
send new messages via text input and the send button.
2. Display when the script is run in the emulator. Simple but looks
luxurious and professional. We use several widgets such as app bar, network
image, text, container, textformfield, row, column and others.
|
| Flutter Chat UI |
0 Comments
Come on ask us and let's discuss together
Emoji