Laporan Praktikum Aplikasi Mobile
Input Widgets dan Basic Form
Aliffia Humairah - 2311531004
Langkah Pengerjaan:
Basic Form TextField
1. Buat file dart baru dengan nama form-textfield.dart didalam folder lib, buat tampilan basic form dengan menggunakan Widget TextField untuk inputan, ElevatedButton untuk memberikan event listener.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Basic Form'),
),
body: const MyForm(),
),
);
}
}
class MyForm extends StatefulWidget {
const MyForm({super.key});
@override
State createState() => _MyFormState();
}
class _MyFormState extends State {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Masukkan nama anda :'),
const SizedBox(
height: 10,
),
const TextField(
decoration: InputDecoration(
labelText: 'Nama Lengkap',
hintText: 'Misalnya masnoer',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.person),
),
),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amber,
foregroundColor: Colors.black,
),
child: const Text('Tampilkan nama'),
),
],
),
);
}
}
Outputnya:
2. Menambahkan kode program pada class _MyFormState Tambahkan variabel controller untuk menangani input dari pengguna.
3. Menambahkan properti pada Widget TextField Gunakan properti seperti controller, decoration (label, hint), dan keyboardType.
4. Menambahkan kode program pada ElevatedButton Tambahkan aksi ketika tombol ditekan untuk menampilkan teks dari input.
5. Menambahkan setState() Agar UI diperbarui setiap kali tombol ditekan, bungkus aksi di dalam setState().
Outputnya:
Basic Form TextFormField
1. Buat file dart baru dengan nama form-textformfield.dart didalam folder lib, Buat form inputan menggunakan 2 buah widget TextFormField dan 1 buah ElevatedButton.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Basic Form TextFormField"),
),
body: const MyFormText(),
),
);
}
}
class MyFormText extends StatefulWidget {
const MyFormText({super.key});
@override
State createState() => _MyFormTextState();
}
class _MyFormTextState extends State {
@override
Widget build(BuildContext context) {
return Column(
children: [
const SizedBox(
height: 10,
),
TextFormField(
decoration: const InputDecoration(
labelText: "Nama : ",
border: OutlineInputBorder(),
),
),
const SizedBox(
height: 10,
),
TextFormField(
decoration: const InputDecoration(
labelText: "Email : ",
border: OutlineInputBorder(),
),
),
const SizedBox(
height: 10,
),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Submit'),
),
),
],
);
}
}
Outputnya:
2. Menambahkan pada class _MyFormTextState. digunakan untuk membuat variable GlobalKey, membuat controller untuk TextFormField, serta menggunakan method yang berfungsi untuk menghapus inputan name dan email, dan method yang digunakan Ketika tombol diklik.
3. Pada widget tampilan bungkus menggunakan widget Form dan tambahkan key: _formKey.
4. Tambahkan method _submitForm pada method onPressed di ElevatedButton.
Outputnya:
Latihan /Tugas:
Implementasi Basic Form Flutter
Buatlah form pendaftaran pengguna dengan menggunakan 4 buah form yaotu nama, email, password, confirm password dan satu tombol submit.
Instruksi :
main.dart
import 'package:flutter/material.dart';
import 'user_registration_form.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'User Registration',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const UserRegistrationForm(),
);
}
}
user_registration_form.dart
import 'package:flutter/material.dart';
class UserRegistrationForm extends StatefulWidget {
const UserRegistrationForm({super.key});
@override
State createState() => _UserRegistrationFormState();
}
class _UserRegistrationFormState extends State {
final _formKey = GlobalKey();
// Controllers untuk inputan
final _nameController = TextEditingController();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmPasswordController = TextEditingController();
@override
void dispose() {
_nameController.dispose();
_emailController.dispose();
_passwordController.dispose();
_confirmPasswordController.dispose();
super.dispose();
}
void _submitForm() {
if (_formKey.currentState!.validate()) {
String name = _nameController.text;
String email = _emailController.text;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Registrasi berhasil!\nNama: $name, Email: $email")),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Form Pendaftaran Pengguna"),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: ListView(
children: [
// Input Nama
TextFormField(
controller: _nameController,
decoration: const InputDecoration(
labelText: "Nama Lengkap",
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Nama tidak boleh kosong';
}
return null;
},
),
const SizedBox(height: 15),
// Input Email
TextFormField(
controller: _emailController,
decoration: const InputDecoration(
labelText: "Email",
border: OutlineInputBorder(),
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Email tidak boleh kosong';
}
if (!value.contains('@')) {
return 'Email harus mengandung @';
}
return null;
},
),
const SizedBox(height: 15),
// Input Password
TextFormField(
controller: _passwordController,
decoration: const InputDecoration(
labelText: "Password",
border: OutlineInputBorder(),
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Password tidak boleh kosong';
}
if (value.length < 6) {
return 'Password minimal 6 karakter';
}
return null;
},
),
const SizedBox(height: 15),
// Input Confirm Password
TextFormField(
controller: _confirmPasswordController,
decoration: const InputDecoration(
labelText: "Konfirmasi Password",
border: OutlineInputBorder(),
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Konfirmasi password tidak boleh kosong';
}
if (value != _passwordController.text) {
return 'Password tidak sama';
}
return null;
},
),
const SizedBox(height: 20),
// Tombol Submit
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: _submitForm,
child: const Text("Submit"),
),
),
],
),
),
),
);
}
}
Outputnya:
Outputnya: Email harus mengandung @
Outputnya: Tidak diisi
Outputnya: Konfirmasi Password tidak sama dengan Password
File tugas dapat dilihat pada link GitHub: https://github.com/AliffiaHumrh/2311531004_PraktikumAplikasiMobile3_KelasB/tree/main/lib