Text dan Berbagai Jenis Tombol

Widget Text

Text adalah widget paling sering dipakai. Ia mendukung styling lengkap lewat TextStyle.

const Text(
  'Selamat datang di aplikasi kasir',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.teal,
    letterSpacing: 0.5,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Untuk teks campuran dengan beberapa gaya dalam satu baris, pakai RichText atau Text.rich dengan TextSpan:

Text.rich(
  const TextSpan(
    text: 'Total: ',
    style: TextStyle(fontSize: 16),
    children: [
      TextSpan(
        text: 'Rp50.000',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.green),
      ),
    ],
  ),
)

Jenis-jenis tombol Material

Flutter menyediakan beberapa tombol untuk kebutuhan berbeda:

• ElevatedButton: tombol utama dengan bayangan, untuk aksi primer seperti Simpan.
• TextButton: tombol teks tanpa background, untuk aksi sekunder seperti Batal.
• OutlinedButton: tombol dengan garis tepi, untuk aksi netral.
• IconButton: tombol ikon saja, untuk toolbar dan app bar.
• FloatingActionButton: tombol bulat mengambang, untuk aksi utama halaman.

Column(
  children: [
    ElevatedButton(
      onPressed: () => print('Simpan ditekan'),
      child: const Text('Simpan'),
    ),
    TextButton(
      onPressed: () => print('Batal ditekan'),
      child: const Text('Batal'),
    ),
    IconButton(
      icon: const Icon(Icons.delete),
      color: Colors.red,
      onPressed: () => print('Hapus ditekan'),
    ),
  ],
)

Tombol nonaktif

Memberi onPressed: null membuat tombol nonaktif secara visual (abu-abu dan tidak bisa ditekan). Ini cara standar menonaktifkan tombol saat form belum valid, jauh lebih baik daripada membiarkan user menekan lalu menampilkan error.

Catatan teknis: Di dalam Row atau Column, tombol hanya selebar kontennya. Kalau kamu ingin tombol selebar layar, bungkus dengan SizedBox(width: double.infinity, child: ElevatedButton(...)). Dan ingat, onPressed yang null berarti nonaktif, sedangkan onPressed: () {} (fungsi kosong) berarti aktif tapi tidak ngapa-ngapain, bedakan dengan jelas.