Input Widget dan Basic Form

Membuat Aplikasi Kalkulator yang dapat menjalankan operasi kabataku

link repository ini dapat diakses melalui link berikut

Kalkulator yang dibuat merupakan kalkulator sederhana dengan

• Menggunakan 2 buah widget inputan (TextField atau TextFormField) untuk menerima nilai inputan.
• Menggunakan ElevatedButton untuk mengeksekusi operasi kabataku
• Menggunakan widget Text untuk menampilkan hasil operasi

Langkah-Langkah membuatnya:

• Membuat Bagian Utama (Main)

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

• Membuat Class KalkulatorApp menggunakan Stateless Widget
• Kenapa menggunakan Stateless? karena ini hanya membungkus MaterialApp

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const KalkulatorPage(),
    );
  }
}

• Membuat class KalkulatorPage menggunakan StatefullWidget
• Karena nilai hasil bisa berubah-ubah, maka akan digunakan StatefulWidget.

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

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

• Membuat Controller untuk Input User
• Karena user akan memasukkan 2 input maka dibuat 2 controller

final TextEditingController angka1Controller = TextEditingController();
final TextEditingController angka2Controller = TextEditingController();

double hasil = 0;

• membuat logika kalkulator

void hitung(String operator) {
  double angka1 = double.tryParse(angka1Controller.text) ?? 0;
  double angka2 = double.tryParse(angka2Controller.text) ?? 0;

  setState(() {
    switch (operator) {
      case '+':
        hasil = angka1 + angka2;
        break;
      case '-':
        hasil = angka1 - angka2;
        break;
      case 'x':
        hasil = angka1 * angka2;
        break;
      case '/':
        hasil = angka2 != 0 ? angka1 / angka2 : 0; // hindari pembagian nol
        break;
    }
  });
}

• membuat tombol operasi
• dimana jika tombol operasi (+, -, /, *) ditekan maka fungsi hitung akan dipanggil

Widget tombolOperasi(String simbol) {
  return ElevatedButton(
    onPressed: () => hitung(simbol),
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.white,
      foregroundColor: Colors.deepPurple,
      shadowColor: Colors.grey,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30),
      ),
    ),
    child: Text(simbol),
  );
}

• membuat tampilan UI

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: const Color(0xFFF8F0FF), // warna background
    appBar: AppBar(
      title: const Text("hai"),
      backgroundColor: Colors.brown,
    ),
    body: Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text("Kalkulator", ...),

          // Input Angka Pertama
          TextField(
            controller: angka1Controller,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(
              labelText: "Angka Pertama",
              border: OutlineInputBorder(),
            ),
          ),

          // Input Angka Kedua
          TextField(
            controller: angka2Controller,
            keyboardType: TextInputType.number,
            decoration: const InputDecoration(
              labelText: "Angka Kedua",
              border: OutlineInputBorder(),
            ),
          ),

          // Baris Tombol
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              tombolOperasi("+"),
              tombolOperasi("-"),
              tombolOperasi("x"),
              tombolOperasi("/"),
            ],
          ),

          // Hasil Perhitungan
          const Text("Hasil:", ...),
          Text(
            "$hasil", // menampilkan hasil perhitungan
            style: const TextStyle(fontSize: 28, color: Colors.blue),
          ),
        ],
      ),
    ),
  );
}

Output