FlutterはGoogleが提供するクロスプラットフォームモバイルアプリ開発フレームワークです。FlutterのUI要素の1つであるTextFieldは、ユーザーがテキスト入力を行うために使用されるウィジェットです。この記事では、FlutterのTextFieldについて、使い方を含めて解説します。
TextFieldの基本的な使い方
TextFieldを使用するには、以下の手順に従います。
TextFieldクラスをインポートします。
import 'package:flutter/material.dart';TextFieldウィジェットを作成します。このとき、controllerプロパティに、TextFieldの入力値を取得するためのTextEditingControllerオブジェクトを渡します。
TextEditingController _controller = TextEditingController();
TextField(
controller: _controller,
);- 必要に応じて、他のプロパティを設定します。たとえば、
decorationプロパティを使用して、TextFieldの外観をカスタマイズすることができます。
TextField(
controller: _controller,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter your name',
),
);TextFieldウィジェットを、ウィジェットツリーに追加します。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
TextEditingController _controller = TextEditingController();
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image',
home: Scaffold(
appBar: AppBar(
title: Text('TextField'),
),
body: Center(
child: TextField(
controller: _controller,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter your name',
),
)),
));
}
}
TextFieldの詳細
入力値の取得
TextFieldの入力値を取得するには、TextEditingControllerオブジェクトを使用します。このオブジェクトを作成し、TextFieldのcontrollerプロパティに渡します。
TextEditingController _controller = TextEditingController();
TextField(
controller: _controller,
);TextEditingControllerオブジェクトのtextプロパティを使用して、TextFieldの入力値を取得することができます。
String _name = _controller.text;また、入力内容をリアルタイムで取得して、別のウィジットに表示することもonChanged関数を利用することで可能です。下記は入力フィールドに入力した内容を下段の表示用フィールドに入力内容を表示するためのサンプルコード及び、実行結果です。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Real-Time Text Input',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _controller = TextEditingController();
String _displayText = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Real-Time Text Input'),
),
body: Column(
children: [
TextField(
controller: _controller,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter Something',
),
onChanged: (text) {
setState(() {
_displayText = text;
});
},
),
SizedBox(height: 20),
Text(
_displayText,
style: TextStyle(fontSize: 24),
),
],
),
);
}
}キーボードの種類を指定する
TextFieldのキーボードの種類を指定するには、TextInputTypeプロパティを使用します。このプロパティには、TextInputType列挙げられるキーボードタイプは、以下の通りです。
TextInputType.text: デフォルトのテキストキーボード。TextInputType.multiline: 複数行のテキストを入力するためのキーボード。TextInputType.number: 数値のみを入力するためのキーボード。TextInputType.phone: 電話番号を入力するためのキーボード。TextInputType.datetime: 日付と時刻を入力するためのキーボード。TextInputType.emailAddress: メールアドレスを入力するためのキーボード。TextInputType.url: URLを入力するためのキーボード。
TextField(
controller: _controller,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter E-Mail Adress',
),
)
フォーマットを指定する
TextFieldに入力された値のフォーマットを指定するには、inputFormattersプロパティを使用します。このプロパティには、TextInputFormatterオブジェクトのリストを渡します。TextInputFormatterは、入力されたテキストに対してフォーマットを適用するために使用されます。
たとえば、以下のコードは、TextFieldに入力されたテキストを、英大文字のみ許容しています。
TextField(
controller: _controller,
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp('[A-Z]')),
],
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'INPUT NAME',
),
)
テキストの最大長を指定する
TextFieldに入力できるテキストの最大長を指定するには、maxLengthプロパティを使用します。入力欄右下に入力可能な最大文字数が表示されます。
TextField(
controller: _controller,
maxLength: 10,
);
テキストの入力の有無を制御する
TextFieldにテキストの入力を制御するには、enabledプロパティを使用します。このプロパティには、trueまたはfalseを渡します。
TextField(
controller: _controller,
enabled: false,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter your name',
),
)
まとめ
この記事では、FlutterのTextFieldについて、基本的な使い方や詳細な機能について解説しました。TextFieldは、ユーザーがテキストを入力するための重要なウィジェットであるため、理解しておくことが重要です。FlutterのTextFieldをうまく活用して、アプリの開発を効率化しましょう。