BLOG
TextField【controller】
2023.10.23
2023.10.23
1. はじめに
FlutterのTextFieldは、ユーザーがテキストを入力するための重要なウィジェットの一つです。今回は、TextFieldのcontrollerというプロパティを主に解説します。
この記事ではFlutter 3.10.1とDart 3.0.1をベースに解説を行っています。
2. 基本的な宣言方法
TextFieldは非常に簡単に宣言できます。
TextField();上記のコードでは、以下のようなシンプルなTextFieldが表示されます。
実際のアプリケーションを開発する際には、シンプルなTextFieldに対して、テキストの取得や見た目のカスタマイズなどを実装することが多くあります。その実現方法としては、TextFieldのプロパティであるcontrollerとdecorationを使用します。
- controller:
TextEditingControllerのインスタンスを使用してテキストの取得や変更が可能。 - decoration:
InputDecorationを使用して見た目をカスタマイズ。
3. controller
TextEditingControllerは、TextFieldのテキストの値にアクセスしたり、変更したりするためのコントローラーです。以下の機能が提供されています。
3.1 テキストの取得
controller.textで現在のテキスト値を取得できます。
_controller.addListener(() {
print("入力されたテキスト: ${_controller.text}");
});この部分では、リスナー内で_controller.textを使用して、現在のテキスト値を取得しています。
3.2 テキストの設定
controller.text = '新しいテキスト';のようにしてテキストの値を変更できます。
onPressed: () {
setState(() {
_controller.text = 'Hello Flutter!';
});
},この部分の_controller.text = 'Hello Flutter!';で、ボタンが押された時にテキストフィールドの値を「Hello Flutter!」に変更しています。
3.3 リスナーの追加
TextEditingControllerにはテキストが変更されるたびに呼び出されるリスナーを追加することができます。
_controller.addListener(() {
print("入力されたテキスト: ${_controller.text}");
});この部分でaddListenerを使用して、テキストが変更されるたびにリスナーが呼び出されるように設定しています。リスナー内では、変更されたテキストをコンソールに出力しています。
3.4 disposeについて
TextEditingControllerを使用する上で、diposeはとても重要です。
@Override
void dispose() {
// リソースのリークを防ぐために、controllerをdisposeする
_controller.dispose();
super.dispose();
}このコードの部分では、disposeメソッド内で_controller.dispose();を呼び出すことで、TextEditingControllerが使用していたリソースを解放しています。特に、追加されたリスナーなどが内部的に持っているリソースを適切にクリーンアップすることができます。
最後に、super.dispose();を呼び出すことで、Stateの基本クラスに対するクリーンアップ処理も行われます。
それによって、不要なリソースが解放され、メモリリークや他のリソースの浪費を防ぐことができます。
3.5 プログラム全体
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _controller = TextEditingController();
@override
void initState() {
super.initState();
// テキストが変更されるたびに呼び出されるリスナーを追加
_controller.addListener(() {
print("入力されたテキスト: ${_controller.text}");
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('TextField Demo')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
TextField(
controller: _controller,
decoration: const InputDecoration(labelText: 'テキストを入力してください'),
),
ElevatedButton(
onPressed: () {
setState(() {
_controller.text = 'Hello Flutter!';
});
},
child: const Text('テキストを設定'),
),
],
),
),
);
}
@override
void dispose() {
// リソースのリークを防ぐために、controllerをdisposeする
_controller.dispose();
super.dispose();
}
}4. まとめ
TextFieldはFlutterアプリケーションの中核を成すウィジェットの一つであり、この記事を通じて、その基本的な使用方法からcontrollerについてを解説しました。controller以外にも、見た目を操作するdecorationや入力のバリデーション、キーボードのカスタマイズ、テキストのスタイリングなど、TextFieldはさまざまなカスタマイズを行うことができます。
参考
- 公式サイト
