Latihan membuat tampilan flutter sederhana 🤖

Membuat Tampilan Flutter Sederhana Menggunakan AppBar, Row, Padding, dan SizedBox

Flutter merupakan framework buatan Google yang digunakan untuk membangun aplikasi mobile, web, dan desktop dengan satu basis kode. Pada artikel ini, kita akan membahas contoh tampilan Flutter sederhana yang terdiri dari AppBar, Row, Text, Padding, dan SizedBox. Contoh ini cocok untuk pemula yang baru belajar dasar UI Flutter.

---

1. Struktur Dasar Aplikasi Flutter

Setiap aplikasi Flutter dimulai dari fungsi main() yang menjalankan widget utama menggunakan runApp(). Widget utama biasanya berupa MaterialApp yang berfungsi sebagai akar aplikasi dan menyediakan tema serta navigasi.

Pada contoh ini, widget utama bernama MyApp dan halaman utamanya adalah HomePage.

---

2. Menggunakan Scaffold dan AppBar

Scaffold digunakan sebagai kerangka utama halaman. Di dalamnya terdapat AppBar yang berfungsi sebagai header aplikasi.

Pada AppBar:

• title digunakan untuk menampilkan judul

• backgroundColor untuk mengatur warna AppBar

• centerTitle agar judul berada di tengah

AppBar membantu membuat tampilan aplikasi terlihat lebih rapi dan profesional.

---

3. Row sebagai Pengganti Column

Flutter menyediakan dua widget utama untuk layout:

• Column → menyusun widget dari atas ke bawah

• Row → menyusun widget dari kiri ke kanan

Pada kode ini, Row digunakan untuk menampilkan beberapa teks secara horizontal. Ini berguna jika kita ingin membuat layout sejajar, misalnya menu atau label berdampingan.

---

4. Menambahkan Padding

Padding digunakan untuk memberi jarak di dalam widget agar tampilan tidak terlalu mepet dengan tepi layar.

Dengan EdgeInsets.all(19.0), seluruh isi di dalam Row memiliki jarak yang sama dari semua sisi. Penggunaan padding membuat UI terlihat lebih nyaman dibaca.

---

5. Mengatur Jarak dengan SizedBox

SizedBox digunakan untuk memberi jarak antar widget.

Pada layout vertikal biasanya digunakan properti height, sedangkan pada layout horizontal seharusnya menggunakan width. SizedBox membantu mengatur spasi agar tampilan tidak terlihat terlalu rapat.

---

6. Widget Text

Widget Text digunakan untuk menampilkan tulisan. Pada contoh ini terdapat tiga teks berbeda dengan ukuran font yang menurun:

• Teks judul sambutan

• Teks perkenalan

• Teks penutup

Penggunaan TextStyle memungkinkan kita mengatur ukuran, warna, dan gaya tulisan.

Code dan hasilnya: 

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return const MaterialApp(

      debugShowCheckedModeBanner: false,

      home: HomePage(),

    );

  }

}

class HomePage extends StatelessWidget {

  const HomePage({super.key});

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Rizqi Resdhiana XI RPL II'),

        backgroundColor: Colors.red,

        centerTitle: true,

      ),

      body: Center(

        child: Padding(

          padding: const EdgeInsets.all(19.0),

          child: Row(

            // gunakan MainAxisSize.min supaya Column tidak memenuhi tinggi penuh

            mainAxisSize: MainAxisSize.min,

            crossAxisAlignment: CrossAxisAlignment.start,

            children: const [

              Text(

                'SELAMAT DATANG.',

                style: TextStyle(fontSize: 18),

              ),

              SizedBox(height: 8),

              Text(

                'Halo Aku RIZQI',

                style: TextStyle(fontSize: 16),

              ),

              SizedBox(height: 8),

              Text(

                'terima kasih telah membaca.',

                style: TextStyle(fontSize: 14),

              ),

            ],

          ),

        ),

      ),

    );

  }

}

---

7. Kesimpulan

Dari contoh sederhana ini, kita bisa memahami beberapa konsep dasar Flutter:

• Cara membuat AppBar dengan judul dan warna

• Mengatur layout menggunakan Row

• Menambahkan jarak menggunakan Padding dan SizedBox

• Menampilkan teks dengan berbagai ukuran

Meskipun tampilannya masih sederhana, konsep ini merupakan fondasi penting untuk membuat aplikasi Flutter yang lebih kompleks ke depannya.

---

Semoga artikel ini membantu kamu yang sedang belajar Flutter. Teruslah berlatih dan eksplorasi widget-widget lainnya agar semakin mahir dalam membangun aplikasi 🚀

BY: RIZQI RESDHIANA XI RPL II