Laporan Pembelajaran Mandiri Flutter

Mata Pelajaran: Pemrograman Mobile
Nama: Rizqi Resdhiana
Kelas: XI RPL II

📝 Cerita Singkat Kegiatan Hari Ini

Pada pembelajaran hari ini, saya melakukan kegiatan belajar mandiri sesuai dengan instruksi guru. Fokus pembelajaran adalah mengombinasikan beberapa widget Flutter untuk membangun satu halaman aplikasi sederhana yang rapi dan dapat dijalankan tanpa error.

Dalam proses pengerjaan, saya mencoba memahami fungsi masing-masing widget serta bagaimana cara menyusunnya agar tampilan aplikasi terlihat lebih terstruktur. Jika terjadi kesalahan (error), saya mencoba memperbaikinya sendiri dengan membaca kembali kode dan melakukan eksperimen kecil.

Pembelajaran ini membantu saya memahami bahwa membuat UI Flutter membutuhkan ketelitian, kesabaran, dan banyak percobaan.

🧩 Widget yang Digunakan

Pada aplikasi Flutter yang saya buat, saya telah menggunakan widget-widget berikut:

MaterialApp sebagai root aplikasi
Scaffold sebagai kerangka halaman
AppBar untuk judul aplikasi
Column dan Row untuk pengaturan layout
Text (lebih dari 3) untuk menampilkan informasi
Container untuk menampilkan bagian informasi dengan warna dan border
Padding dan SizedBox untuk mengatur jarak antar widget
TextField untuk input nama pengguna
FloatingActionButton untuk menampilkan aksi (SnackBar)

Semua widget tersebut digabungkan dalam satu halaman aplikasi sesuai dengan ketentuan.

🧪 Eksperimen yang Dilakukan

Saya melakukan 2 eksperimen pada aplikasi Flutter yang saya buat, yaitu:

1️⃣ Mengubah Warna

Saya melakukan perubahan warna pada beberapa bagian aplikasi, seperti:

Warna tema aplikasi
Warna container agar tampilan lebih menarik

Perubahan warna ini bertujuan agar tampilan aplikasi terlihat lebih nyaman dan tidak monoton.

2️⃣ Mengubah Column menjadi Row

Saya juga melakukan eksperimen dengan mengubah susunan widget dari Column menjadi Row, khususnya pada bagian informasi nama dan kelas. Dari eksperimen ini, saya memahami perbedaan fungsi antara:

Column (susunan ke bawah)
Row (susunan ke samping)

Eksperimen ini membantu saya memahami cara mengatur layout Flutter dengan lebih fleksibel.

📸 Dokumentasi

Berikut dokumentasi hasil pembelajaran:

import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Latihan Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({super.key});

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
final TextEditingController nameController = TextEditingController();

void _showSnackBar() {
if (nameController.text.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Nama tidak boleh kosong!'),
),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
'Halo, ${nameController.text}! 👋',
),
),
);
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Belajar Flutter'),
centerTitle: true,
),

body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// JUDUL
const Text(
'Selamat Datang Guys👋',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),

const SizedBox(height: 6),

Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'Nama: RIZQI RESDHIANA',
style: TextStyle(fontSize: 16, color: Colors.grey),
),
SizedBox(height: 4),
Text(
'Kelas: XI RPL II',
style: TextStyle(fontSize: 16, color: Colors.grey),
),
],
),

const SizedBox(height: 20),

// CONTAINER INFORMASI
Container(
width: double.infinity,
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: Colors.blue.shade50,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.blue),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Informasi',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 6),
Text(
'Ini adalah contoh container yang diberi
padding dan warna',
),
],
),
),

const SizedBox(height: 20),

// TEXTFIELD
TextField(
controller: nameController,
decoration: InputDecoration(
labelText: 'Nama Lengkap',
hintText: 'Contoh: Jack',
prefixIcon: const Icon(Icons.person),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
],
),
),

// FLOATING ACTION BUTTON
floatingActionButton: FloatingActionButton(
onPressed: _showSnackBar,
child: const Icon(Icons.add),
),
);
}
}

✅ Kesimpulan

Dari pembelajaran hari ini, saya mendapatkan beberapa hal penting:

Lebih memahami penggunaan widget dasar Flutter
Mengetahui cara mengatur layout menggunakan Column dan Row
Belajar melakukan eksperimen dan memperbaiki error secara mandiri

Pembelajaran hari ini tidak harus sempurna, namun sangat membantu dalam melatih proses berpikir dan kerapian dalam membuat aplikasi Flutter.

Terima kasih telah membaca postingan ini🙏
Semangat terus belajar Flutter 🚀

Mengubah Posisi Widget di Flutter

Cara Mengubah Posisi Widget di Flutter

Dalam pembelajaran Flutter, mengatur posisi widget merupakan hal yang sangat penting agar tampilan aplikasi terlihat rapi dan mudah digunakan. Pada artikel ini, saya akan membahas beberapa cara sederhana untuk mengubah posisi widget di Flutter dengan bahasa yang mudah dipahami.

1. Mengatur Posisi dengan Column dan Row

Widget Column digunakan untuk menyusun widget secara vertikal, sedangkan Row digunakan untuk menyusun widget secara horizontal.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Text 1'),
    Text('Text 2'),
    Text('Text 3'),
  ],
)

Untuk tampilan horizontal, cukup ganti Column menjadi Row.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Text 1'),
    Text('Text 2'),
    Text('Text 3'),
  ],
)

2. Menggunakan Center dan Align

Jika ingin memposisikan widget di tengah layar, kita bisa menggunakan widget Center.

Center(
  child: Text('Teks di tengah'),
)

Untuk posisi yang lebih spesifik, gunakan Align.

Align(
  alignment: Alignment.bottomRight,
  child: Text('Pojok kanan bawah'),
)

3. Menggeser Posisi dengan Padding dan SizedBox

Padding digunakan untuk memberi jarak di dalam widget, sedangkan SizedBox digunakan untuk memberi jarak antar widget.

Padding(
  padding: EdgeInsets.only(left: 20, top: 10),
  child: Text('Teks dengan jarak'),
)

SizedBox(height: 20)

4. Mengatur Posisi Bebas dengan Stack

Jika ingin mengatur posisi widget secara bebas, kita bisa menggunakan Stack dan Positioned.

Stack(
  children: [
    Container(color: Colors.grey),
    Positioned(
      top: 20,
      right: 20,
      child: Icon(Icons.add),
    ),
  ],
)

Catatan:
Tidak semua layout membutuhkan Stack. Gunakan Stack hanya jika benar-benar memerlukan pengaturan posisi yang bebas.

Kesimpulan

Mengubah posisi widget di Flutter dapat dilakukan dengan berbagai cara, tergantung kebutuhan tampilan aplikasi. Dengan memahami penggunaan Column, Row, Align, Padding, dan Stack, kita dapat membuat tampilan aplikasi Flutter yang lebih rapi dan profesional.

Search This Blog

RIZQI_77

Belajar Flutter