Belajar Widget Fluter : Button

Button

Kali ini kita akan belajar menggunakan widget button. Widget button ini adalah widget yang dapat menerima trigger sentuhan atau dapat melakukan suatu fungsi ketika disentuh, widget-widget button tersebut antara lain:

RaisedButton

RaisedButton merupakan bagian dari Material Design widget dari Flutter. Untuk menggunakan RaisedButton seperti berikut:


  1. RaisedButton(

  2.   onPressed: (){

  3.     // Aksi ketika button diklik

  4.   },

  5.   child: Text('Tombol'),

  6. );



Pada kode di atas RaisedButton memiliki 2 parameter yaitu onPressed dan child. Parameter onPressed merupakan sebuah function event ketika tombol ditekan dan sebenarnya ada event-event lain seperti onLongPress dan onHighlightChanged. Parameter child diisi oleh widget pada umumnya.

20200615193832f8cb6c7c14c286ce6ca04cdd8b888637.jpeg

FlatButton

FlatButton merupakan widget button yang tampilan default-nya polos sehingga FlatButton ini harus diberi parameter-parameter warna. Contoh kodenya seperti berikut:


  1. FlatButton(

  2.   color: Colors.blue,

  3.   textColor: Colors.white,

  4.   disabledColor: Colors.grey,

  5.   disabledTextColor: Colors.black,

  6.   padding: EdgeInsets.all(8.0),

  7.   splashColor: Colors.blueAccent,

  8.   onPressed: () {

  9.     // Aksi ketika button diklik

  10.   },

  11.   child: Text(

  12.     'Flat Button',

  13.     style: TextStyle(fontSize: 20.0),

  14.   ),

  15. )



Sama halnya RaisedButton, terdapat parameter onPressed dan child. 
FlatButton ini memiliki parameter color untuk warna dasar, textColor untuk warna text, disabledColor sebagai warna tombol ketika tidak bisa ditekan (disabled), disabledTextColor untuk warna text ketika tidak bisa ditekan (disabled), dan splashColor untuk warna button ketika tombol ditekan.

202006151938474051adefebeb51672364505ad9479405.jpeg

IconButton

IconButton merupakan widget button dengan icon. Tak seperti widget tombol lainnya, widget IconButton ini tidak memiliki child. Perhatikan kode di bawah ini :


  1. IconButton(

  2.   icon: Icon(Icons.volume_up),

  3.   tooltip: 'Increase volume by 10',

  4.   onPressed: () {

  5.     // Aksi ketika button diklik

  6.   },

  7. )



Seperti yang kita lihat di atas, IconButton tidak menggunakan child untuk isi (content) melainkan menggunakan parameter icon dan tooltip (penunjuk) untuk memberikan hint pada tombol.

202006151939145295ed95945289ccf061a9250264d33f.jpeg

DropdownButton

DropdownButton merupakan tombol yang saat diklik, akan muncul pop-up daftar beberapa item yang dapat kita pilih salah satu. Berikut contoh kodenya:

  1. class FirstScreen extends StatefulWidget {
  2.   @override
  3.   _FirstScreenState createState() => _FirstScreenState();
  4. }
  5.  
  6. class _FirstScreenState extends State<FirstScreen> {
  7.   String language;
  8.  
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Scaffold(
  12.       appBar: AppBar(
  13.         title: Text('First Screen'),
  14.       ),
  15.       body: DropdownButton<String>(
  16.         items: <DropdownMenuItem<String>>[
  17.           DropdownMenuItem<String>(
  18.             value: 'Dart',
  19.             child: Text('Dart'),
  20.           ),
  21.           DropdownMenuItem<String>(
  22.             value: 'Kotlin',
  23.             child: Text('Kotlin'),
  24.           ),
  25.           DropdownMenuItem<String>(
  26.             value: 'Swift',
  27.             child: Text('Swift'),
  28.           ),
  29.         ],
  30.         value: language,
  31.         hint: Text('Select Language'),
  32.         onChanged: (String value) {
  33.           setState(() {
  34.             language = value;
  35.           });
  36.         },
  37.       ),
  38.     );
  39.   }
  40. }

Pada contoh tersebut DropdownButton tidak menggunakan child maupun children, akan tetapi menggunakan items di mana berisi list dari widget DropdownMenuItem. 
Pada widget DropdownMenuItem terdapat child untuk tiap itemnya dan value yang ada pada DropdownMenuItem adalah nilai dari tiap itemnya. 
Nantinya akan dibutuhkan parameter onChanged ketika ada perubahan atau ketika memilih salah satu dari item tersebut dan mengubah nilai language atau value dari DropdownButton tersebut. Sedangkan hint berfungsi ketika nilai value dari DropdownButton null atau kosong.
2020061513330426afd525a924afa3f260ddfabb45af7c.gif
Selengkapnya tentang berbagai widget Button, bacalah pada tautan berikut:

Komentar

Posting Komentar