Pengolahan data dalam pemrograman merupakan hal yang hampir mustahil untuk ditinggalkan. Apalagi jika projek atau program yang kita kerjakan merupakan hal yang kompleks, tentu memerlukan pengolahan data yang berskala kecil maupun besar.
Contoh kecil adalah proses log in authentication, di dalam proses itu program aplikasi tentunya memproses sebuah minimal data username / email disertai dengan password. Dengan data tersebut nanti akan muncul sebuah layar baru disertai dengan properti-properti lain yang dimiliki oleh akun dengan username dan password bersangkutan.
Bagaimana yah proses itu, mari deh kita pelajari simpelnya terlebih dahulu 😁
Buat projeknya terlebih dahulu 👌
Seperti biasa, kita hapus seluruh komentar-komentar ( warna hijau ) sehingga menjadi :
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(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> 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>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
));
}
}
Kemudian langsung saja jalankan dengan hasil tampilannya :
Sederhananya nanti setelah di-klik tombol +, muncul secreen baru dengan data yang telah kita inisialisasi sebelumnya dengan sebuah variabel.
Oiya, sebelum lanjut. Kita sederhanakan kode kita menjadi :
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(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Kirim Data"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
"Contoh Kirim Data Antar Screen"
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
},
child: const Icon(Icons.add),
));
}
}
Sip, kita lanjutkan 😁
Pertama dibawah bagian class _MyHomePageState kita buat variabel pesan :
class _MyHomePageState extends State<MyHomePage> {
String pesan = "Yuk Belajar Flutter! - MSC"; // buat variabel pesan
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Kirim Data"),
),
Terlihat disana kita, membuat variabel pesan dengan value ( isi ) Yuk Belajar Flutter! - MSC
Next, kita buat file baru yang nantinya sebagai screen baru untuk menampilkan pesan tersebut. File baru tersebut kita beri nama screenBaru.dart.
Hasilnya kosong dong 😌
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return Container();
}
}
Di atas baris kode :
@override
Widget build(BuildContext context) {
Kita buat variabel dengan nama pesan bertipe String. Sehingga menjadi :
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
String pesan; // buat variabel baru sebagai penampung
@override
Widget build(BuildContext context) {
return Container();
}
}
Di baris ke-4, pasti ada error ( baris merah ) :
const MyWidget({super.key});
⚠ Don't panic!
Kita hanya perlu menulis ulang kata pesan disamping super.key, yang disertai dengan kata required. Sehingga menjadi :
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
class MyWidget extends StatelessWidget {
MyWidget({super.key, required this.pesan});
String pesan; // buat variabel baru sebagai penampung
@override
Widget build(BuildContext context) {
return Container();
}
}
Di bagian return kita ubah menjadi Scaffold(), menjadi :
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ,
),
);
}
Di dalam widget Center() itu kita akan menampilkan pesan yang tadi kita buat di layar awal. Kita tampilkan dengan widget Text(), baris kode Scaffold() menjadi :
return Scaffold(
body: Center(
child: Text(pesan),
),
);
Sip, di bagian screen kedua ini sudah cukup disini 😁
Selanjutnya kita kembali ke main.dart ( screen pertama ) dan langsung ke baris kode :
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
)
);
Di bagian onPressed(), kita tambahkan kode :
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyWidget(pesanLayar2: pesan))
);
},
child: const Icon(Icons.add),
)
Setelah selesai ketik kodenya, mari jalankan dengan flutter run :
Coba lakukan klik pada tombol yang berwarna biru di bawah itu, maka akan menghasilkan :
Yeeaaay, berhasil gaes. Kita sudah berhasil melakukan uji kirim data ke screen lain 😁😋😂😇
Tags:
Flutter