Materi Pertemuan 5. Mengenal Widget Flutter

Hallo, pada pertemuan kali ini kita bahas tentang fungsi Input dan Output, sebelum kita masuk lebih dalam terkait dengan Flutter, kita belajar sedikit tentang Method dan Widget. Dan pada Flutter kedua hal ini sangatlah penting.

Method pada flutter sering disebut dengan Widget. Pada Flutter maka kita harus familiar dengan istliah widget ini karena memiliki berbagai macam fungsi yang dapat mendukung kita dalam membuat aplikasi android.

Apa itu Widget ?

Widget secara sederhana merupakan properti yang kita gunakan untuk membuat tampilan seperti tombol, list, icon, gambar, dll.

Properti Widget

Contoh misalnya kita akan membuat sebuah tombol yang memiliki background berwarna merah dan warna tulisannya berwarna putih.

Untuk membuat tombol tersebut maka kita perlu mengatur semuanya melalui properti. Seperti contoh kode berikut.

class MyHomePage extends SatelessWidget {
@overaid
Widget buld(BuildContext context) {
   return Scaffold (
        appBar: AppBar(
           title: Text ("Tombol Pertama"),
           backgroundColor: Colors.red,

         ), //AppBar
      ); // Scaffold
   }
}

Dari kode di atas kita bisa mempelajari terkait ciri-ciri widget, widget selalu diawali dengan huruf kapital dan berupa class, ada beberapa widget yang ada pada kode di atas yaitu Scaffold, AppBar dan Text.

Dalam widget Scaffold memiliki properti berupa appBar , sedangkan pada widgat AppBar terdapat properti title,  dan pada widget Text terdapat properti backgroundColor.

Intinya bila diawali huruf kapital maka itu adalah widget, dan di dalam widget ada properti. Bisa saja di dalam widget ada widget lagi, namun pada intinya cara penulisannya sama saja.

Widget Umum

Widget yang paling umum digunakan ketika membuat aplikasi menggunakan Flutter yaitu :

Stateless

Merupakan widget yang memiliki fungsi untuk menampilkan sesuatu yang bersifat statis artinya tetap dan tidak akan berubah lagi. 

Contoh :

class MyHomePage extends SatelessWidget {
@overaid
Widget buld(BuildContext context) {
   return Scaffold ();
}
}

Statefull 

Berbeda dengan stateless widget statefull digunakan untuk menampilkan data yang bersifat dinamis atau selalu mengalami perubahan. 

Contoh :

class MyWidget extends StatefulWidget{
MyWidget({Key key}) : super(key:key);
    @override
    _MyWidget createState() => new _MyWidget();
}
class _MyWidget extends State<MyWidget>{
    Widget build(BuildContext context){
    return Widgets;
    }
}

Scaffold

Scaffold merupakan widget yang utama pada flutter, Scaffold memiliki beberapa parameter yang dapat digunakan untuk mengatur tampilan aplikasi android kita, seperti AppBar serta body. Bahkan kita bisa merubah background body pada aplikasi melalui scaffold. 

Contoh :

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Sample Code'),
    ),
    body: Center(
      child: Text('You have pressed the button $_count times.')
    ),
    backgroundColor: Colors.blueGrey.shade200,
    floatingActionButton: FloatingActionButton(
      onPressed: () => setState(() => _count++),
      tooltip: 'Increment Counter',
      child: const Icon(Icons.add),
    ),
  );
}

Layout

Layout berguna untuk mengatur letak atau posisi widget seperti Row atau Column. Untuk menampilkan widget bersifat horizontal kita bisa menggunakan Row. Sedangkan untuk widget yang bersifat vertikal bisa kita gunakan Column.

Contoh :

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Row"),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              child: Text("Halo 1 !!!"),
              color: Colors.lime,
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              child: Text("Halo 2 !!!"),
              color: Colors.purple,
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              child: Text("Halo 3 !!!"),
              color: Colors.lightBlue,
              padding: EdgeInsets.all(16.0),
            ),
          ],
        ));
  }
}

Container

Container merupakan widget yang berguna sebagai pembungkus widget lain sehingga dapat diberikan margin, padding, warna bakground ataupun dekorasi.

Contoh :

...
body: Container(
          padding: EdgeInsets.all(32.0),
          margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20.0), 
            color: Colors.purple),
          child: Text('Haiii', style: TextStyle(color: Colors.white, fontSize: 20.0),)
        )
...

Sekian dulu pembahasan kita kali ini, semoga ada manfaatnya, untuk praktiknya silahkan dicoba masing-masing. 

Jika ada pertanyaan silahkan di tayakan pada kolom komentar, jangan lupa juga untuk menambahkan nim dan nama.

Terimakasih.

Ahmad Subki