LAPORAN PRAKTIKUM 5

PEMROGRAMAN MOBILE

Oleh

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

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI DAN KOMPUTER

POLITEKNIK NEGERI LHOKSEUMAWE

TAHUN 2021
 LEMBAR PENGESAHAN

No. Praktikum : 05/PPM/3C/TI/2021

Nama : Isnani

NIM / Kelas : 1957301025 / TI 3C

Jurusan : Teknologi Informasi Dan Komputer

Prodi : Teknik Informatika

Tanggal praktikum : 07 Oktober 2021

Tanggal penyerahan : 14 Oktober 2021

Buketrata, 14 Oktober 2021

Dosen Pembimbing,

Nanda Saputri, SST., MT

NIP
 BAB I

PENDAHULUAN

1.1 Tujuan Praktikum

Setelah mempelajari Stateless And Statefull Widget mahasiswa diharapkan :

1. Mampu memahami konsep stateless dan statefull widget

2. Mampu membuat stateless dan statefull widget dalam flutter

3. Mampu membuat aplikasi statefull widget dengan Text dan raisedbutton

Setelah mempelajari List View, mahasiswa diharapkan untuk:

1. Mampu memahami cara mengatasi penumpukan element-element secara vertical

dengan memanfaatkan scrollable.

2. Mampu membuat widget list view dengan container

1.2 Dasar Teori

1.2.1 STATELESS AND STATEFULL WIDGET

Hal yang unik dan menarik perhatian dari Flutter adalah stateless And statefull
widget, dimana kedua bagian ini memiliki perannya masing-masing. Stateless widget adalah
widget statis dimana seluruh konfigurasi yang dimuat didalamnya telah diinisiasi sejak awal.
Dalam flutter Statefull widget berlaku sebaliknya dimana sifatnya adalah dinamis, sehingga
widget ini dapat diperbaharui setiap saat dibutuhkan berdasarkan user actions atau ketika
terjadinya perubahan data.

1.2.2 LIST VIEW

Cakupan layar yang terbatas dari smartphone membuat widget List View sangat
efektif digunakan untuk mengatasi penumpukan elemen-elemen secara vertical, karena
dengan memanfaatkan scrollable yang dimilikinya maka aplikasi yang di develop bisa di-
scroll untuk melihat objek lainnya pada bagian bawah. Secara umum code format list view
adalah sebagai berikut.
 Biasanya format ini digunakan untuk jumlah children yang sedikit karena suatu
daftar juga akan membangun elemen-elemen yang tidak terlihat dalam daftar dan jumlah
elemen yang banyak membuat proses rendering jadi tidak efisien. Dibawah ini merupakan
contoh tampilan dari widget list.
 BAB II

PEMBAHASAN

2.1 Prosedur Praktikum Stateless And Statefull Widget

Prosedur praktikum untuk statefull widget adalah sebagai berikut.

1. Siapkan komputer/laptop
2. Buka Aplikasi VS Code
3. Buatlah project baru dalam VS Code dengan cara click kiri pada menu view dan pilih
command pallete dan pilih flutter new project dan beri nama project tersebut dengan
nama stateless_statefull_widget.
4. Pilih tempat penyimpanan project stateless_statefull_widget di dalam direktori yang
diinginkan. Dalam hal ini project stateless_statefull_widget saya simpan pada direktori
~/AndroidStudioProjects/.
5. Stateless widget merupakan widget yang tidak memililiki state, state di sini dapat di
pahami dengan suatu keadaan. Stateless artinya widget yang tidak memiliki keadaan.
Statefull widget merupakan widget yang memiliki state (keadaan tertentu) maka widget
statefull memiliki state yang dinamis. Berikut ini merupakan code statefull widget.

2.2 Percobaan Stateless And Statefull Widget

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

int number = 0;
void tekanTombol() {
setState(() {
number = number + 1;
 });
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Statefull Widget Demo"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
number.toString(),
style: TextStyle(fontSize: 10 + number.toDouble()),
),
RaisedButton(
child: Text("Tambah Bilangan"),
onPressed: tekanTombol,
)
],
),
),
),
);
}
}
2.4 Percobaan Praktikum List View

Analisis:

Setiap kali pengguna menekan tambah bilangan pada aplikasi maka aplikasi akan
memanggil fungsi void _increment() yang di dalamnya terdapat suatu fungsi setState() yang
akan bertugas untuk memberitahu widget bahwa ada objek yang berubah pada State sehingga
aplikasi akan memuat ulang widget tersebut dengan nilai yang sudah diubah.

2.3 Prosedur Praktikum List View

Prosedur praktikum untuk percobaan List View adalah sebagai berikut.

1. Siapkan Sistem operasi linux mint

2. Buka aplikasi VS Code

3. Buat project baru dengan nama lview_tstyle

4. Buka project lview_tstyle dan tuliskan code dibawah ini pada file lib/main.dart.

2.4 Percobaan Praktikum List View

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('List View & Text Style'),
),
body: ListView(
padding: EdgeInsets.all(10.0),
children: <Widget>[
Container(
height: 60,
color: Colors.green,
child: Center(
child: Text("List View Flutter"),
),
),
Container(
height: 60,
color: Colors.green[400],
child: Center(
child: Text("Text Style Flutter 1"),
),
),
Container(
height: 60,
color: Colors.red[300],
child: Center(
child: Text("Text Style Flutter 2"),
),
),
Container(
height: 60,
color: Colors.red[200],
child: Center(
child: Text("Text Style Flutter 3"),
),
),
Container(
height: 60,
color: Colors.green[100],
child: Center(
child: Text("Text Style Flutter 4"),
),
),
Container(
height: 60,
color: Colors.blue[100],
child: Center(
child: Text("Text Style Flutter 5"),
 ),
),
Container(
height: 60,
color: Colors.blue[100],
child: Center(
child: Text("Text Style Flutter 6"),
),
),
Container(
height: 60,
color: Colors.blue[400],
child: Center(
child: Text("Text Style Flutter 7"),
),
),
Container(
height: 60,
color: Colors.blue[300],
child: Center(
child: Text("Text Style Flutter 8"),
),
),
Container(
height: 60,
color: Colors.blue[200],
child: Center(
child: Text("Text Style Flutter 9"),
),
),
Container(
height: 60,
color: Colors.blue[100],
child: Center(
 child: Text("Text Style Flutter 10"),
),
),
Container(
height: 60,
color: Colors.blue[100],
child: Center(
child: Text("Text Style Flutter 11"),
),
),
Container(
height: 60,
color: Colors.blue[100],
child: Center(
child: Text("Text Style Flutter 12"),
),
),
Container(
height: 60,
color: Colors.blue[100],
child: Center(
child: Text("Text Style Flutter 13"),
),
),
Container(
height: 60,
color: Colors.blue[100],
child: Center(
child: Text("Text Style Flutter 14"),
),
),
],
),
),
 );
}

Analisis:

 Kita menggunakan ListView.Builder untuk membuat ListView.

 Padding digunakan untuk memberikan space tambahan di bawah list terakhir.
 ItemCount untuk menentukan jumlah data yang akan kita munculkan di list.
 ItemBuilder untuk menentukan widget/layout mana yang akan digunakan di
ListView.
 BAB III

PENUTUP

Stateful widget merupakan suatu widget yang sifatnya dinamis atau dapat
berubah-ubah, kebalikan dari stateless widget.Stateful widget dapat mengubah atau
mengupdate tampilan, menambah widget laiinya, mengubah nilai variabel, icon, warna
dan masih banyak lagi.Stateful widget dapat mengubah dirinya kapanpun dibutuhkan
berdasarkan action dari pengguna atau bahkan ketika terjadi perubahan data dari sisi
database.Masih menggunakan contoh yang sama seperti pada stateless hanya saja kita
dapat mengubah nilai yang ada pada body sesuka kita berdasarkan action dari
pengguna.

Pada, Stateless Widget merupakan Widget yang tidak bisa berubah-ubah

sedangkan Statefull Widget sebaliknya. Keduanya sangat mudah dipahami karena
pengertiannya saling bertolak belakang. Penggunaan kedua widget ini sangat
tergantung pada kebutuhan aplikasi. Dan seringnya, keduanya digunakan dalam satu
file dart.

Listview adalah komponen dasar di android yang paling sering dipakai. Mari
kita analisa satu persatu, coba cek aplikasi contact, Email, Twitter timeline, Seting, Call
log, news, RSS feed, Playlist music dan masih banyak lagi yang lain. Semua itu
dibangun dengan ListView. Maka dari itu, memahami Listview itu hukumnya wajib di
android.