初めてのテキストフィールド

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

TextFieldは、文字を入力できるボックスです。プレビューでタップし、キーボードで入力してみましょう。

TextField(
  decoration: InputDecoration(
    labelText: 'Name',
    border: OutlineInputBorder(),
  ),
)

decoration:はフィールドの見た目を設定します。labelTextはフィールドに名前を付けます。空のボックス内に表示され、入力を始めると枠線の位置まで上がるため、名前が常に表示されます。OutlineInputBorder()はボックス全体に枠線を描きます。これがない場合、テキストの下に線があるだけです。

hintTextもあります。これはyou@example.comのようなグレーの入力例ですが、入力するとすぐに消えます。フィールドの名前にはラベルを使い、ヒントは補足としてのみ使いましょう。

フィールドは、割り当てられた幅いっぱいに広がります。ここでは、ColumnがPaddingの内側にあるため、画面の端から離れています。

チャレンジ

簡単

タイトルの下に、SizedBoxの16の後で、周囲に枠線のあるEmailラベル付きのTextFieldを追加します。

自分で試してみよう

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 StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sign Up')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Create your account', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}