텍스트 필드에서 숫자 가져오기

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

필드는 숫자를 표시하더라도 항상 String을 담습니다. '12'는 텍스트이고, '12' * 7은 84가 아닙니다. 이 값으로 계산하려면 int로 변환하세요.

int.tryParse('12')    // 12
int.tryParse('hello') // null

null은 “값이 없음”을 뜻합니다. 'hello'는 숫자가 아니므로 값이 없습니다. 결과의 유형은 int?이며, int 또는 null입니다. 계산하기 전에 ??를 사용해 대신 사용할 값을 지정하세요.

int age = int.tryParse(value) ?? 0;

a ?? b는 “a가 null이면 b, 그렇지 않으면 a”로 읽습니다. “try”가 없는 int.parse도 있지만, 숫자가 아닌 텍스트를 입력하면 오류와 함께 앱이 중단됩니다. 사람들은 온갖 것을 입력하니까요.

휴대전화에서는 keyboardType: TextInputType.number를 사용하면 숫자 키보드가 열리므로, 사람들은 문자를 거의 입력하지 않습니다.

챌린지

중급

필드에서 숫자 키보드가 열리도록 하세요.
onChanged에서 텍스트를 int.tryParse를 사용해 int로 변환하고, 숫자가 아니면 0을 사용한 뒤 _age에 저장하세요.
나이가 5일 때 That is 35 in dog years를 표시하세요. 나이에 7을 곱한 값입니다.

직접 해보기

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> {
  String _ageText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dog Years')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'Your age',
                border: OutlineInputBorder(),
              ),
              onChanged: (String value) {
                setState(() {
                  _ageText = value;
                });
              },
            ),
            const SizedBox(height: 24),
            Text('That is ? in dog years', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}