Untuk membuat program Flutter, Anda bisa menggunakan Android Studio. Namun karena Android Studio cukup memakan resource, kami memilih menggunakan text editor Visual Studio Code.
Visual Studio Code adalah text editor free dari microsoft, silakan download disini.
Setelah selesai download dan instalasi, berikutnya perlu ditambahkan beberapa plugin / extension untuk membuat program Flutter. Untuk install extension dapat diakses pada toolbar disebelah kiri pada window Visual Studio Code.
Extension yang akan diinstall adalah
- Flutter (wajib)
- Dart (wajib)
- Material Icon Theme (optional, hanya untuk menampilkan icon pada visual studio code)
Setelah instalasi diatas selesai, berikutnya adalah mencoba membuat aplikasi pertama kita. Untuk versi terupdate bisa lihat disini.
- Buka menu View > Command Palette.
- Ketikan “flutter”, lalu pilih Flutter: New Project.
- Buat nama project, my_app, lalu tekan Enter.
- Buat directory baru atau pilih parent directory untuk folder project.
- Tunggu hingga proses pembuatan project selesai dan file main.dart tampil.
Setelah selesai, Program bisa dijalankan dengan menekan tombol F5 atau menu Run > Start Debugging.
Pada tutorial akan digunakan Android Emulator (AVD) yang sudah dibuat pada modul sebelumnya. Silakan tunggu hingga Android Emulator tampil. Agak cukup lama untuk tampil, tergantung dari kecepatan komputer.
Setelah tampil, Anda bisa coba tekan button +, dan angka counter akan bertambah. Oke, selamat, sampai disini, Anda sudah siap membuat aplikasi flutter.
Test Hot Reload
Hot Reload adalah fitur dimana perubahan pada program, instan terupdate pada Aplikasi. Mari kita ubah code pada class _MyHomePageState, ubah bagian _counter++ menjadi _counter = _counter + 2.
Lalu pada emulator, coba tekan tombol +, angka counter akan bertambah 2. Nah, feature hot reload ini sangat membantu mempercepat proses development.
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}