Membuat tampilan flutter responsive dengan package flutter_boostrap

Membuat tampilan flutter responsive dengan package flutter_boostrap

Assalamualaikum sobat flutter, sudah lama nih ga nulis blog.

Kali ini kita akan membuat tampilan aplikasi flutter menjadi responsive dengan bantuan package flutter_bootstrap

https://pub.dev/packages/flutter_bootstrap

Kata Bootstrap sudah tidak asing lagi buat web developer. Sama seperti boostrap pada web, di flutter nantinya akan menggunakan grid system dalam mengatur layout aplikasi. di setiap layout nantinya akan dibagi menjadi 12 grid.

Ok, kita coba buat aplikasinya, buat project baru dengan nama : flutterid_boostrap

buka pucspec.yaml dan tambahkan package flutter_bootstrap, saya disini menggunakan bantuan extension vscode dengan nama pubspec assist.

hapus isi file main.dart, dan kita buat ulang dengan mengimport package dan membuat MaterialApp

Kita lanjut dengan membuat bagian home dengan stateful widget

kemudian membuat inisialisasi bootsrap dan boostrap container

menambahkan bosstraprow dan bootsrapcol, kode lengkapnya menjadi dibawah ini:

jalankan aplikasi dengan perintah

flutter run

flutter run -d all

flutter run -d chrome

flutter run -d windows

flutter run -d linux

Hasilnya bisa lihat di link dibawah ini :

http://flutter.id/web/membuat-tampilan-flutter-responsive-dengan-package-flutter_boostrap/#/

Semoga Bermanfaat

Flutter Developer