Mangatz 🔥
Seperti biasa, di pagi yang cerah ini mari kita mulai belajar dengan bacaan sesuai keyakinan kita masing-masing ( kalau penulis : Bismillah )
Kemudian kita buat projek baru saja yah, namai saja dengan calculator.
Next, sederhanakan kode kita ( hapus semua komentar dan hal-hal yang tidak kita perlukan sehingga menjadi ringkas seperti :
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("Kalkulator - MSC"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
Sip. Yuk gaskan lanjutkan 👌
Kita akan berlatih membuat sebuah kalkulator sederhana dengan 2 inputan, satu tombol dan output.
Basic design kita seperti berikut :
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
Kita membuat sebuah variabel yang akan kita gunakan sebagai wadah value ( angka ) yang nantinya kita input melalui TextFormField() sekaligus variabel untuk menampung value hasil perhitungan. Menjadi :
class _MyHomePageState extends State<MyHomePage> {
late int nAngka1;
late int nAngka2;
late int nHasil;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
Tambahkan juga controller untuk masing-masing TextFormField() menjadi :
class _MyHomePageState extends State<MyHomePage> {
TextEditingController angkaController1 = new TextEditingController();
TextEditingController angkaController2 = new TextEditingController();
TextEditingController hasilController = new TextEditingController();
late int nAngka1;
late int nAngka2;
late int nHasil;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
Pada widget TextFormField() kita tambahkan controller yang kita buat tadi, menjadi :
TextFormField(
controller: angkaController1,
decoration: InputDecoration(hintText: 'Masukkan angka pertama'),
),
TextFormField(
controller: angkaController2,
decoration: InputDecoration(hintText: 'Masukkan angka kedua'),
),
Begitu juga di TextFormField() yang untuk hasil yah 😁
Berikutnya kita pergi ke bagian kode :
child: ElevatedButton(
onPressed: () {
},
child: Text("HITUNG")
),
Untuk testing tombol kita tambahkan isikan variabel nAngka1 dengan input di TextFormField() awal, kode kita ubah menjadi :
child: ElevatedButton(
onPressed: () {
setState(() {
nAngka1 = angkaController1.text;
});
print(nAngka1);
},
child: Text("HITUNG")),
Dengan perintah print(); kita akan cek di terminal apakah kita berhasil memasukkan nilai angka ke dalam variabel nAngka1. Saat kita tekan tombol Hitung, di terminal akan muncul :
Yeaaay.... 👌
Kita berhasil untuk mengisikan value kedalam variabel. Selanjutnya kita buat kode perhitungan dalam tombol hitung menjadi :
child: ElevatedButton(
onPressed: () {
setState(() {
nAngka1 = angkaController1.text;
nAngka2 = angkaController2.text;
nHasil = nAngka1 * nAngka2;
print(nHasil);
hasilController.text = nHasil;
});
},
child: Text("HITUNG")),
Perhitungan yang kami pakai dalam kode itu merupakan perhitungan perkalian dengan simbol *
Jalankan, akan kita dapatkan sebuah tampilan dan cobalan untuk mencoba input angka. Disini kami mencoba dengan input angka 7 dan 3. Hasilnya, taraaaaa :
👌😁😂
Berhasil ya gaes....
🛈 Jika ada error :
Type: TextEditingController package:calculator/main.dart
A value of type 'String' can't be assigned to a variable of type 'int'.
Try changing the type of the variable, or casting the right-hand type to 'int'.
Cobalah ubah kode dalam tombol hitung menjadi :
child: ElevatedButton(
onPressed: () {
setState(() {
nAngka1 = int.parse(angkaController1.text);
nAngka2 = int.parse(angkaController2.text);
nHasil = nAngka1 * nAngka2;
print(nHasil);
hasilController.text = nHasil.toString();
});
},
child: Text("HITUNG")),
Sip. Selamat belajar gaes....
Selanjutnya coba kembangkan untuk bisa menggunakan operator aritmatika yang lain ( +, -, / ) 👌
Tags:
Flutter