Jika emulator sudah berjalan, kita dapat mengeksekusi projek dengan cara klik tombol play
(berwarna hijau) pada Android Studio
Pada emulator akan tampil hasil projek seperti berikut
Membuat dan menjalankan projek dengan VSCode dan Handphone Android
Install VSCode sebagai alternatif editor
Unduh VSCode pada laman https://code.visualstudio.com/download kemudian install. Agar flutter
dapat digunakan pada VSCode, perlu diinstall beberapa extension flutter yang dibutuhkan.
30
Setelah itu restart/tutup VSCode
Membuat projek flutter dengan VSCode
Jalankan VSCode, pada menubar pilih view -> command Palette... atau dapat juga dengan
shortcut Ctrl + Shift + P
Kemudian ketikkan flutter dan pilih Flutter: New Project
31
Kemudian pilih Application
Pilih folder tempat projek tersebut
32
Kemudian tentukan nama projek flutter yang ingin dibuat misalnya
aplikasi_flutter_pertamaku
Kemudian tekan Enter dan tunggu hingga proses unduhan selesai
33
Menjalankan aplikasi dengan Handphone Android
Untuk menjalankan projek flutter dari VSCode dapat menggunakan Emulator AVD yang telah
dibuat sebelumnya menggunakan Android Studio ataupun menggunakan Device Handphone
Android langsung
Untuk menggunakan android device secara langsung, pertama aktifkan dulu mode developer
dengan cara buka Setting kemudian pilih System kemudian pilih About Phone, untuk masing-
masing device mungkin terdapat perbedaan untuk lokasi About Phone ada pula yang berada
pada Additional Setting
34
Kemudian pilih About Phone
35
Kemudian ketuk Build number beberapa kali, namun ini juga berbeda untuk beberapa versi
misalnya untuk Xiaomi dengan mengetuk MIUI Version beberapa kali
36
Selanjutnya mengaktifkan USB Debugger dengan cara pilih Developer Option pada System,
Developer Option ini akan muncul setelah mode Developer diaktifkan dengan cara diatas
37
Kemudian aktifkan USB Debugging
38
Jika telah selesai, hubungkan Handphone android dengan laptop/komputer dengan kabel
data, untuk memeriksa apakah sudah terhubung dengan Handphone, dapat dilihat pada
VSCode bagian pojok kanan bawah akan tertera nama device yang terhubung
39
Atau jika pada Android Studio terletak pada toolbar bagian atas tengah
Agar laptop bekerja lebih ringan dapat digunakan Text Editor VSCode dan menjalankan projek
langsung menggunakan Handphone Android. Untuk menjalankan projek melalui VSCode
dengan klik logo play pada bagian pojok kanan atas
40
Struktur Folder Flutter
Adapun struktur folder Projek flutter adalah sebagai berikut:
41
android berisi source code untuk aplikasi android;
ios berisi source code untuk aplikasi iOS;
lib berisi source code Dart, di sini kita akan menulis kode aplikasi;
test berisi source code Dart untuk testing aplikasi;
.gitignore adalah file Git;
.metadata merupakan file yang berisi metadata project yang di-generate otomatis;
.packages merupakan file yang berisi alamat path package yang dibuat oleh pub;
flutter_app.iml merupakan file XML yang berisi keterangan project;
pubspec.lock merupakan file yang berisi versi-versi library atau package. File ini dibuat
oleh pub. Fungsinya untuk mengunci versi package.
pubspec.yaml merupakan file yang berisi informasi tentang project dan libraray yang
dibutuhkan;
README.md merupakan file markdown yang berisi penjelasan tentang source code.
Membuat Hello World
Buka projek aplikasi_flutter_pertamaku menggunakan VSCode agar lebih ringan. Buka file
main.dart yang terletak pada folder lib kemudian ubah menjadi
1. import 'package:flutter/material.dart';
2.
3. void main() {
4. runApp(const MyApp());
5. }
42
6.
7. class MyApp extends StatelessWidget {
8. const MyApp({Key? key}) : super(key: key);
9.
10. @override
11. Widget build(BuildContext context) {
12. return MaterialApp(
13. title: "Aplikasi Flutter Pertama",
14. home: Scaffold(
15. appBar: AppBar(
16. title: const Text('Belajar Flutter'),
17. ),
18. ),
19. );
20. }
21. }
Ketika dijalankan akan menghasilkan
43
Kemudian untuk menambahkan tampilan dibagian dalam (body), pada fungsi Scaffold terdapat
parameter body. Silahkan modifikasi main.dart menjadi seperti berikut
1. import 'package:flutter/material.dart';
2.
3. void main() {
4. runApp(const MyApp());
5. }
6.
7. class MyApp extends StatelessWidget {
8. const MyApp({Key? key}) : super(key: key);
9.
10. @override
11. Widget build(BuildContext context) {
12. return MaterialApp(
13. title: "Aplikasi Flutter Pertama",
44
14. home: Scaffold(
15. appBar: AppBar(
16. title: Text('Belajar Flutter'),
17. ),
18. body: const Center(
19. child: Text("Hello World"),
20. ),
21. ),
22. );
23. }
24. }
Sehingga akan menghasilkan
45
Pada aplikasi di atas, kita membuat StatelessWidget yang berisi widget MaterialApp().
Kemudian di dalam MateralApp() berisi widget lagi: Scaffold, AppBar, Center, dan Text.
Ini adalah widget dasar.
Penjelasan:
• MyApp adalah StatelessWidget, merupakan widget induk;
• MaterialApp adalah widget yang membungkus beberapa widget yang menggunakan
tema material design
• Scaffold adalah widget untuk struktur dasar material design;
• AppBar adalah widget untuk membuat AppBar;
• Center adalah Widget layout untuk membuat widget ke tengah;
• Text adalah widget untuk membuat teks.
Untuk mempermudah dalam pembacaan kode dan maintenance dapat dilakukan
dengan memisahkan MyApp dengan halaman yang ingin ditampilkan.
Silahkan buat sebuah file dengan nama hello_world.dart di dalam folder lib
46
Kemudian bagian Scaffold pada main.dart yang telah dibuat tadi akan kita masukkan ke
dalam hello_world.dart, sehingga pada hello_world.dart akan menjadi
1. import 'package:flutter/material.dart';
2.
3. class HelloWorld extends StatelessWidget {
4. @override
5. Widget build(BuildContext context) {
6. return Scaffold(
7. appBar: AppBar(
8. title: const Text('Belajar Flutter'),
9. ),
10. body: const Center(
11. child: Text('Hello World'),
12. ),
13. );
14. }
15. }
Pada file main.dart kita modifikasi kembali pada bagian home menjadi
1. import 'package:aplikasi_flutter_pertamaku/hello_world.dart';
2. import 'package:flutter/material.dart';
3.
4. void main() {
5. runApp(const MyApp());
6. }
7.
8. class MyApp extends StatelessWidget {
9. const MyApp({Key? key}) : super(key: key);
10.
11. @override
12. Widget build(BuildContext context) {
13. Return const MaterialApp(
14. title: "Aplikasi Flutter Pertama",
15. home: HelloWorld(),
16. );
17. }
18. }
Pada bagian home, kita memanggil class HelloWorld yang telah kita buat sebelumnya
pada file hello_world.dart
Jika kita perhatikan pada bagian body, terdapat Widget Center kemudian didalam Widget
Center tersebut terdapat parameter child untuk meletakkan Widget lain didalam widget
tersebut, dalam hal ini adalah Widget Text
Center(
child: Text('Hello World'),
),
Catatan : dalam Widget selain child, terdapat pula children dengan type data array yang
dimana kita dapat menempatkan beberapa Widget didalamnya contohnya pada Widget
Column dan Row
47
Untuk mempercepat dalam pembuatan class pada VSCode dapat dilakukan dengan mengetik
st kemudian memilih stateless widget ataupun stateless widget kemudian ketikkan nama
class yang diinginkan
Membuat Widget Column
Buat sebuah file dengan nama column_widget.dart didalam folder lib, kemudian ketikkan
kode berikut
1. import 'package:flutter/material.dart';
2.
3. class ColumnWidget extends StatelessWidget {
4. const ColumnWidget({Key? key}) : super(key: key);
5.
6. @override
7. Widget build(BuildContext context) {
8. return Scaffold(
9. appBar: AppBar(
10. title: const Text('Widget Column'),
11. ),
12. body: Column(
13. children: const [
14. Text('Kolom 1'),
15. Text('Kolom 3'),
16. Text('Kolom 2'),
17. Text('Kolom 4')
18. ],
19. ));
20. }
21. }
Kemudian pada file main.dart ubah kodenya menjadi
1. import 'package:aplikasi_flutter_pertamaku/column_widget.dart';
2. import 'package:flutter/material.dart';
3.
4. void main() {
5. runApp(const MyApp());
6. }
7.
8. class MyApp extends StatelessWidget {
9. const MyApp({Key? key}) : super(key: key);
48
