Membuat Tampilan Sederhana

Membuat Tampilan Sederhana - DART FLUTTER

Januari 19, 2026

Membuat Tampilan Sederhana Dart Flutter 🔥

Buat kamu yang baru mulai belajar Flutter, contoh kode ini cocok banget buat latihan bikin tampilan aplikasi yang rapi, modern, tapi nggak ribet. Di sini kita bakal bahas pelan-pelan gimana caranya bikin UI Flutter sederhana pakai Material 3, lengkap dengan AppBar gradient dan card yang clean.

Awal Mula Aplikasi Flutter

Semua aplikasi Flutter pasti dimulai dari fungsi main().


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

Ibaratnya, ini tuh tombol “ON” buat aplikasi kamu. Dari sini Flutter mulai jalan dan nampilin widget utama.

MyApp & MaterialApp, Pondasi Utama

Di widget MyApp, kita pake MaterialApp buat ngatur keseluruhan aplikasi.


MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    useMaterial3: true,
  ),
  home: HomePage(),
);

Yang penting di sini:

Banner debug dimatiin biar keliatan clean
useMaterial3: true biar desainnya lebih kekinian
HomePage jadi halaman pertama pas aplikasi dibuka

Scaffold: Kerangka Halaman

Masuk ke HomePage, kita pake Scaffold. Ini tuh kerangka dasar halaman Flutter.


Scaffold(
  appBar: AppBar(...),
  body: ...,
);

Tanpa Scaffold, bikin layout bakal ribet. Jadi ini wajib banget dipake.

AppBar Gradient Biar Nggak Ngebosenin 😎

Biasanya AppBar polos? Di sini kita bikin beda dikit pake gradient.


flexibleSpace: Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color(0xFF2196F3),
        Color(0xFF64B5F6),
      ],
    ),
  ),
),

Hasilnya:

AppBar keliatan lebih hidup
Warna biru gradasi bikin UI keliatan modern
Sudut bawah dibikin melengkung biar aesthetic

Body yang Aman & Bisa di Scroll

Supaya konten nggak ketabrak notch HP dan bisa di-scroll, kita pake:

SafeArea
SingleChildScrollView
Padding

Ini penting banget apalagi kalau kontennya nanti makin banyak.

Card UI yang Simple tapi Cakep

Daripada nulis kode card berkali-kali, kita bikin satu function:


_buildCard(title: 'Text Widget Pertama')

Isinya:

Background putih
Shadow tipis
Border halus
Teks rapi

Card kayak gini cocok buat:

List materi
List artikel
Catatan belajar

Simple, tapi keliatan niat 🔥

Ini codenya:

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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue,
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[50],

      // 🔵 APPBAR FULL GRADIENT
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.white,
        toolbarHeight: 70,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(16),
          ),
        ),
        flexibleSpace: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color(0xFF2196F3),
                Color(0xFF64B5F6),
              ],
            ),
          ),
        ),
        title: const Text(
          'Caca_Latihan',
          style: TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.w700,
            letterSpacing: 0.5,
            color: Colors.white,
          ),
        ),
      ),

      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Header

              const SizedBox(height: 24),

              _buildCard(title: 'Text Widget Pertama'),
              const SizedBox(height: 16),
              _buildCard(title: 'Text Widget Kedua'),
              const SizedBox(height: 16),
              _buildCard(title: 'Text Widget Ketiga'),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCard({required String title}) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
        border: Border.all(
          color: Colors.grey.shade200,
        ),
      ),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.w500,
          color: Colors.black87,
        ),
      ),
    );
  }
}

link nya disini ↴

https://zgv806hxgv90.zapp.page/#/

Kalau kamu masih pemula Flutter, latihan kayak gini tuh wajib. Jangan langsung mikir backend, database, atau state management dulu. Fokus ke UI & layout, biar tangan kamu terbiasa.

Cari Blog Ini

Caca Ardiansyah - program mobile XI RPL 2