Flutter : Membuat Kalkulator Sederhana

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 :


Pertama, dalam kode bagian :
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 ( +, -, / ) 👌

Ahmad Istakim

Alumni dari jurusan Manajemen Informatika di Universitas Sains Al-Qur'an (UNSIQ ) Wonosobo. Tertarik dalam bidang pendidikan, teknologi komputasi dan disiplin ilmu keislaman ( Tafsir, Hadits, Arudl, Nahwu-Sharaf, Fiqh maupun Aqidah ) - https://s.id/blog-islamQ. Pernah juga mengenyam pendidikan di beberapa pesantren yang ada di Kab. Wonosobo dan Kab. Purworejo

Posting Komentar

Lebih baru Lebih lama