Membuat Button dengan Berbagai Gaya di Flutter: ElevatedButton, TextButton, dan OutlinedButton

September 21, 2025
oleh Edusoft Center

Daftar Isi

Pendahuluan

Dalam pengembangan aplikasi mobile, komponen tombol (button) memiliki peran yang sangat vital. Tombol adalah jembatan interaksi utama antara pengguna dan aplikasi. Hampir semua aplikasi modern—baik aplikasi e-commerce, media sosial, maupun aplikasi produktivitas—menggunakan tombol untuk mengeksekusi aksi tertentu.

Misalnya:

Tombol “Login” untuk masuk ke dalam akun pengguna.
Tombol “Tambah ke Keranjang” di aplikasi belanja.
Tombol “Like” atau “Share” pada aplikasi media sosial.
Tombol navigasi untuk berpindah ke halaman lain.

Tanpa tombol, aplikasi akan kehilangan salah satu elemen terpenting dalam pengalaman pengguna (User Experience/UX). Flutter sebagai framework UI yang dikembangkan Google menyediakan berbagai macam widget tombol yang dapat langsung digunakan. Tiga yang paling populer adalah ElevatedButton, TextButton, dan OutlinedButton.

Artikel ini akan membahas secara lengkap:

Teori tentang button di Flutter.
Perbedaan ElevatedButton, TextButton, dan OutlinedButton.
Implementasi kode dasar.
Praktik membuat halaman demo tombol.
Kustomisasi tombol (warna, ukuran, ikon).
Best practice penggunaan tombol sesuai konteks.
Studi kasus: membuat halaman dengan beberapa tombol interaktif.
Kesimpulan dan rekomendasi.

1. Konsep Button di Flutter

Flutter menggunakan widget sebagai elemen penyusun antarmuka. Button juga merupakan widget yang sudah disediakan oleh Flutter. Sejak Flutter versi stabil, tiga jenis button utama yang digunakan adalah:

ElevatedButton → tombol dengan latar berwarna dan efek bayangan.
TextButton → tombol berupa teks polos tanpa latar.
OutlinedButton → tombol dengan garis tepi (outline).

Sebelumnya, Flutter memiliki RaisedButton, FlatButton, dan OutlineButton, tetapi semuanya deprecated dan digantikan dengan tiga jenis button modern di atas.

2. Perbedaan ElevatedButton, TextButton, dan OutlinedButton

a. ElevatedButton

Ciri-ciri visual: memiliki background berwarna, biasanya menggunakan warna utama aplikasi.
Kegunaan: cocok untuk aksi utama (primary action) di halaman tertentu.
Contoh: tombol “Simpan”, “Daftar”, atau “Checkout”.

ElevatedButton(
  onPressed: () {
    print("ElevatedButton ditekan");
  },
  child: Text("Elevated Button"),
)

b. TextButton

Ciri-ciri visual: hanya berupa teks polos dengan warna sesuai tema.
Kegunaan: digunakan untuk aksi sekunder (secondary action) atau link sederhana.
Contoh: “Batal”, “Lihat detail”, atau “Lewati”.

TextButton(
  onPressed: () {
    print("TextButton ditekan");
  },
  child: Text("Text Button"),
)

c. OutlinedButton

Ciri-ciri visual: memiliki border (garis tepi) dengan background transparan.
Kegunaan: untuk aksi yang perlu terlihat tetapi bukan aksi utama.
Contoh: “Edit Profil”, “Hubungi”, atau “Kirim Pesan”.

OutlinedButton(
  onPressed: () {
    print("OutlinedButton ditekan");
  },
  child: Text("Outlined Button"),
)

3. Praktik: Membuat Halaman Demo Button

Buat project Flutter baru:

flutter create demo_button_app

Edit file lib/main.dart dengan kode berikut:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Demo Button Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ButtonDemoPage(),
    );
  }
}

class ButtonDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo Button di Flutter"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("Elevated Button ditekan")),
                );
              },
              child: Text("Elevated Button"),
            ),
            SizedBox(height: 20),
            TextButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("Text Button ditekan")),
                );
              },
              child: Text("Text Button"),
            ),
            SizedBox(height: 20),
            OutlinedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("Outlined Button ditekan")),
                );
              },
              child: Text("Outlined Button"),
            ),
          ],
        ),
      ),
    );
  }
}

Saat dijalankan, akan muncul tiga jenis tombol dengan gaya berbeda.

4. Kustomisasi Button

a. Mengubah warna

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.green, // background
    onPrimary: Colors.white, // teks
  ),
  onPressed: () {},
  child: Text("Tombol Hijau"),
)

b. Menambahkan ikon

ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.save),
  label: Text("Simpan"),
)

c. Mengubah bentuk tombol

OutlinedButton(
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(30),
    ),
  ),
  onPressed: () {},
  child: Text("Rounded Button"),
)

d. Membuat tombol full width

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    onPressed: () {},
    child: Text("Full Width Button"),
  ),
)

5. Best Practice Penggunaan Button

Gunakan ElevatedButton untuk aksi utama.
Gunakan TextButton untuk opsi sekunder atau link.
Gunakan OutlinedButton untuk aksi penting tetapi bukan utama.
Jangan gunakan terlalu banyak jenis tombol dalam satu halaman agar konsisten.
Gunakan warna dan ukuran yang konsisten dengan tema aplikasi.

6. Studi Kasus: Halaman Interaktif

Misalnya kita ingin membuat halaman Profil Pengguna dengan beberapa aksi tombol:

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Profil Saya"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            CircleAvatar(
              radius: 50,
              backgroundImage: AssetImage("assets/profile.jpg"),
            ),
            SizedBox(height: 20),
            Text(
              "Raihan Putra",
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 30),
            ElevatedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.edit),
              label: Text("Edit Profil"),
            ),
            SizedBox(height: 15),
            OutlinedButton(
              onPressed: () {},
              child: Text("Pengaturan"),
            ),
            SizedBox(height: 15),
            TextButton(
              onPressed: () {},
              child: Text("Keluar"),
            ),
          ],
        ),
      ),
    );
  }
}

Hasil:

Tombol utama: Edit Profil (ElevatedButton).
Tombol tambahan: Pengaturan (OutlinedButton).
Tombol keluar: Keluar (TextButton).

7. Kesimpulan

ElevatedButton → aksi utama, memiliki background berwarna.
TextButton → teks polos, digunakan untuk opsi sekunder.
OutlinedButton → memiliki border, digunakan untuk aksi penting namun bukan utama.
Flutter menyediakan kemudahan dalam kustomisasi tombol agar sesuai dengan kebutuhan aplikasi.
Best practice: gunakan tombol secara konsisten, perhatikan UX, dan jangan berlebihan.

Dengan memahami jenis-jenis tombol ini, Anda dapat membangun antarmuka aplikasi Flutter yang lebih profesional, menarik, dan mudah digunakan.