Button adalah komponen yang sangat penting dalam mobile apps development. Dahulu kala flutter memiliki FlatButton, RaisedButton dan OutlinedButton namun sudah digantikan dengan widget TextButton, ElevatedButton dan OutlinedButton.

Berikut adalah tampilan default dari masing masing button tersebut:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Button Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(onPressed: () {}, child: const Text("Text Button")),
            ElevatedButton(onPressed: () {}, child: const Text("Elevated Button")),
            OutlinedButton(onPressed: () {}, child: const Text("Outlined Button")),
          ],
        ),
      ),
    );
  }
}

Styling Button

styling button pada flutter bisa menggunakan property style dengan memasukan value ButtonStyle. Misal kita ingin mengubah warna dari text (foreground color) maka bisa mengikuti kode dibawah ini.

TextButton(
  style: ButtonStyle(
      foregroundColor:
          MaterialStateProperty.all<Color>(Colors.black)),
  onPressed: () {},
  child: const Text("Text Button"),
)

dengan MaterialStateProperty kita bisa mengubah warna sesuai dengan state button seperti saat pressed, hovered atau focused. selengkapnya tentang MaterialStateProperty bisa dibaca disini.

namun jika dirasa tidak terlalu perlu untuk menghandle state pada foregroundColor maka kita bisa menggunakan value TextButton.styleFrom() seperti contoh dibawah ini:

TextButton(
  style: TextButton.styleFrom(
    foregroundColor: Colors.black,
  ),
  onPressed: () {},
  child: const Text("Text Button"),
),

ada banyak property yang bisa kita gunakan di ButtonStyle seperti backgroundColor, overlayColor, padding dll.

Jika kita coba styling satu persatu maka kita bisa mengubah warna border color, background color serta foreground color masing masing button seperti berikut:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Button Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              style: ButtonStyle(
                  foregroundColor:
                      MaterialStateProperty.all<Color>(Colors.black)),
              onPressed: () {},
              child: const Text("Text Button"),
            ),
            ElevatedButton(
                style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                onPressed: () {},
                child: const Text("Elevated Button")),
            OutlinedButton(
                style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.red,
                    side: const BorderSide(color: Colors.red)),
                onPressed: () {},
                child: const Text("Outlined Button")),
          ],
        ),
      ),
    );
  }
}

dan hasilnya akan seperti gambar dibawah ini:

Sekian, semoga artikel ini bermanfaat.