Assalamualaikum sobat flutter, sudah lama nih ga nulis blog.
Kali ini kita akan membuat tampilan aplikasi flutter menjadi responsive dengan bantuan package 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 :
https://flutter.id/web/membuat-tampilan-flutter-responsive-dengan-package-flutter_boostrap/#/
Semoga Bermanfaat
