Tampilan Chat UI Flutter. 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, Tampilan Halaman Grid View List Product Flutter, Flutter Vertical dan Horizontal Scoll Design, Tampilan Profile Flutter
1. Buat sebuah project baru flutter lalu copy script di bawah ini di dalam 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: 'Ketik pesan...',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
contentPadding: const EdgeInsets.symmetric(
vertical:
12.0, // Atur ukuran tinggi form input di sini
horizontal:
16.0, // Atur ukuran lebar form input di sini
),
),
),
),
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',
),
),
),
],
),
],
),
],
),
);
}
}Penjelasan Script di atas:
- Impor Paket Flutter: Pada baris kode ini, kita mengimpor paket atau library yang diperlukan dari Flutter untuk membangun antarmuka pengguna (UI) aplikasi.
- Fungsi main(): Ini adalah fungsi utama yang akan dieksekusi saat aplikasi dijalankan. Di dalamnya, kita menggunakan runApp() untuk menjalankan aplikasi. MaterialApp digunakan sebagai widget utama yang menyediakan kerangka dasar aplikasi Flutter. Properti yang diatur dalam MaterialApp adalah:debugShowCheckedModeBanner: Digunakan untuk menampilkan atau menyembunyikan label "Debug" di sudut kanan atas aplikasi.
- title: Digunakan untuk memberikan judul aplikasi.
- home: Mengarahkan ke widget ChatScreen() sebagai halaman utama aplikasi.
- Class ChatScreen: Ini adalah class yang mengimplementasikan widget StatelessWidget. Di dalamnya, kita mendefinisikan antarmuka pengguna menggunakan widget Scaffold. Scaffold adalah komponen dasar yang digunakan untuk mengatur tata letak aplikasi. Properti yang diatur dalam Scaffold adalah:appBar: Mengatur bilah atas aplikasi. Di dalamnya, terdapat widget AppBar dengan judul, gambar avatar, dan informasi pengguna.
- body: Mengatur konten utama aplikasi. Di dalamnya, terdapat widget Container yang berisi Column untuk menampilkan daftar ChatBubble.
- Class ChatBubble: Ini adalah class yang mengimplementasikan widget StatelessWidget. Di dalamnya, kita mendefinisikan tampilan balon chat dengan menggunakan widget Row. Tampilan balon chat terdiri dari beberapa elemen, seperti teks pesan, waktu, dan avatar pengirim.
2. Tampilan saat script di jalankan di emulator. Sederhana tapi terlihat mewah
dan profesional. Kita menggunakan beberapa widget seperti app bar, image
netwokr, text, container, textformfield, row, column dan lainnya.
|
| Flutter Chat UI |
| Baca Artikel Lain ✨ |
| 📰 1. Membuat Restful Api di Laravel Tanpa Library Tambahan Part 1 read more |
| 📰 2. Menampilkan Data dengan API dan Token di Laravel Part 2 read more |
|
📰 3. Cara Membuat Custom Registrasi dan Prosesnya di Laravel Part
1 read more |
|
📰 4. Cara Membuat Custom Login di Laravel Part 2 read more |
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi