Modul Praktikum 1

Pengenalan komponen widget pada Flutter

TUJUAN
● Mahasiswa dapat mempelajari dasar pemrograman Flutter.
● Mahasiswa dapat mengenal widget yang ada pada Flutter.
● Mahasiswa dapat mengimplementasikan beberapa jenis widget ke
dalam aplikasi yang dibuat.

DESKRIPSI
Flutter
Flutter adalah sebuah framework Cross-platform yang bersifat open source
yang dikembangkan oleh Google. Flutter ini dikenal dengan keunggulannya
yang dapat membantu para developer mengembangkan aplikasi dengan
cepat dan indah. Flutter dapat dipakai untuk mengembangkan aplikasi mobile,
web dan desktop dalam sekali coding atau dikenal dengan single codebase
yang di compile secara native.

Dart
Aplikasi yang dibuat dengan Flutter ditulis dengan bahasa pemrograman Dart.
Dart adalah bahasa pemrograman yang dioptimalkan untuk klien agar mampu
menciptakan dan mengembangkan aplikasi dengan cepat di platform apa
pun. Bahasa pemrograman yang dirancang oleh Lars Bak dan Kasper Lund
ini dapat digunakan untuk pemrograman web, aplikasi mobile, server, dan
perangkat yang mengusung teknologi Internet of Things (IoT).
Struktur Project Flutter

Pada struktur project Flutter terdapat beberapa folder dan file yang harus
diketahui, misalnya :

● Folder android
Folder ini berisi file gradle, AndroidManifest, dan lain-lain yang berfungsi
untuk mengatur konfigurasi aplikasi android.

● Folder ios
Folder ini sama saja dengan folder android hanya saja folder ini untuk
mengatur konfigurasi aplikasi ios.

● Folder build
Folder ini berisi hasil build dari project anda setelah melakukan proses
build.

● Folder lib
 Folder ini berisi seluruh source code project Flutter anda.

● File pubspec.yaml
File ini digunakan untuk menyimpan package dependencies.

Widget
Semua yang berhubungan dengan komponen Flutter disebut dengan Widget.
Flutter memiliki banyak sekali widget namun pada pertemuan kali ini kita tidak
akan membahas secara keseluruhan dari widget Flutter. Pertemuan pertama
ini widget yang akan kita gunakan adalah basic widget. Basic widget
merupakan widget yang wajib diketahui dalam pembuatan aplikasi Flutter.
Basic widget terdiri dari :

Scaffold
Scaffold merupakan sebuah widget yang digunakan untuk membuat tampilan
dasar material design pada aplikasi Flutter. Untuk membuat sebuah Scaffold
kita hanya cukup memanggil class Scaffold seperti berikut:

​
​ class MyHomePage extends StatelessWidget {
​ @override
​ Widget build(BuildContext context) {
​ return Scaffold();
​ }
​ }
​
​

Appbar
Setelah kita membuat Scaffold pertama kita pada Widget FirstScreen,
sekarang kita akan menambahkan AppBar pada Scaffold. Seperti yang kita
tahu AppBar merupakan Header (bagian paling atas) aplikasi atau biasa
dikenal dengan toolbar. Pada AppBar umumnya terdapat judul dan
ActionButton. Berikut adalah cara menambahkan AppBar pada Scaffold:

​
​ AppBar(
​ title: Text('First Screen'),
 ​ ),

​
Container
Container adalah widget yang digunakan untuk melakukan styling, membuat
sebuah shape (bentuk), dan layout pada widget child-nya. Dengan
menggunakan Widget Container kita dapat membuat variasi widget yang kita
buat. Sebagai contoh:

Container(
child: const Text('Hi', style: TextStyle(fontSize: 40)),
color: Colors.blue,
)

Text
Text merupakan widget yang digunakan untuk menampilkan sebuah teks atau
keterangan.widget text ini memiliki properti yang sering digunakan seperti
style yang dapat mengubah font, ukuran font, ketebalan dll. Contohnya :

const Text(
'Hi',
style: TextStyle(
fontSize: 40)
)

Image
Dalam pengembangan suatu aplikasi kita tidak akan lepas dari image atau
gambar. Pada topik kali ini kita akan belajar bagaimana menampilkan gambar
dari internet dan project asset.

Image.network
Untuk menampilkan gambar yang bersumber dari internet, kita akan
menggunakan method Image.network. Method ini cukup menambahkan URL
 gambar dari internet dan kita pun dapat menambahkan width dan height juga.
Cara penulisan method ini sebagai berikut:

​ Image.network(
​ 'https://picsum.photos/200/300',
​ width: 200,
​ height: 200,
​ ),

​
​
​
Image.asset
Selain melalui internet, kita juga dapat menampilkan gambar yang bersumber dari
asset project. Asset disini berupa gambar-gambar yang nantinya didaftarkan pada
project. Untuk mendaftarkan asset gambar pada project kita harus menambahkannya
pada berkas pubspec.yaml.

Pertama kita harus menambahkan terlebih dahulu gambar yang akan didaftarkan ke
dalam folder project kita.

Masukkan berkas gambar yang ingin Anda gunakan ke dalam folder image.
Sebagai contoh kita menggunakan gambar bernama android.png.
 Setelah menambahkan gambar pada project, saatnya kita mendaftarkan
gambar tersebut pada pubspec.yaml.

Di dalam berkas pubspec.yaml kita akan daftarkan asset gambar seperti

berikut:

​ flutter:
​ uses-material-design: true
​ assets:
​ - images/android.png

​ Apabila ada banyak gambar yang kita masukkan ke dalam lokasi folder,
dibandingkan menuliskan lokasi gambar satu per satu, kita bisa langsung
menuliskan folder images/ seperti berikut:

​ flutter:
​ uses-material-design: true
​ assets:
​ - images/

Setelah menambahkan assets kita harus me-refresh pubspec.yaml dengan

cara save berkas pubspec.yaml bila menggunakan visual studio code atau
menekan 'Packages get' yang ada di pojok kanan atas untuk android studio.

Kita telah mendaftarkan suatu asset. Sekarang kita akan panggil asset
tersebut pada kode kita dengan method Image.asset. Cara penulisannya
seperti berikut:

​ class FirstScreen extends StatelessWidget {

​
 ​ @override
​ Widget build(BuildContext context) {
​ return Scaffold(
​ body: Center(
​ child: Image.asset('images/android.png', width:
200, height: 200),
​ ),
​ );
​ }
​ }

Icon
Icon merupakan Widget yang digunakan untuk menambahkan sebuah icon.

​ Icon(
​ Icons.favorite,
​ ),

ElevatedButton
ElevatedButton merupakan bagian dari Material Design widget dari Flutter.
Untuk menggunakan ElevatedButton seperti berikut:

ElevatedButton(
​ onPressed: (){
​ // Aksi ketika button diklik
​ },
​ child: Text('Tombol'),
​ );

​
​
Pada kode diatas ElevatedButton memiliki 2 parameter yaitu onPressed dan
child. Parameter onPressed merupakan sebuah function event ketika tombol
 ditekan dan sebenarnya ada event-event lain seperti onLongPress dan
onHighlightChanged. Parameter child diisi oleh widget pada umumnya.

Row
Widget Row merupakan suatu widget yang digunakan untuk membuat
widget-widget tersusun berjajar secara horizontal. Row memiliki sintaks
seperti berikut:

​ Row(
​ children: <Widget>[
​ //di sini berisi widget-widget
​ ],
​ ),

​
​

Untuk membuat widget-widget berjajar secara horizontal kita harus

memasukkan widget-widget tersebut ke dalam parameter children. Parameter
children berisi kumpulan atau list dari widget karena kita dapat menyusun
beberapa widget sekaligus di dalamnya. Jika mengacu pada contoh
tombol-tombol di atas kodenya seperti berikut:

​ Row(
​ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
​ children: <Widget> [
​ IconButton(
​ icon: const Icon(Icons.share),
​ onPressed: (){}
​ ),
​ IconButton(
​ icon: const Icon(Icons.thumb_up),
​ onPressed: (){}
​ ),
 ​ IconButton(
​ icon: const Icon(Icons.thumb_down),
​ onPressed: (){}
​ ),
​ ],
​ ),

Column
Column merupakan suatu widget yang digunakan untuk membuat widget-
widget tersusun berjajar secara vertikal. Column memiliki sintaks mirip
dengan Row, seperti berikut:

​ Column(
​ children: <Widget>[
​ Text(
​ 'Sebuah Judul',
​ style: TextStyle(fontSize: 32, fontWeight:
FontWeight.bold),
​ ),
​ Text('Lorem ipsum dolor sit amet'),
​ ],
​ ),

untuk informasi lebih lengkapnya tersedia pada dokumentasi flutter sebagai

berikut :

https://flutter.dev/docs/development/ui/widgets/basics
IMPLEMENTASI
Membuat Project baru
Berikut ini adalah cara membuat project baru di Android :

1. Buka Visual Studio kalian, kemudian pilih view > Command Pallete...

2. Kemudian, pilih Flutter : New Project

3. Masukkan nama project anda, lalu klik enter

4. Pilih tempat penyimpanan sesuai kemauan anda

5. Kemudian akan file anda akan muncul dengan nama main.dart yang
berisi kode seperti dibawah ini

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

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

class _MyHomePageState extends State<MyHomePage> {

int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
 });
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many
times:',
),
Text(
'$_counter',
style:
Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
6. Kemudian coba run
hasil run :
Modul Praktikum 2
Implementasi layout pada Flutter

TUJUAN
● Mahasiswa dapat mengetahui macam - macam layout pada Flutter.
● Mahasiswa dapat mengimplementasikan layout pada Flutter.

DESKRIPSI
Layout
Layout digunakan untuk mengatur widget seperti kolom, baris dan banyak tata
letak lainnya. Layout ada dua jenis yaitu Single-child layout widgets dan
Multi-child layout widgets.

● Single-child layout widgets

kali ini kita tidak akan membahas semua tentang single-child layout
widget, berikut ini beberapa contoh dari single-child layout widget :

Padding

Padding digunakan untuk memberikan jarak (ruang) atas, bawah,

kanan dan kiri dari child widgetnya.

Padding(
padding: const EdgeInsets.all(16.0),
child: Text('Hello World!'),
)

Center

Widget ini digunakan untuk meletakkan childnya di tengah.

 Center(b
child: Text('Hello World!'),
)

Expanded

Widget ini digunakan jika kita ingin memenuhi ruang yang ada misalnya
pada colum atau row.

Expanded(
child: Container(
color: Colors.amber,
width: 100,
),
)

● Multi-child layout widgets

kali ini kita tidak akan membahas semua tentang multi-child layout
widget, berikut ini beberapa contoh dari multi-child layout widget :

List View
Widget ListView bisa meletakkan komponen secara vertikal atau
horizontal dan dapat di scroll.

ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160,
color: Colors.red,
),
Container(
width: 160,
color: Colors.green,
 ),
],
)

Grid View

Widget GridView ini adalah sebuah widget yang mengatur tata letak
seperti array 2D yang dapat di scroll.

GridView.count(
primary: false,
padding: EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: Text("Hello"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: Text("World"),
color: Colors.teal[200],
),
],
)

Build Dynamic Layout

Build Dynamic Layout adalah sebuah widget yang digunakan untuk membuat
tampilan secara dinamis. Contohnya pada ListView dan GridView daripada
membuat widget tersebut secara berulang ulang lebih baik menggunakan
sebuah builder.

● ListView.builder
Sebuah Widget ListView memiliki sebuah builder yang artinya berapa
jumlah model Widget yang sama dapat kita buat hanya dengan 1
model tanpa perlu kita copy-paste berulang-ulang. Intinya kita bisa
mengatur jumlah layout yang ingin kita buat.

final List<String> entries = <String>['A', 'B', 'C'];

final List<int> colorCodes = <int>[600, 500, 100];

ListView.builder(

padding: const EdgeInsets.all(8),

itemCount: entries.length,

itemBuilder: (BuildContext context, int index) {

return Container(

height: 50,

color: Colors.amber[colorCodes[index]],

child: Center(child: Text('Entry

${entries[index]}')),

);

);
● GridView.builder
GridView digunakan untuk membuat sebuah layout yang bermodelkan
sebuah grid atau yang biasa kita lihat seperti layout kotak-kotak seperti
layout pada galeri teman-teman.

final List<String> entries = <String>['A', 'B', 'C'];

final List<int> colorCodes = <int>[600, 500, 100];

GridView.builder(

padding: const EdgeInsets.all(8),

itemCount: entries.length,

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
),

itemBuilder: (BuildContext context, int index) {

return Container(

height: 50,

color: Colors.amber[colorCodes[index]],

child: Center(child: Text('Entry

${entries[index]}')),

);

);
IMPLEMENTASI

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Homepage(),
);
}
}

class Homepage extends StatelessWidget {

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("List View"),
),
body: ListView.builder(
itemCount: entries.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 70,
 color: Colors.blue[colorCodes[index]],
child: Center(
child: Text('${entries[index]}')
),
);
}),
);
}
}

Hasilnya :
Modul Praktikum 3
Implementasi form dan navigasi pada Flutter

TUJUAN
● Mahasiswa dapat mengimplementasikan form pada Flutter.
● Mahasiswa dapat memahami navigasi pada Flutter.
● Mahasiswa dapat mengimplementasikan navigasi pada Flutter.

DESKRIPSI
Form
Form merupakan sebuah Widget penampung yang digunakan untuk
mengelompokkan beberapa form field widget. Salah satu widget yang
digunakan pada form adalah Text Field.

Text Field
Sebuah bidang teks memungkinkan pengguna memasukkan teks.

TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
)

Navigator
Navigator merupakan sebuah Widget yang digunakan untuk melakukan
perpindahan dari satu halaman ke halaman yang lain sekaligus dapat
mengirimkan sebuah variabel di dalamnya.
Perintah untuk memanggil Widget Navigator:
● Navigator.push()
Method Navigator.push digunakan untuk berpindah dari activity
pertama ke halaman selanjutnya kemudian ketika dari halaman kedua
kita menekan tombol back atau kembali maka kita akan dialihkan ke
halaman pertama.

Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Page2(),
),
);

*keterangan Page2() merupakan nama class.

● Navigator.pop()
Method Navigator.pop digunakan untuk kembali kehalaman
sebelumnya (menghancurkan halaman yang aktif).

Navigator.pop(context);

● Navigator.pushReplacement()
Method Navigator.pushReplacement digunakan untuk perpindahan
halaman dari satu halaman ke halaman lain akan tetapi, ketika tombol
kembali ditekan maka halaman sebelumnya di-destroy.

Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Page2(),
),
);

*keterangan Page2() merupakan nama class.

IMPLEMENTASI
main.dart

import 'package:code_world/page2.dart';
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {

TextEditingController input1 = TextEditingController();
TextEditingController input2 = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
controller: input1,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Masukkan namamu",
),
),
TextFormField(
 controller: input2,
keyboardType: TextInputType.number,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Masukkan umurmu",
),
),
ElevatedButton(
child: const Text("Hitung"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Page2(
nama: input1.text,
umur: input2.text,
),
),
);
},
)
],
),
),
);
}
}

page2.dart

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {

final String nama, umur;
const Page2({
Key? key,
required this.nama,
required this.umur,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
 body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Nama : " + nama.toString()),
Text("Umur : " + umur.toString()),
],
),
),
);
}
}
Modul Praktikum 4
Implementasi REST API

TUJUAN
● Mahasiswa dapat memahami implementasi REST API yang
direpresentasikan dalam bentuk JSON di Flutter.

DESKRIPSI
REST API
Pada arsitektur REST, REST server menyediakan resources yang
direpresentasikan dalam bentuk format teks, JSON atau XML. JSON
singkatan dari JavaScript Object adalah suatu format ringkas pertukaran data
yang sering digunakan untuk mentransmisikan data terstruktur melalui suatu
koneksi jaringan pada suatu proses yang disebut serialisasi dan dapat
direpresentasikan oleh berbagai bahasa pemrograman.

HTTP
Library berbasis Future yang dapat disusun untuk membuat HTTP request.
Package ini berisi sekumpulan fungsi dan kelas tingkat tinggi yang
memudahkan penggunaan sumber daya HTTP. Ini multi-platform, dan
mendukung seluler, desktop, dan browser.

Untuk menggunakan library ini tambahkan ini kedalam file pubspec.yml

dependencies:
http: ^0.13.3

Lalu tambahkan baris kode ini untuk menggunakan library http pada source
code anda :

import 'package:http/http.dart';
Dio
Library dio ini adalah library yang mirip seperti library http yang berbasis
Future yang digunakkan untuk client dart di beberapa media seperti web,
android dan desktop serta mendukung interceptors, konfigurasi global,
formdata, pembatalan request serta pengunduhan file serta banyak lagi
fiturnya

Untuk menggunakan library ini tambahkan ini kedalam file pubspec.yml

dependencies:
dio: ^4.0.0

Lalu tambahkan baris kode ini untuk menggunakan library dio pada source
code anda :

import 'package:dio/dio.dart';
IMPLEMENTASI

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_ptm/screen/prodct_screen.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter PTM',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const ProductScreen(),
);
}
}

product_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_ptm/model/product_model.dart';

class ProductScreen extends StatefulWidget {

const ProductScreen({Key? key}) : super(key: key);

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

class _ProductScreenState extends State<ProductScreen> {

List<Product> listProduct = [];
_getProduct() async {
 await Product.connectToApi().then((value) => listProduct
= value);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Api Http"),
),
body: FutureBuilder(
future: _getProduct(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return const Center(child:
CircularProgressIndicator());
case ConnectionState.active:
case ConnectionState.waiting:
return const Center(child:
CircularProgressIndicator());
case ConnectionState.done:
return (snapshot.hasError)
? Text('Error: ${snapshot.error}')
: ListView.builder(
itemCount: listProduct.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: Image.network(
listProduct[index].imgUrl,
width: 50,
fit: BoxFit.fill,
),
title:
Text(listProduct[index].title),
subtitle:
Text(listProduct[index].category),
isThreeLine: true,
),
);
},
);
}
},
),
);
}
}
product_model.dart

import 'dart:convert';
import 'package:http/http.dart' as http;

class Product {
// persiapan data yang akan di ambil
int id;
String title;
String imgUrl;
String category;
Product({
required this.id,
required this.title,
required this.imgUrl,
required this.category,
});

// fungsi factory untuk mengambil data json tiap product

factory Product.fromJson(Map<String, dynamic> object) {
return Product(
id: object["id"],
title: object["title"],
imgUrl: object["image"],
category: object["category"],
);
}

static Future<List<Product>> connectToApi() async {

String apiUrl = "https://fakestoreapi.com/products";
List<Product> product = [];

// mendapatkan result data setelah koenksi get metohod

var apiResult = await http.get(
Uri.parse(apiUrl),
);
// mendecode hasi dari method get
var jsonObject = json.decode(apiResult.body);
 // menambahkan data ke list product
for (var i = 0; i < jsonObject.length; i++) {
product.add(Product.fromJson(jsonObject[i]));
}

// mengembalikan listProdut
return product;
}
}

Hasilnya :