Bahşiş Hesaplayıcı: Bahşiş

Coddy'nin Flutter Journey'sinin Etkileşimli Uygulamalar bölümünün bir parçası. Ders 31 / 34.

Sırada bahşiş var. 0 ile 30 yüzde arasında, 5'erlik adımlarla ayarlanan bir Slider bahşişi seçer ve uygulama bu miktarın kaç para olduğunu gösterir.

Yüzdeyi State içinde, başlangıç değeri 10 olan bir double olarak tut. Bahşiş tutarını saklamana gerek yok: bu tutar hesaba ve yüzdeye bağlıdır; bu yüzden build metodunun başında bir final olarak hesapla:

final double tip = _bill * _tipPercent / 100;

Giriş alanından veya kaydırıcıdan gelen her setState çağrısı ekranı yeniden oluşturur ve tip yeni değerlerle yeniden hesaplanır.

Görev

Kolay

Fatura alanının altında Tip: 10% göster ve başlangıç değeri 10 olan, 0 ile 30 arasında 6 bölmeli bir Slider göster.
Kaydırıcının altında, fatura tutarı 40 olan bir hesaplama için iki ondalık basamakla Tip amount: 4.00 göster.

Kendin dene

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> {
  double _bill = 0;

  @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: [
            TextField(
              keyboardType: const TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(
                labelText: 'Bill',
                border: OutlineInputBorder(),
              ),
              onChanged: (String value) {
                setState(() {
                  _bill = double.tryParse(value) ?? 0;
                });
              },
            ),
            const SizedBox(height: 8),
            Text('Bill: ${_bill.toStringAsFixed(2)}'),
          ],
        ),
      ),
    );
  }
}