テキストフィールドから数値を取得する

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 25/34。

フィールドには、数字が表示されていても常に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、またはaがnullならb」と読みます。「try」の付かないint.parseもありますが、数値ではないテキストを渡すとエラーでアプリが停止しますし、人はいろいろなものを入力します。

スマートフォンでは、keyboardType: TextInputType.numberを指定すると数字キーボードが開くため、文字が入力されることはほとんどありません。

チャレンジ

中級

フィールドを開くと数字キーボードが表示されるようにします。
onChangedで、テキストをintに変換するためにint.tryParseを使い、数値でない場合は0を使用して、_ageに保持します。
年齢が5の場合、年齢に7を掛けた値としてThat is 35 in dog yearsを表示します。

自分で試してみよう

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