팁 계산기: 청구 금액

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 30번째.

이제 섹션 전체를 활용해 볼 시간입니다. 다음 다섯 개의 강의에 걸쳐 팁 계산기를 만듭니다. 요금을 입력하고, 팁을 선택하고, 몇 명이 나누어 내는지 입력하면 각자 얼마를 내는지 확인할 수 있습니다.

앱은 Padding 안에 Column이 있는 StatefulWidget입니다. 첫 번째 부분은 요금입니다. 소수점이 있는 숫자를 입력하는 필드에서 double.tryParse로 값을 읽고, State에 double로 저장합니다.

앱이 값을 제대로 읽었는지 확인할 수 있도록 필드 아래에 요금을 소수점 둘째 자리까지 표시합니다. 금액은 항상 소수점 둘째 자리까지 표시합니다. 42.50이지 42.5가 아닙니다.

챌린지

중급

Type the bill to start 줄을 테두리와 소수점이 있는 숫자 키보드를 갖춘 Bill 레이블의 TextField로 바꾸세요.
금액은 double _bill = 0;에 저장하고, double.tryParse로 읽거나 0을 사용하세요.
입력란 아래에 소수점 이하 두 자리로 Bill: 42.50을 표시하세요.

직접 해보기

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)),
          ],
        ),
      ),
    );
  }
}