LAB 5

MEMBUAT PROJECT FLUTTER

1. Pastikan emulator Android Anda dalam kondisi hidup. Kita akan gunakan emulator ini untuk
menjalankan project Flutter.

2. Buka aplikasi VS Code.

3. Klik menu View > Command Pallette…

4. Ketik Flutter pada Command Pallete yang terbuka, kemudian pilih Flutter: New Project
5. Pilih template Application.

6. Pada dialog Select Folder arahkan ke D:\flutter \Project kemudian klik Select a folder to create
the project in.

Jika folder Project belum ada, silahkan klik New Folder di direktori D:\flutter dan berikan nama
Project.
7. Berikan nama project demo_flutter kemudian tekan Enter.
8. Pada dialog konfirmasi berikut centang Trust the authors of all files in the parent folder
‘Project’ kemudian tekan tombol Yes, I trust the authors.

Tunggu hingga proses pembuatan project flutter selesai.

9. Jika sudah selesai, maka workspace Anda akan tampil seperti berikut.
10. Pastikan juga VS Code mendeteksi emulator Android Anda, dalam hal ini Nexus 5X.

11. Tekan F5 untuk menjalankan project Flutter pertama Anda. Tampilan workspace Anda akan
tampil seperti berikut.

Akan muncul panel control pada bagian atas workspace.

12. Proses instalasi pertama akan memakan waktu cukup lama. Jika proses instalasi telah selesai
maka aplikasi Anda akan berjalan pada emulator seperti terlihat pada gambar berikut.
13. Lakukan perubahan pada script main.dart baris 27 menjadi seperti berikut.

Ubah title aplikasi dari Flutter Demo Home Page menjadi My Flutter Demo.

Struktur kode pada main.dart terdiri dari tiga bagian:

• Bagian import
Bagian import adalah tempat kita mendeklarasikan atau mengimpor library yang
dibutuhkan pada aplikasi.

• Bagian main
Bagian main adalah fungsi utama dari aplikasi yang akan menjadi entry point. Fungsi
ini akan dieksekusi pertama kali saat aplikasi dibuka.

• Bagian widget
Bagian widget adalah tempat kita membuat widget. Aplikasi Flutter sebenarnya terdiri
dari susunan widget. Widget bisa kita bilang elemen-elemen seperti Tombol, Teks,
Layaout, Image, dan sebagainya. Sebuah widget dapat berisi widget.
14. Buka kembali file main.dart dan ganti isinya dengan script berikut.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'First App',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}

15. Jalankan kembali aplikasi di emulator

Penjelasan dari script di atas adalah sebagai berikut:

Pada aplikasi di atas, kita membuat StatelessWidget yang berisi widget MaterialApp().
Kemudian di dalam MateralApp() berisi widget lagi: Scaffold, AppBar, Center, dan
Text.
 Sehingga strukturnya akan terlihat seperti berikut:

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 wdiget untuk membuat teks.

16. Lakukan update kembali pada main.dart dengan script berikut.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'First App',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
backgroundColor: Colors.deepOrange,
),
body: Column(children: <Widget>[
Image.network(

'https://upload.wikimedia.org/wikipedia/commons/1/17/Google-
flutter-logo.png'),
Text(
'Belajar Flutter untuk Pemula',
style: TextStyle(fontSize: 24, fontFamily:
"Serif", height: 2.0),
),
Text('oleh Kemenkes 2023'),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Image.network(
 'https://www.petanikode.com/img/flutter/flutter-sqr.png'),
Image.network(

'https://www.petanikode.com/img/flutter/flutter-sqr.png')
],
)
])),
);
}
}
17. Jalankan kembali aplikasi, dan pastikan tampil seperti berikut:

Widget Column() dan Row() adalah widget Layout yang fungsinya untuk menanta widget
lainnya. Berikut adalah ilustrasi yang menunjukkan perbedaan kedua widget tersebut.