Aplikasi Pertamaku

Ayo kita coba buat aplikasi sederhana, silahkan ikuti langkah-langkah berikut
ini:

1. Buka Visual Studio Code

2. Tekan F1 atau pada tab View pilih Command Pallete...
(Ctrl+Shift+P)

3. Selanjutnya pilih Flutter: New Application Project

4. Maka Visual Code Studio akan langsung mengarahkan kita ke

file main.dart hapus isinya kemudian sisakan kode berikut:
5. import 'package:flutter/material.dart';

6.

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

8. Sebenarnya bentuk class main dapat seperti ini

9. import 'package:flutter/material.dart';

10.

11. void main() {

12. runApp(MyApp());

fungsi keduanya sama, hanya perbedaan pada langkah ke 4 class

main menggunakan Lambda Expressions.
13. Untuk class MyApp kita buat dibawahnya cukup ketik stl di
bawah class main, lalu pilih Flutter stateless widget

maka bentuk programnya sekarang seperti ini:

14. import 'package:flutter/material.dart';

15.

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

17.

18. class MyApp extends StatelessWidget {

19. @override

20. Widget build(BuildContext context) {

21. return Container(

22.

23. );

24. }

Oke, disini sudah ada sebuah class MyApp yang merupakan turunan
dari stateless widget. Stateless widget sendiri memiliki sebuah method
yang bernama build yang di override dengan class turunannya. Jadi
nantinya method build ini akan mengembalikan sebuah widget yang
merupakan tampilan dari stateless widget yang juga merupakan tampilkan
dari MyApp yang akan ditampilkan di layar smartphone.
25. Selanjutnya saya mengganti Container() menjadi MaterialApp()
26. import 'package:flutter/material.dart';

27.

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

29.

30. class MyApp extends StatelessWidget {

31. @override

32. Widget build(BuildContext context) {

33. return MaterialApp(

34.

35. );

36. }

}
 MaterialApp() merupakan sebuah widget yang berisi data-data
dan tools yang diperlukan aplikasi ketika menggunakan material design.
37. Oke, kita isi widget MaterialApp() dengan properti home:
38. import 'package:flutter/material.dart';

39.

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

41.

42. class MyApp extends StatelessWidget {

43. @override

44. Widget build(BuildContext context) {

45. return MaterialApp(

46. home: ,

47. );

48. }

properti home: merupakan rute yang ditampilkan pertama kali ketika aplikasi
dijalankan secara normal. Namun disini kita perlu menambahkan widget
Scaffold yang berfungsi sebagai tampilan dasar dari sebuah aplikasi, karena
memang awalnya widget MaterialApp() tidak memiliki tampilan sama sekali.
import 'package:flutter/material.dart';

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

 class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(),

);

49. Lalu untuk melengkapi isi dari widget Scaffold kita akan
menambahkan 2 properti yaitu appbar dan body

maka sekarang kita memiliki properti appbar yang didalamnya

terdapat widget Appbar (berfungsi untuk menampilkan panel aplikasi
atas). Kemudian kita lengkapi isi dari widget Appbar dengan properti
title yang didalamnya kita isi dengan widget Text untuk menampilkan
tulisan "Aplikasi Pertamaku". Pada properti body kita isi dengan widget
Text untuk menampilkan tulisan "Halo Semuaaa...".
50. Save project yang sudah dibuat.
51. Jalankan projectnya dengan menekan F5 atau klik tombol , jika
berhasil maka tampilan aplikasinya seperti berikut:

52. Agar tulisan "Halo Semuaaa..." ada di tengah layar, maka kita dapat
memanfaatkan fitur berikut ini (arahkan kursor mouse kita ke widget
Text dan klik kanan):
 pilih Refactor

lalu
pilih Wrap with Center. Hasil programnya sebagai berikut :

53. Save project yang sudah dibuat.

54. Jalankan projectnya dengan menekan F5 atau klik tombol , jika
berhasil maka tampilan aplikasinya seperti berikut:

Maka dari semua yang sudah dijelaskan dapat saya simpulkan:

1. Aplikasi Flutter memiliki sebuah fungsi yang bernama main.

2. Fungsi main tersebut akan menjalankan
sebuah class bernama MyApp (penamaan bersifat optional).
3. Lalu menampilkan widget yang dikembalikan oleh method build.
4. Pada method build, kita membuat 1 buah widget yaitu MaterialApp().
5. Tampilan utama dari MaterialApp() ini menggunakan widget
Scaffold (merupakan tampilan dasar dari aplikasi android).
6. Di dalam widget Scaffold terdapat 2 bagian utama
yaitu properti appbar dan body.
7. Pada properti appbar, kita isi dengan widget Appbar yang
dilengkapi properti title dan saya isi dengan widget Text untuk menampilkan
tulisan "Aplikasi Pertamaku".
8. Lalu properti body kita isi dengan widget Text untuk menampilkan
tulisan "Halo Semuaaa...", kemudian widget Text kita masukan ke
dalam widget Center agar tulisan "Halo Semuaaa..." berada di tengah layar.