Flutter adalah framework UI dari Google yang memungkinkan pembuatan aplikasi mobile dengan tampilan yang menarik dan interaktif. Pada proyek ini, kita membuat aplikasi sederhana yang menampilkan AppBar, teks, ikon, dan tombol dengan layout yang rapi, serta mempelajari cara mengatur warna, posisi widget, dan jarak antar widget.
1. Mengubah Warna AppBar dan Background
Langkah pertama adalah menyesuaikan tampilan aplikasi dengan mengubah warna AppBar dan background halaman utama. AppBar adalah bilah atas aplikasi yang biasanya berisi judul atau navigasi. Dengan memberi warna khusus pada AppBar, aplikasi terlihat lebih menarik dan berbeda dari default. Background halaman utama juga diubah agar senada dengan tema aplikasi. Hal ini membantu menciptakan tampilan yang konsisten dan visual yang menyenangkan bagi pengguna.
---
2. Mengatur Layout Column dan Row
Dalam Flutter, `Column` digunakan untuk menumpuk widget secara vertikal, sedangkan `Row` digunakan untuk menempatkan widget secara horizontal. Dalam proyek ini, awalnya teks dan ikon ditempatkan dalam `Row` agar sejajar horizontal. Namun untuk membuat ikon berada di atas teks, kita membungkus ikon dan teks dalam `Column`. Dengan kombinasi `Column` dan `Row`, kita dapat mengatur layout menjadi fleksibel, sehingga setiap teks bisa berada di atas atau di samping ikon sesuai kebutuhan desain.
---
3. Menambahkan Padding
Agar tampilan lebih rapi, kita menambahkan `Padding` di sekitar widget utama. Padding memberikan jarak antara widget dengan tepi layar atau widget lain. Tanpa padding, tampilan akan terlihat sempit dan kurang profesional. Dengan padding yang konsisten, aplikasi terlihat lebih seimbang dan nyaman untuk dilihat.
---
4. Menggunakan SizedBox untuk Jarak Antar Widget
Untuk mengatur jarak antar widget, baik secara horizontal maupun vertikal, digunakan `SizedBox`. `SizedBox` memungkinkan kita memberi ruang kosong di antara ikon, teks, atau tombol sehingga layout tidak terlalu padat. Misalnya, jarak antara ikon dan teks utama diberi ruang agar ikon tidak menempel langsung ke teks. Begitu juga jarak antara teks dan tombol di bawah dibuat lebih jelas agar pengguna mudah membedakan elemen-elemen yang ada di layar.
---
5. Menyusun Tombol dan Ikon Tambahan
Tombol dan ikon tambahan ditempatkan di bawah teks utama agar tampilan lebih terstruktur. Dengan menggunakan `Row`, tombol-tombol ini bisa berjejer horizontal dengan jarak yang sama. Padding dan SizedBox juga digunakan di sekitar tombol untuk memastikan tidak menempel satu sama lain dan tetap terlihat rapi. Dengan begitu, layout tetap teratur dan mudah dinavigasi.
---
6. Hasil Akhir Tampilan
Setelah semua langkah dilakukan, tampilan aplikasi menjadi lebih menarik: AppBar berwarna gelap, background halaman senada dengan tema, ikon utama berada di atas teks, teks tersusun dalam kolom masing-masing, dan tombol-tombol tambahan terletak rapi di bawah dengan jarak yang cukup. Layout ini memberikan kesan profesional meski hanya menggunakan widget dasar Flutter.
---
7. Kesimpulan
Melalui proyek ini, kita mempelajari beberapa konsep penting Flutter:
1. Mengubah warna AppBar dan background Scaffold agar tampilan sesuai tema.
2. Mengatur layout menggunakan Column dan Row untuk fleksibilitas penempatan widget.
3. Menambahkan Padding untuk memberi jarak dari tepi layar atau widget lain.
4. Menggunakan SizedBox untuk memberi jarak antar widget sehingga layout terlihat rapi.
5. Menyusun ikon dan tombol agar mudah dibaca dan digunakan oleh pengguna.
Dengan memahami konsep-konsep ini, pengembang Flutter pemula dapat membuat aplikasi yang sederhana namun menarik dan mudah digunakan. Teknik-teknik ini juga menjadi dasar untuk membuat tampilan yang lebih kompleks di proyek selanjutnya.
Ini kodenya gess
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color.fromARGB(255, 150, 36, 36),
appBar: AppBar(
title: Text('APLIKASI latihan satu'),
backgroundColor: Color.fromARGB(255, 114, 30, 41),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.waves,
size: 80,
color: Color.fromARGB(255, 255, 255, 255),
),
SizedBox(height: 16),
Column(
children: [
Text(
'welkam',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 255, 255, 255),
),
),
],
),
SizedBox(height: 8),
Column(
children: [
Text(
'its my cenel',
style: TextStyle(
fontSize: 16,
color: Color.fromARGB(255, 254, 255, 255),
),
),
],
),
SizedBox(height: 8),
Column(
children: [
Text(
'merah merah delima alibaba',
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
],
),
],
),
SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Color.fromARGB(255, 99, 13, 13),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.flash_on, color: Colors.white),
SizedBox(width: 8),
Text(
'apa ni',
style: TextStyle(color: Colors.white),
),
],
),
),
SizedBox(width: 16),
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Color.fromARGB(255, 99, 13, 13),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.directions_boat, color: Colors.white),
SizedBox(width: 8),
Text(
'ni apa',
style: TextStyle(color: Colors.white),
),
],
),
),
],
),
],
),
),
),
),
);
}
}
alamat flutter
https://z8qm06l08qn0.zapp.page/#/
