LAPORAN PRAKTIKUM

PEMROGRAMAN MOBILE

Oleh :

Nama : Isnani
NIM : 1957301025
Kelas : TI-3C
Dosen Pembimbing : Nanda Saputri, SST. M.Kom

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI DAN KOMPUTER
TAHUN 2021
 LEMBAR PENGESAHAN

No. Praktikum : 07/PM/3C/TI/(2021

Judul : Flex,Image dan Spacer

Nama : Isnani

NIM / Kelas : 1957301071 / TI-3C

Jurusan : Teknologi Informasi Dan Komputer

Prodi : Teknik Informatika

Tanggal praktikum : 7 Oktober 2021

Tanggal penyerahan : 28 Oktober 2021

Nilai :

Buketrata, 28 Oktober 2021

Dosen Pembimbing,

Nanda Saputri, SST. M.Kom

2
DAFTAR ISI

3
 PENGUJIAN : IMAGE, FLEXSIBLE DAN SPACER

1. Capaian Praktikum/Kompentensi
Setelah mempelajari Pengujian Image, Flexible And Spacer, mahasiswa diharapkan :
1. Mampu membuat aplikasi yang dapat menampilkan image yang berasal dari internet
2. Mampu membuat apilikasi yang dapat menampilkan image yang berasal dari dalam
harddisc
3. Mampu menata layout pada tampilan screen dengan memanfaatkan flexible dan spacer

2. Keselamatan Kerja
Dalam prinsip kesehatan dan keselamatan kerja dalam dunia pendidikan yang
menggunakan komputer perlu menerapkan prinsip menjaga kesehatan dan keselamatan kerja
menurut petunjuk dan aturan yang sudah ada. Praktikan yang sehari-hari menggunakan
komputer tetap harus memperhatikan prinsip-prinsip kesehatan agar terhindar dari berbagai
gangguan kesehatan yang muncul dan menyerang beberapa bagian tubuh seperti mata, kepala,
tangan dan badan. Dalam penerapan di lapangan salah satu contoh perangkat komputer yang
paling berpotensi menimbulkan gangguan kesehatan adalah layar monitor. Layar monitor
melakukan pemancaran partikelpartikel elementer dan energi radiasi yang dapat menyebabkan
gangguan kesehatan. Berikut beberapa hal yang dapat dilakukan untuk menghindari resiko
dalam bekerja dengan komputer yaitu:
1. Gunakan pakaian praktikum laboratorium

2. Aturlah posisi tubuh saat berkerja dengan komputer hingga merasa aman.

3. Pengaturan meja dan kursi komputer sesuai K3 hingga memberi rasa nyaman.

4. Makan, minum dan istirahatlah yang cukup.

5. Jangan menahan buang air kecil saat berkerja dengan komputer.

6. Gerakanlah tubuh sesekali untuk mengurangi ketegangan otot dan pikiran. Serta Olahraga
secara teratur.
7. Sesekali alihkan pandangan ke luar ruangan untuk relaksasi mata.

Agar terhindar dari gangguan kesehatan tersebut, pengguna komputer perlu

mengontrol waktu pemakaian komputer. Jika harus berada di depan komputer dalam jangka

1
 waktu yang lama, usahakan untuk memberi jeda pada mata agar tidak terus menatap layar
monitor. Selain radiasi dari layar monitor, kita perlu memperhatikan pula faktor-faktor lain
yang berpotensi menimbulkan gangguan kesehatan saat menggunakan komputer, diantaranta
posisi tubuh, posisi perangkat komputer, pencahayaan ruangan dan kondisi lingkungan (suhu,
kualitas udara dan gangguan suara). Menggunakan komputer dengan posisi tubuh yang benar,
akan memberikan kenyamanan pada praktikan. Dengan posisi tubuh yang rileks dalam
penggunakan komputer maka dapat menjaga kesehatan anggota tubuh.

3. Teori
Membahas tentang tata letak, maka widget Flexible dan widget Spacer memiliki
peranan yang cukup menarik untuk membuat grid antar widget dengan menentukan besaran
porsinya masing-masing. Kemudian menjadikan image sebagai object yang akan mengisi
ruang-ruang tersebut.
Ketika berinteraksi dengan proses pembuatan layout, grid memiliki peranan penting
untuk membagi space screen sesuai dengan kebutuhan penggunanya. Jika sebelumnya kita
telah belajar mengenai widget Row-Column untuk mengatur layout secara vertical maupun
horizontal, maka kali ini kita akan belajar bagaimana menggunakan Flexible yang lebih
responsive untuk membagi ruang antar widget yang ada.

4. Alat dan Bahan

Alat dan bahan yang diperlukan dalam pengujian Image dan Flexible yaitu
1. Komputer/Labtop
2. SDK Flutter
3. Android Emulator
4. VS Code

5. Prosedur Praktikum
Prosedur praktikum yang dilaksankan untuk penerapan image, flexible dan spacer
adalah sebagai berikut.
1. Siapkan komputer/labtop
2. Buka aplikasi VS Code
3. Buatlah project baru dengan nama image_flex_ danspacer

2
4. Persiapkan terlebih dahulu Gambar (image). Dalam pengujian ini telah dipersiapkan tiga
link image yaitu.
a. Image 1 https://i.ytimg.com/vi/5cjWMAAbJPI/hqdefault.jpg,
b. Image 2 https://i.ytimg.com/vi/QZAc1hT1vdg/hqdefault.jpg,
c. Image 3
Satu image lagi yang perlu dipersiapkan yaitu untuk image yang akan di letakkan
ditengah layout. Dalam hal ini dipilih logo politeknik negeri lhokseumawe untuk
diletakkan di tengah layout.
5. Buka project imageflexdanspacer dan buatlah folder assets serta dalam folder asset buat
satu lagi folder dengan bernama images. Selanjunya letakkan gambar logo politeknik
didalam folder /imageflexdanspacer/assets/images/.
6. Selanjutnya modifikasi file pubspec.yaml. Scroll ke bawah sampai menemukan kata-kata
berikut ini.
# assets:
# - Images/a_dot_burr.jpeg
# - Images/a_dot_ham.jpeg ubah kata-kata tersebut dengan cara menghapus tanda
pagar dan memasukkan alamat direktori file gambar yang dimasukkan ke dalam project.
assets:
- assets/Images/pnl.png
Hanya satu gambar yang dimasukkan kedalam project. Bila ingin menambahkan
gambar lagi maka tinggal menuliskan alamat direktori file dibawah alamat yang sudah
ada. Untuk lebih jelasnya dapat dilihat pada Gambar 5.2. Pubspec.yaml.

Gambar 5.1. Pubspec.yaml

3
7. Tulislah code dibawah ini

8. import 'package:flutter/material.dart';
9.
10. void main() => runApp(MyApp());
11.
12. class MyApp extends StatelessWidget {
13. @override
14. Widget build(BuildContext context) {
15. return MaterialApp(
16. home: Scaffold(
17. appBar: AppBar(
18. title: Text("Flexible, Image Dan Spacer"),
19. ),
20. body: Column(
21. children: <Widget>[
22. Flexible(
23. flex: 1,
24. child: Row(
25. children: <Widget>[
26. Flexible(
27. flex: 1,
28. child: Container(
29. color: Colors.pink[100],
30. foregroundDecoration: BoxDecoration(
31. image: DecorationImage(
32. image: NetworkImage(
33. "https://i.ytimg.com/vi/5cjWMAAbJPI/hqdefault.jpg",
34. ),
35. fit: BoxFit.fill),
36. ),
37. ),
38. ),
39. Flexible(
40. flex: 2,
41. child: Container(
42. color: Colors.pink[100],
43. foregroundDecoration: BoxDecoration(

4
44. image: DecorationImage(
45. image: NetworkImage(
46. "https://i.ytimg.com/vi/QZAc1hT1vdg/hqdefault.jpg",
47. ),
48. fit: BoxFit.fill),
49. ),
50. ),
51. ),
52. Flexible(
53. flex: 2,
54. child: Container(
55. color: Colors.pink[300],
56. foregroundDecoration: BoxDecoration(
57. image: DecorationImage(
58. image: NetworkImage(
59. "https://pixnio.com/free-images/2018/11/12/2018-11-12-
14-02-38-1200x800.jpg.",
60. ),
61. fit: BoxFit.fill),
62. ),
63. ),
64. ),
65. ],
66. ),
67. ),
68. Flexible(
69. flex: 2,
70. child: Container(
71. margin: EdgeInsets.all(10),
72. decoration: BoxDecoration(
73. color: Colors.amber[200],
74. borderRadius: BorderRadius.circular(40),
75. image: DecorationImage(image: AssetImage('assets/images/pnl.pn
g'), fit: BoxFit.fill),
76. ),
77. ),
78. ),

5
79. Flexible(
80. flex: 1,
81. child: Container(
82. color: Colors.blueGrey,
83. child: Row(
84. children: <Widget>[
85. Flexible(
86. child: Container(
87. color: Colors.yellow,
88. ),
89. ),
90. Spacer(
91. flex: 2,
92. ),
93. Flexible(
94. child: Container(
95. color: Colors.red[300],
96. ),
97. ),
98. ],
99. ),
100. ),
101. )
102. ],
103. ),
104. ),
105. );
106. }
107. }
Tabel 6.1. Daftar Hasil Pengujian
No. Langkah Hasil Print Screen Keterangan

6
1. Emulator
Android

2 Draggable

7
 3 TextField

Analisa dan Kesimpulan

1. Analisa Data:
Berdasarkan uraian pada prosedur praktikum dan data percobaan maka selanjutnya
jelaskan analisa percobaan Image, Flexible And Spacer,textfield pada form dibawah ini.
Program ini berisi mempunyai 3 halaman, yaitu login, first page, dan second
page. Untuk membuat sebuah aplikasi yang mempunyai banyak page dibutuhkan
main.dart yang terpisah untuk membuka halaman paling awal dari aplikasi.
Untuk berpindah-pindah halaman dibutuhkan sebuah Navigator yang mengatur
pergantian halaman yang ditampilkan pada layar. Jadi, apabila menekan tombol
untuk masuk ke halaman lain, Navigator menggunakan fungsi
pushReplacement, apabila ingin kembali ke halaman sebelumnya maka
Navigator menggunakan fungsi pop. cara kerja Flexible adalah dengan
membuat 3 buah yang disusun secara horizontal, dimana kotak paling kiri memiliki

8
 ukuran lebih kecil dari 2 kotak lainnya. Selanjutnya adalah 3 buah kotak lagi yang akan
disusun secara vertical dimana kotak tengah memiliki ukuran lebih besar dari 2 kotak
lainnya.
Code di atas masih berupa kerangka dimana children dari Column akan kita isi
dengan skenario yang telah digambarkan sebelumnya. Jadi kita tetap
menggunakan Row-Column untuk mengatur susunan widget baik
secara vertical maupun horizontal, sedangkan Flexible bertindak untuk
menentukan besaran ruang yang ingin diberikan kepada widget yang ada di dalam.
Pada program ini menggunakan textfield yang didekorasi dengan prefixIcon, yang
mana prefixIcon adalah icon yang terletak didalam textfield. Di program ini juga terdapat
labeltext yang berfungsi sebagai placeholder yang apabila textfield ditekan text tersebut
akan berpindah ke atas. Untuk border menggunakan OutlineInputBorder dan
BorderRadius yang bersifat circular bernilai 20. Untuk password terdapat argument
obscureText yang bernilai true agar text menjadi tidak terlihat. Setiap text yang diinput
akan dibaca oleh controller.

2. Kesimpulan:
Berdasarkan analisa maka selanjutnya berikan kesimpulan terkait Image, Flexible And
Spacer pada form dibawah ini.
Animasi sederhana sering kali melibatkan perubahan properti-properti
pada Container selama aplikasi dijalankan. Misalnya, ketika kita ingin membuat animasi
perubahan warna latar belakang dari abu-abu menjadi warna hijau yang tujuannya untuk
menunjukkan bahwa item telah dipilih oleh pengguna
Secara default, List View memiliki padding antar widgetnya, jika ingin
menghilangkan paddingnya, set padding ke EdgeInsets.all(0.0). Pemilihan widget yang
tepat akan sangat membantu dalam proses development sebuah aplikasi.

VIII.Daftar Pustaka
Flutter. Adding Assets and Images. Diperoleh 09 April 2020, dari
https://flutter.dev/docs/development/ui/assets-and-images

Flutter. Spacer Class. Diperoleh 09 April 2020, dari

https://api.flutter.dev/flutter/widgets/Spacer-class.html

Daeng Web (2020, januari). Mengenal Widget Flutter #4: Image, Flexible & Spacer.
Diperoleh 18 Maret 2020, dari https://daengweb.id/mengenal-widget-flutter-4image-
flexible-spacer

9
Suragch (2019, 6 Juni). How To Include Images In Your Flutter App. Diperoleh 09 April
2020, dari https://medium.com/@suragch/how-to-include-images-inyour-flutter-app-
863889fc0b29

Telkomuniversity (2017, 5 Mai). Pentingnya K3 Dalam Penggunaan Laboratorium

Komputer. Diperoleh 18 Maret 2020, dari
https://fit.labs.telkomuniversity.ac.id/pentingnya-k3-dalam-penggunaanlaboratorium-
komputer/

10