Layout : Membuat Custom Button Dengan Icon Di Flutter

Sobatcoding.com - Tutorial Membuat Custom Button Dengan Icon Di Flutter

Di flutter versi terbaru Widget FlatButton, RaisedButton, dan OutlineButton masing-masing telah diganti dengan TextButton, ElevatedButton, dan OutlinedButton. Setiap class tombol memiliki temanya sendiri: TextButtonTheme, ElevatedButtonTheme, dan OutlinedButtonTheme

TextButton

TextButton(
    onPressed: () {}, 
    child: const Text("Text Button")
)

ElevatedButton

ElevatedButton(
   onPressed: () {},
   child: const Text(
     "Elevated Button"
   )
)

OutlinedButton

OutlinedButton(
    onPressed: () {}, 
    child: const Text("Outlined Button")
)

Icon Button

IconButton(
    color: Colors.lightBlue,
    icon: const Icon(
        Icons.phone_android
       ),
    onPressed: () {},
)

Membuat Border di Button Flutter

Kali ini kita akan membuat border di Elevated Button. 

ElevatedButton(
    style: ElevatedButton.styleFrom( //=> tambahkan styleFrom
               side: BorderSide(
                   color: Colors.blueAccent.shade700) // Menambahkan border berawrna biru
               ),
 ....

Untuk masing-masing button lainnya kita tinggal menyesuaikan sesuai widget button yang di gunakan. Contoh untuk TextButton kita gunakan TextButton.styleForm, OutlinedButton kita gunakan OutlinedButton.styleForm

Membuat Border Radius Button Flutter

ElevatedButton(
    style: ElevatedButton.styleFrom( //=> tambahkan styleFrom
               shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15.0) // => Menambahkan Border Radius 15.0
               ),
 ....

Mengganti Warna Button Flutter

Untuk mengubah atau mengganti warna button kita bisa gunakan kode berikut

ElevatedButton(
    style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blueAccent.shade400, //warna background button
                    shadowColor: Colors.grey.shade300, //warna shadow button
                    elevation: 8.0, //untuk menyesuaikan posisi radius shadow
             ),
 ...

Membuat Button dengan Text dan Icon

ElevatedButton.icon(
   onPressed: () {},
   icon: const Icon(Icons.download),
   label: const Text("Download")
)

Membuat Button dengan Text dan Icon Di Posisi Kanan

ElevatedButton(
    onPressed: () {},
    child: Row(
    mainAxisSize: MainAxisSize.min,
            children: [
            Text("Download"),
            SizedBox(width: 5),
            Icon(Icons.download)
        ],
    ),
)

Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.

Semoga bermanfaat.