Salam Konsep Koding, pada kesempatan ini kita akan belajar bersama mengenai Flutter, di tutorial Flutter Bahasa Indonesia yang ke-22, kita akan belajar mengenai salah satu Layouting di Flutter. Layouting adalah salah satu hal yang sangat mendasar yang harus dikuasai seorang FrontEnd Developer atau Mobile Developer, nah bagi kamu yang ingin menjadi Flutter Mobile Developer, sudah menjadi sebuah kewajiban untuk menguasai layouting Flutter.

https://www.konsepkoding.com/2020/05/tutorial-membuat-layout-gridview-flutter.html
GridView Flutter


Di tutorial ini akan dijelaskan bagaiman cara membuat sebuah layouti UI Flutter untuk Hompage sebuah aplikasi. Project ini akan memiliki beberapa menu dengan menggunakan Layout Gridview Flutter. Ok langsung saja ke tutorial silahkan ikuti tutorial di bawah ini :


Apa Yang Akan Kita Pelajari?

1. Membuat Project Flutter
2. Layouting GridView Flutter
3. Penjelasan Kode 


Memulai Project Dan Layouting GridView Flutter

Hal pertama yang harus kamu lakukan untuk mengikuti tutorial ini adalah membuat project Flutter baru, apabila kamu belum memiliki project Flutter, Silahkan buka terminal atau cmd mu dan ketikan perintah di bawah ini:

flutter create gridview

Setelah project berhasil di buat buka project Flutter mu di IDE editor favoritmu bisa di VS code maupun Android Studio, kalau saya prefer di VS code karena lebih terbiasa, ubah kode file di lib.main.dart menjadi seperti kode di bawah ini :


Ok, Jika kamu sudah berhasil menuliskan kode di atas silahkan run project Flutter mu dengan perintah terminal/cmd di bawah ini :

flutter run

Apabila kodinganmu  berhasil maka hasilnya akan seperti gambar di bawah ini :

GridView Flutter
GridView Flutter


Penjelasan Kode Flutter


 body: GridView.count(crossAxisCount: 2,
      mainAxisSpacing: 20.0,
      padding: EdgeInsets.only(top: 50),
      children: <Widget>[
        Column(
          children: <Widget>[
         Image(
           width: 120.0,
           image: NetworkImage("https://image.flaticon.com/icons/png/512/1892/1892627.png"),
         ),

mainAxisSpacing: 20.0, verfungsi untuk spacing jarak antar Column Widget Flutter,  padding: EdgeInsets.only(top: 50), untuk jarak GridView dengan View bagian atas,  GridView.count(crossAxisCount: 2 adalah jumlah Item Gridview yang kita buat.


Sekian semoga dapat bermanfaat tutorial Flutter Bahasa Indonesia kali ini, jika ada pertanyaan atau error kamu bisa menuliskannya di kolom komentar, sekian semoga bermanfaat Happy Coding And Always Learning.

 Baca Tutorial Flutter Dart KonsepKoding Lainnya:
#11 Tutorial Flutter Alert Dialog
#12 Tutorial Menampilkan Gambar Pada Flutter
#13 Tutorial Flutter Membuat Top TabBarView
#14 Tutorial Flutter Membuat Bottom TabBarView
#15 Tutorial Flutter Membuat Drawer Navigation
#16 Tutorial Flutter Membuat Menu Dengan Row
#17 Tutorial Flutter Membuat Stepper Schedule
#18 Tutorial Flutter Membuat CircularProgressIndicator
#19 Tutorial Flutter Membuat SilverAppBar
#20 Tutorial Flutter Get Value Date Picker
#21 Tutorial Flutter Membuat DataTable