1. Pendahuluan

Flutter merupakan framework open-source dari Google yang digunakan untuk membangun aplikasi mobile, web, dan desktop dengan satu basis kode. Salah satu cara terbaik untuk memahami dasar-dasar Flutter adalah dengan membuat mini project sederhana.

Dalam artikel ini, kita akan membuat aplikasi Kalkulator Sederhana menggunakan Flutter. Melalui project ini, Anda akan belajar tentang:

• Struktur dasar project Flutter
• Widget utama (seperti Scaffold, Column, Row, Text, dan ElevatedButton)
• Manajemen state dengan StatefulWidget
• Implementasi logika sederhana dalam aplikasi

2. Persiapan

Sebelum memulai, pastikan Anda sudah menyiapkan:

1. Flutter SDK yang sudah terinstal.
2. Code Editor seperti Visual Studio Code atau Android Studio.
3. Emulator Android/iOS atau jalankan langsung di browser dengan flutter run -d chrome.

3. Langkah-Langkah Membuat Aplikasi Kalkulator

3.1 Membuat Project Baru

Buka terminal/command prompt, lalu jalankan perintah berikut:

flutter create kalkulator_flutter
cd kalkulator_flutter

3.2 Struktur Dasar main.dart

Buka file lib/main.dart, lalu ubah isinya menjadi seperti ini:

import 'package:flutter/material.dart';

void main() {
  runApp(const KalkulatorApp());
}

class KalkulatorApp extends StatelessWidget {
  const KalkulatorApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kalkulator Flutter',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const KalkulatorPage(),
    );
  }
}

3.3 Membuat Halaman Kalkulator

Selanjutnya, kita buat halaman utama dengan StatefulWidget untuk mengelola input dan hasil perhitungan.

class KalkulatorPage extends StatefulWidget {
  const KalkulatorPage({super.key});

  @override
  State<KalkulatorPage> createState() => _KalkulatorPageState();
}

class _KalkulatorPageState extends State<KalkulatorPage> {
  final TextEditingController _angka1Controller = TextEditingController();
  final TextEditingController _angka2Controller = TextEditingController();

  double _hasil = 0;

  void _hitung(String operasi) {
    double angka1 = double.tryParse(_angka1Controller.text) ?? 0;
    double angka2 = double.tryParse(_angka2Controller.text) ?? 0;

    setState(() {
      switch (operasi) {
        case '+':
          _hasil = angka1 + angka2;
          break;
        case '-':
          _hasil = angka1 - angka2;
          break;
        case '×':
          _hasil = angka1 * angka2;
          break;
        case '÷':
          _hasil = angka2 != 0 ? angka1 / angka2 : 0;
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Kalkulator Sederhana")),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            TextField(
              controller: _angka1Controller,
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(labelText: "Angka Pertama"),
            ),
            TextField(
              controller: _angka2Controller,
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(labelText: "Angka Kedua"),
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(onPressed: () => _hitung('+'), child: const Text("+")),
                ElevatedButton(onPressed: () => _hitung('-'), child: const Text("-")),
                ElevatedButton(onPressed: () => _hitung('×'), child: const Text("×")),
                ElevatedButton(onPressed: () => _hitung('÷'), child: const Text("÷")),
              ],
            ),
            const SizedBox(height: 30),
            Text(
              "Hasil: $_hasil",
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
    );
  }
}

4. Jalankan Aplikasi

Simpan file, lalu jalankan dengan ctrl+f5 atau jalankan kode ini di terminal vscode :

flutter run 

Jika berhasil, Anda akan melihat aplikasi kalkulator sederhana dengan dua input angka dan tombol operasi dasar

5. Hasil yang Dicapai

Dengan mengikuti tutorial ini, kita telah berhasil membuat aplikasi Kalkulator Sederhana di Flutter yang memiliki fitur:

• Input angka
• Tombol operasi matematika dasar (+, -, ×, ÷)
• Tampilan hasil perhitungan secara real-time

6. Kesimpulan

Project mini seperti kalkulator ini adalah latihan yang bagus untuk pemula Flutter. Anda dapat mempelajari:

• Cara membuat UI dengan widget
• Cara menggunakan TextField untuk input
• Cara mengatur state dengan StatefulWidget
• Logika dasar perhitungan

Dari sini, Anda bisa mengembangkan aplikasi lebih lanjut, misalnya menambahkan desain UI lebih menarik, menambahkan tombol angka seperti kalkulator sungguhan, atau bahkan memperluas ke fungsi-fungsi matematika lain.