【Flutter】TextFieldについて

TextFiledは、Flutterアプリケーションのナビゲーションやユーザーインタラクションを管理する重要な機能です。それぞれ簡単な実装例ともに紹介していきます。

参考

• 公式サイト
  • TextField class

TextField

TextFieldは、ユーザーにテキストの入力を許可するために使用されます。
フォームや検索バーなどを実装する際に役立ちます。

TextFieldには以下のようなプロパティが提供されています。

controller

TextEditingControllerを使用して、TextFieldの値を取得、変更、リセットすることができます。また、テキスト変更イベントを監視することができます。

decoration

InputDecorationを使用してTextFieldの見た目をカスタマイズすることができます。プレースホルダー（❎）、ラベル、アイコン、エラーメッセージなども設定することができます。

keyboardType

このプロパティを使用することで、表示されるKeyboardのタイプを指定することができます。
例えば、テキスト、数値、電話番号、メールアドレスなど、それぞれの入力に適したKeyboardのタイプを指定することができます。

onChanged

ユーザーがテキストを入力する度に、このコールバックが呼び出されます。リアルタイムでテキストを監視するのに役立ちます。

onSubmitted

ユーザーがキーボートの送信/完了ボタンを押した時にこのコールバックが呼び出されます。

obscureText

パスワードのような機密情報を入力する際に、この属性をtrueに設定することで、入力されたテキストをマスクすることができます。

maxLength

このプロパティを使用して、TextFieldで許可される最大字数を制限することができます。

readOnly

このプロパティをtrueに設定すると、TextFieldは読み取り専用になり、ユーザーはテキストを編集できなくなります。

autofocus

このプロパティをtrueに設定すると、Widgetが作成された時に自動的にフォーカスが当てられます。

textCapitalization

入力されるテキストの大文字化の挙動を指定することができます。

TextFieldのサンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextField Example')),
        body: Center(child: MyTextField()),
      ),
    );
  }
}

class MyTextField extends StatefulWidget {
  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      decoration: InputDecoration(
        labelText: 'Enter your name',
        border: OutlineInputBorder(),
      ),
      onChanged: (text) {
        print("Current text: $text");
      },
    );
  }
}

TextFieldのサンプルコードのUI

今回は、細かいプロパティについては実装しませんでした。
今後、その内容も追記できればと思います。