Tugas Mobile Programming Belajar Flutter Dasar
Mata Kuliah
Mobile Programming
Prodi
Ilmu Komputer
Dosen
Pembimbing
Esron
Ricardo Nainggolan, M.Kom
|
No |
Nama |
Nim |
Kelas |
|
1 |
Donius Tamo Ama |
15200016 |
15 3A 25 |
|
2 |
|
|
15 3A 25 |
|
3 |
|
|
15 3A 25 |
|
4 |
|
|
15 3A 25 |
|
5 |
|
|
15 3A 25 |
Tugas Pertemuan 2 1.
Membuat Form dengan flutter:
Untuk membuat form dengan flutter, agar lebih rapi untuk tampilan halaman akan kita kelompokkan dalam sebuah folder tersendiri, dalam hal ini kita membuat folder dengan nama ui didalam folder lib.
import 'package:flutter/material.dart';
import 'package:aplikasi_flutter_pertamaku/hello_world.dart';
import 'package:aplikasi_flutter_pertamaku/column_widget.dart';
import 'package:aplikasi_flutter_pertamaku/row_widget.dart';
import 'package:aplikasi_flutter_pertamaku/ui/produk_form.dart';
import 'package:aplikasi_flutter_pertamaku/ui/produk_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Aplikasi pertama',
home: ProdukPage(),
);
}
}
selanjutnya kita ketikan code ini bagian file produk_form.dart yang sudah di buat
import 'package:flutter/material.dart';
class ProdukForm extends StatefulWidget {
@override
_ProdukFormState createState() => _ProdukFormState();
}
class _ProdukFormState extends State<ProdukForm> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form Produk'),
),
body: SingleChildScrollView(
child: Column(
children: [
TextField(
decoration: InputDecoration(labelText: "Kode Produk"),
),
TextField(
decoration: InputDecoration(labelText: "Nama Produk"),
),
TextField(
decoration: InputDecoration(labelText: "Harga"),
),
RaisedButton(
child: Text('Simpan'),
onPressed: () {},
)
],
),
),
);
}
}
Ubah pada main.dart dengan memanggil class ProdukForm, sehingga hasilnya akan menjadi
Buat sebuah file dengan nama produk_detail.dart di dalam folder ui, kemudian ketikkan kode berikut
import 'package:flutter/material.dart';
class ProdukDetail extends StatefulWidget {
final String? kodeProduk;
final String? namaProduk;
final int? harga;
ProdukDetail({this.kodeProduk, this.namaProduk, this.harga});
@override
_ProdukDetailState createState() => _ProdukDetailState();
}
class _ProdukDetailState extends State<ProdukDetail> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Detail Produk"),
),
body: Column(
children: [
Text("Kode Produk : ${widget.kodeProduk}"),
Text("Nama Produk : ${widget.namaProduk}"), // jika didalam String
Text("Harga : ${widget.harga.toString()}"), // jika didalam String
],
),
);
}
}
Buka kembali file produk_form.dart tambahkan attribute untuk membuat fungsi tombol simpan dan menampilkan data pada Detail Produk
final _kodeProdukTextboxController = TextEditingController();
final _namaProdukTextboxController = TextEditingController();
final _hargaProdukTextboxController = TextEditingController();
pada Class ProdukFormState sehingga menjadi seperti berikut:
selanjutnya:
Pada setiap masing-masing TextField yang telah dibuat data yang diinput dikirim ke attribute TextEditingController() yang telah kita buat sebelumnya
Pada fungsi =
_textboxKodeProduk()
_textboxNamaProduk()
_textboxhargaProduk()
=> Kemudian pada fungsi _tombolSimpan() pada saat diklik akan mengirim data inputan dan menampilkan data tersebut pada ProdukDetail yang telah kita buat sebelumnya
Sehingga keseluruhan kode menjadi:
import 'package:aplikasi_flutter_pertamaku/ui/produk_detail.dart';
import 'package:flutter/material.dart';
class ProdukForm extends StatefulWidget {
@override
_ProdukFormState createState() => _ProdukFormState();
}
class _ProdukFormState extends State<ProdukForm> {
final _kodeProdukTextboxController = TextEditingController();
final _namaProdukTextboxController = TextEditingController();
final _hargaProdukTextboxController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form Produk'),
),
body: SingleChildScrollView(
child: Column(
children: [
_textboxKodeProduk(),
_textboxNamaProduk(),
_textboxHargaProduk(),
_tombolSimpan()
],
),
),
);
}
_textboxKodeProduk() {
return TextField(
decoration: InputDecoration(labelText: "Kode Produk"),
controller: _kodeProdukTextboxController,
);
}
_textboxNamaProduk() {
return TextField(
decoration: InputDecoration(labelText: "Nama Produk"),
controller: _namaProdukTextboxController,
);
}
_textboxHargaProduk() {
return TextField(
decoration: InputDecoration(labelText: "Harga"),
controller: _hargaProdukTextboxController,
);
}
_tombolSimpan() {
return RaisedButton(
child: Text('Simpan'),
onPressed: () {
String kode_produk = _kodeProdukTextboxController.text;
String nama_produk = _namaProdukTextboxController.text;
int harga = int.parse(
_hargaProdukTextboxController.text); //parsing dari String ke int
// pindah ke halaman Produk Detail dan mengirim data
Navigator.of(context).push(new MaterialPageRoute(
builder: (context) => ProdukDetail(
kodeProduk: kode_produk,
namaProduk: nama_produk,
harga: harga,
)));
},
);
}
}
import 'package:flutter/material.dart';
class ProdukPage extends StatefulWidget {
@override
_ProdukPageState createState() => _ProdukPageState();
}
class _ProdukPageState extends State<ProdukPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Data Produk"),
),
body: ListView(
children: [
//list 1
Card(
child: ListTile(
title: Text("Kulkas"),
subtitle: Text("2500000"),
),
),
//list 2
Card(
child: ListTile(
title: Text("TV"),
subtitle: Text("5000000"),
),
),
//list 3
Card(
child: ListTile(
title: Text("Mesin Cuci"),
subtitle: Text("1500000"),
),
),
],
),
);
}
}
import 'package:aplikasi_flutter_pertamaku/ui/produk_form.dart';
import 'package:flutter/material.dart';
class ProdukPage extends StatefulWidget {
@override
_ProdukPageState createState() => _ProdukPageState();
}
class _ProdukPageState extends State<ProdukPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Data Produk"),
actions: [
GestureDetector(
// menampilkan icon +
child: Icon(Icons.add),
//pada saat icon + di tap
onTap: () async {
//berpindah ke halaman ProdukForm
Navigator.push(context,
new MaterialPageRoute(builder: (context) => ProdukForm()));
},
)
],
),
body: ListView(
children: [
//list 1
Card(
child: ListTile(
title: Text("Kulkas"),
subtitle: Text("2500000"),
),
),
//list 2
Card(
child: ListTile(
title: Text("TV"),
subtitle: Text("5000000"),
),
),
//list 3
Card(
child: ListTile(
title: Text("Mesin Cuci"),
subtitle: Text("500000"),
),
),
],
),
);
}
}
import 'package:aplikasi_flutter_pertamaku/ui/produk_detail.dart';
import 'package:aplikasi_flutter_pertamaku/ui/produk_form.dart';
import 'package:flutter/material.dart';
class ProdukPage extends StatefulWidget {
@override
_ProdukPageState createState() => _ProdukPageState();
}
class _ProdukPageState extends State<ProdukPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Data Produk"),
actions: [
GestureDetector(
// menampilkan icon +
child: Icon(Icons.add),
//pada saat icon + di tap
onTap: () async {
//berpindah ke halaman ProdukForm
Navigator.push(context,
new MaterialPageRoute(builder: (context) => ProdukForm()));
},
)
],
),
body: ListView(
children: [
//list 1
ItemProduk(
kodeProduk: "A001",
namaProduk: "Kulkas",
harga: 2500000,
),
//list 2
ItemProduk(
kodeProduk: "A002",
namaProduk: "TV",
harga: 5000000,
),
//list 3
ItemProduk(
kodeProduk: "A003",
namaProduk: "Mesin Cuci",
harga: 1500000,
),
],
),
);
}
}
class ItemProduk extends StatelessWidget {
final String? kodeProduk;
final String? namaProduk;
final int? harga;
//membuat constructor
ItemProduk({this.kodeProduk, this.namaProduk, this.harga});
@override
Widget build(BuildContext context) {
return GestureDetector(
child: Card(
child: ListTile(
title: Text("namaProduk"),
subtitle: Text(harga.toString()), //parsing dari int ke string
),
),
onTap: () {
// pindah ke halaman Produk Detail dan mengirim data
Navigator.of(context).push(new MaterialPageRoute(
builder: (context) => ProdukDetail(
kodeProduk: kodeProduk,
namaProduk: namaProduk,
harga: harga,
)));
},
);
}
}
Komentar
Posting Komentar