# Panduan Membuat Button di Flutter

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:

```dart
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")),
          ],
        ),
      ),
    );
  }
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692575134658/4efe0498-b03b-49d1-b40d-bb87b4e9efdb.png align="left")

## 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.

```dart
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](https://api.flutter.dev/flutter/material/MaterialStateProperty-class.html).

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

```dart
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:

```dart
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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1692579033949/f420782a-b62e-408f-bd21-d02b5a77b8cc.png align="left")

Sekian, semoga artikel ini bermanfaat.