Laporan 2

PRAKTIKUM PEMROGRAMAN MOBILE

“Implementasi Form & Navigasi”

Asisten :
1. Ali Asgar Zainal Abidin, S.Kom
2. Muh.Asdar (60200119029)

Oleh
Nama : Resky Aulia Ananda
Nim : 60200120013
Kelas :A

LABORATORIUM KOMPUTER TERPADU

JURUSAN TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI ALAUDDIN MAKASSAR
2023
 LEMBAR PENGESAHAN/ACC PRAKTIKUM
Laporan praktikum Pemrograman Mobile dengan judul “Implementasi Form
& Navigasi “ yang disusun oleh :

Nim : 60200120013

Nama : Resky Aulia Ananda

Kelas :A

Telah diperiksa dan dikonsultasikan kepada Asisten I dan Asisten II maka

dinyatakan diterima

Gowa, Mei 2023

Asisten I Asisten II

Ali Asgar Zainal Abidin, S.Kom Muh.Asdar

60200119029

Mengetahui,
Laboran Penanggung Jawab

Abdurrahman Ramli, S.Kom.

LEMBAR PENILAIAN LAPORAN PRAKTIKUM

Nama : Resky Aulia Ananda
NIM : 60200120013
Praktikum : Pemrograman Mobile
Judul praktikum : Implementasi Form & Navigasi
No Komponen penilaian Nilai
I. Nilai Pelaksaan Asistensi ke 1 (100)
A. Kedisiplinan (20)
B. Keterampilan menggunakan Komputer/Software (20)
(20)
C. Keaktifan
(40)
D. Nilai laporan

II. Nilai Pelaksanaan Asistensi ke 2 (100)

A. Kedisiplinan (20)
B. Keterampilan menggunakan Komputer/Software (20)
(20)
C. Keaktifan
(40)
D. Nilai laporan
III Total Nilai laporan praktikum (Asistensi 1 + Asistensi 2)/2 (100)
.

Tanggal praktikum : Mei 2023

Dikumpulkan tanggal : Mei 2023
Dikoreksi tanggal : Mei 2023

Asisten Praktikum,

Ali Asgar Zainal Abidin, S.Kom

 BAB III
Implementasi Form & Navigasi

A. Tujuan Praktikum
1. Mahasiswa dapat mengetahui navigasi pada flutter
2. Mahasiswa dapat mengimplementasikan form pada flutter
3. Mahasiswa dapat mengimplementasikan navigasi pada flutter

B. Teori Dasar
Implementasi form dan navigasi adalah dua aspek penting dalam
pengembangan aplikasi Flutter. Dalam teori dasar ini, akan dijelaskan konsep-
konsep yang mendasari implementasi form dan navigasi dalam Flutter serta
cara-cara mengaplikasikannya dalam pengembangan aplikasi.

Pertama, mari kita bahas mengenai implementasi form dalam Flutter.

Form adalah elemen yang digunakan untuk mengumpulkan input dari
pengguna. Dalam Flutter, form diimplementasikan menggunakan widget
bernama `Form` yang mengelola keadaan form dan validasi input. Form
biasanya terdiri dari beberapa input field seperti teks, angka, tanggal, atau
bahkan input yang lebih kompleks seperti gambar atau file.

Pertama, kita perlu membuat widget `Form` dan menghubungkannya

dengan input field yang relevan. Setiap input field dalam form diwakili oleh
widget `TextFormField` atau `FormField` yang sesuai dengan jenis input yang
diinginkan. Kita dapat menambahkan validasi pada setiap input field
menggunakan validasi bawaan atau memvalidasi secara kustom sesuai
kebutuhan aplikasi. Setelah form diisi oleh pengguna, kita dapat mengambil
nilai dari setiap input field untuk diproses lebih lanjut.

Selanjutnya, mari kita bahas mengenai navigasi dalam Flutter.

Navigasi adalah proses berpindah antara satu layar ke layar lain dalam
aplikasi. Dalam Flutter, navigasi dapat diimplementasikan menggunakan
widget bernama `Navigator`. Ada beberapa metode untuk melakukan navigasi,
seperti `push`, `pop`, dan `replace`. Misalnya, dengan menggunakan metode
`push`, kita dapat memasukkan layar baru ke dalam tumpukan layar saat
pengguna berinteraksi dengan elemen tertentu, seperti tombol.

Dalam navigasi, setiap layar direpresentasikan oleh widget. Layar baru

ditambahkan ke dalam tumpukan layar saat navigasi terjadi. Pengguna dapat
berinteraksi dengan tombol "kembali" atau metode `pop` untuk kembali ke
layar sebelumnya dalam tumpukan. Selain itu, kita dapat mengganti seluruh
tumpukan layar dengan layar baru menggunakan metode `pushReplacement`
atau `pushNamedAndRemoveUntil`. Ini berguna, misalnya, ketika kita ingin
mengganti tampilan setelah pengguna berhasil melakukan login.

Dalam implementasi form dan navigasi, keduanya sering digunakan

bersama untuk membuat pengalaman pengguna yang lebih interaktif.
Misalnya, setelah pengguna mengisi form pendaftaran, kita dapat
menggunakan navigasi untuk beralih ke layar berikutnya yang menampilkan
informasi ringkasan dari data yang diisi pengguna sebelumnya. Dengan
kombinasi form dan navigasi, kita dapat membangun aplikasi Flutter yang
kuat dan responsif.

Dalam teori dasar ini, telah dijelaskan mengenai implementasi form

dan navigasi pada Flutter. Form digunakan untuk mengumpulkan input
pengguna, sedangkan navigasi digunakan untuk berpindah antara layar dalam
aplikasi. Keduanya dapat digunakan bersama untuk menciptakan pengalaman
pengguna yang interaktif. Dengan pemahaman ini, Anda dapat mulai
mengembangkan aplikasi Flutter yang memanfaatkan form dan navigasi
dengan baik.
C. Hasil dan Pembahasan
1. main.dart
import 'package:flutter/material.dart';
import 'package:praktikum/page2.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 StatefulWidget {

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

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

class _MyHomePageState extends State<MyHomePage> {

  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",
              ),
            ),
            SizedBox(height: 16),
            TextFormField(
              controller: input2,
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: "Masukkan umurmu",
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Page2(
                      nama: input1.text,
                      umur: input2.text,
                    ),
                  ),
                );
              },
              child: const Text("Hitung"),
            ),
          ],
        ),
      ),
    );
  }
}

2. 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()),
          ],
        ),
      ),
    );
  }
}
D. Kesimpulan
Implementasi form dan navigasi pada Flutter merupakan aspek penting
dalam pengembangan aplikasi yang interaktif. Form digunakan untuk
mengumpulkan input dari pengguna dengan menggunakan widget `Form` dan
`TextFormField` atau `FormField`. Sedangkan navigasi dilakukan dengan
menggunakan widget `Navigator` untuk berpindah antara layar aplikasi.
Dengan memadukan kedua konsep ini, pengembang dapat menciptakan aplikasi
Flutter yang responsif dan memungkinkan pengguna untuk berinteraksi dengan
mudah.