Membuat Tampilan Sederhana & Eksperimen
Laporan Tugas Flutter: Implementasi UI Sederhana Menggunakan Column dan Row
Identitas
Nama: Mochammad Alfin Fauzan
Mata Pelajaran: Pemrograman Mobile / Flutter
Pendahuluan
Flutter merupakan framework UI open-source dari Google yang digunakan untuk membangun aplikasi mobile dengan tampilan menarik dan responsif. Pada tugas ini, dilakukan pembuatan dua jenis tampilan antarmuka (UI) sederhana menggunakan Flutter, yaitu tampilan vertikal menggunakan Column dan tampilan horizontal menggunakan Row dengan tambahan efek visual seperti gradient dan icon.
Tujuan
Tujuan dari pembuatan tugas ini adalah:
Memahami struktur dasar project Flutter.
Mengimplementasikan widget
AppBar,Column, danRow.Membuat tampilan UI vertikal dan horizontal.
Menerapkan styling sederhana seperti warna, gradient, icon, dan alignment.
Membandingkan dua jenis tampilan UI dalam Flutter.
Alat dan Bahan
Software: Flutter SDK, Android Studio / Visual Studio Code
Bahasa Pemrograman: Dart
Library: Flutter Material
Langkah-langkah Pengerjaan
1. Pembuatan Project Flutter
Membuat project Flutter baru menggunakan perintah
flutter create.Mengatur file
main.dartsebagai file utama aplikasi.
2. Pembuatan Widget Utama
Membuat class
MyAppsebagai root widget.Menggunakan
MaterialAppdengandebugShowCheckedModeBanner: falseagar tampilan lebih bersih.
3. Pembuatan Halaman Utama
Membuat class
HomePagesebagai halaman utama.Menambahkan
AppBardengan judul nama dan warna khusus.
Implementasi Program
A. Tampilan Vertikal Sederhana (Column)
Tampilan ini merupakan versi paling sederhana dan dijadikan sebagai implementasi awal. Widget Column digunakan untuk menyusun beberapa card teks secara vertikal. Semua card memiliki ukuran lebar yang sama agar tampilan seragam dan mudah dipahami oleh pemula.
Fitur utama:
AppBar berwarna coklat gelap.
Tiga card teks tersusun vertikal.
Lebar card tetap (250).
Teks rata tengah dan mudah dibaca.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
final Color appBarColor = Color.fromARGB(255, 100, 0, 22);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: appBarColor,
title: Text('Mochammad Alfin Fauzan', style: TextStyle(color: Colors.white)),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildCard('Halo'),
SizedBox(height: 12),
_buildCard('Belajar Flutter'),
SizedBox(height: 12),
_buildCard('Hari ini mendong'),
],
),
),
);
}
Widget _buildCard(String text) {
return Container(
width: 250,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
color: Colors.grey[400],
alignment: Alignment.center,
child: Text(
text,
style: TextStyle(color: Colors.black, fontSize: 18, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
);
}
}
B. Tampilan Horizontal dengan Gradient dan Icon (Row)
Tampilan ini merupakan pengembangan dari tampilan sederhana. Widget Row dan SingleChildScrollView digunakan untuk menampilkan card secara horizontal. Ditambahkan efek gradient, icon, dan shadow agar tampilan lebih modern dan menarik.
Fitur utama:
AppBar berwarna navy gelap.
Background menggunakan gradient.
Card tersusun horizontal dan dapat di-scroll.
Setiap card memiliki icon dan efek bayangan.
### B. Tampilan Horizontal dengan Gradient dan Icon (Row)
Tampilan ini menggunakan widget `Row` dan `SingleChildScrollView` horizontal untuk menampilkan card secara menyamping. Ditambahkan efek gradient, icon, dan shadow agar tampilan lebih modern.
**Fitur utama:**
- AppBar berwarna navy gelap.
- Background menggunakan gradient.
- Card tersusun horizontal dan dapat di-scroll.
- Setiap card memiliki icon dan efek bayangan.
```dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
final Color appBarColor = Color(0xFF001F54);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: appBarColor,
title: Text('Mochammad Alfin Fauzan', style: TextStyle(color: Colors.white)),
centerTitle: true,
),
body: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF001F54), Color(0xFF3A6EA5)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
_buildCard('Halo', Color(0xFF001F54), Color(0xFF3A6EA5), Icons.emoji_people),
SizedBox(width: 12),
_buildCard('Belajar Flutter', Color(0xFF003366), Color(0xFF336699), Icons.menu_book),
SizedBox(width: 12),
_buildCard('Hari ini mendung', Color(0xFF004080), Color(0xFF6699CC), Icons.chat),
],
),
),
),
),
);
}
Widget _buildCard(String text, Color startColor, Color endColor, IconData icon) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [startColor, endColor],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(25),
boxShadow: [
BoxShadow(color: startColor.withOpacity(0.5), blurRadius: 12, offset: Offset(0, 6)),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, color: Colors.white, size: 28),
SizedBox(width: 16),
Text(text, style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)),
],
),
);
}
}
Hasil yang Dicapai
Aplikasi berhasil dijalankan tanpa error.
Tampilan vertikal dan horizontal dapat ditampilkan dengan baik.
UI terlihat rapi, konsisten, dan mudah dibaca.
Penggunaan gradient dan icon membuat tampilan lebih menarik.
Kesimpulan
Dari tugas ini dapat disimpulkan bahwa Flutter sangat fleksibel dalam pembuatan antarmuka pengguna. Dengan widget sederhana seperti Column, Row, dan Container, dapat dibuat berbagai variasi tampilan UI. Penambahan styling seperti warna, gradient, dan icon mampu meningkatkan kualitas visual aplikasi secara signifikan.
Komentar
Posting Komentar