Cara Custom Border Radius Pada Button Flutter

Hello people spirit of learning!

Pada aplikasi kita pasti sering menemukan tombol yang beragam-ragam. Mulai dari warna,bentuk, lengkungan tombol, dan lain sebagainya. Disini saya akan membuat custom border radius atau custom lengkungan button pada flutter. Langsung saja ke tutorialnya.

Membuat ukuran button

Container(
            width: 130,
            height: 45,
          )

Langkah pertama, kita atur ukuran pada buttonnya dengan menggunakan widget Container. Width untuk mengatur panjangnya dan Height untuk mengatur lebarnya.

Gunakan Widget-widget Button

Container(
          width: 130,
          height: 45,
          child: ElevatedButton(onPressed: () {}, child: Text('Confirm')),
        )

Widget button ada 3 macam, Yaitu TextButton, ElevatedButton, dan OutlineButton. Disini kita menggunakan ElevatedButton. Maka tampilannya akan seperti gambar diatas.

Styling Border Radius

Container(
          width: 130,
          height: 45,
          child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(17))),
              onPressed: () {},
              child: Text('Confirm')),
        )

Untuk melakukan styling, gunakan properti style lalu isi dengan ElevatedButton.stylefrom. Didalamnya diisi dengan properti shape. Lalu shape diisi dengan widget RoundedRectangleBorder. Lalu diisi dengan properti BorderRadius yang fungsinya untuk mengatur lengkungan button. disini kita menggunakan getter circular (bundaran), yang fungsinya membuat radius perbatasan semua radius.

Barusan kita sudah bisa membuat custom border radius pada flutter, yang fungsinya untuk mengatur tiap lengkungan sudut pada tombol atau button.

Terima kasih dan semoga bermanfaat!