Kalkulator Tip: Tagihan

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 30 dari 34.

Saatnya menerapkan semua yang dipelajari di bagian ini. Dalam lima pelajaran berikutnya, kamu akan membuat kalkulator tip: masukkan tagihan, pilih tip, tentukan berapa orang yang akan membaginya, lalu lihat jumlah yang harus dibayar setiap orang.

Aplikasi ini adalah StatefulWidget dengan Column di dalam Padding. Bagian pertama adalah tagihan: sebuah kolom untuk angka dengan titik desimal, yang dibaca menggunakan double.tryParse dan disimpan dalam State sebagai double.

Tampilkan kembali tagihan di bawah kolom dengan dua angka desimal agar kamu bisa melihat bahwa aplikasi membacanya dengan benar. Nilai uang selalu memiliki dua angka desimal: 42.50, bukan 42.5.

Tantangan

Sedang

Ganti baris Type the bill to start dengan TextField berlabel Bill, dengan border dan keyboard angka yang memiliki titik desimal.
Simpan tagihan di double _bill = 0;, baca dengan double.tryParse, atau gunakan 0.
Di bawah field, tampilkan Bill: 42.50 dengan dua angka desimal.

Coba sendiri

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(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tip Calculator')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Type the bill to start', style: TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}