どうも、ちょげ(@chogetarou)です。
Flutterでテキストを入力できるようにする方法を紹介します。
方法
テキストを入力できるようにするには、次の3つのウェジェットを使います。
- TextFieldウェジェット：簡易的なテキスト入力欄
- TextFormFieldウェジェット：フォームの機能を備えたテキスト入力欄
- CupertinoTextField : iOS風のテキスト入力欄
TextField
TextFieldウェジェットは、簡易的なテキスト入力欄を作る作ることの出来るウェジェットです。
使うには、まず、テキスト入力欄を表示したい場所にTextFieldを配置します。
そして、引数や他のウェジェットで機能や見た目をカスタマイズします。
TextField()
[Flutter]「TextField」に枠線を付ける方法
文字入力欄を作る「TextFieldウェジェット」に枠線を付ける方法を解説します。
www.choge-blog.com
2021.09.29
[Flutter] TextFieldの文字色を変える方法
TextField（テキストフィールド）に入力された文字の色を変更する方法を解説します。
www.choge-blog.com
2021.09.29
TextFormField
TextFormFieldは、フォームに必要な機能を備えたテキスト入力欄を作ることの出来るウェジェットです。
使うには、まず、TextFieldと同じで表示したい場所にウェジェットを配置します。
そして、フォームの機能や見た目などを引数で設定します。
TextFormField()
[Flutter]TextFormFieldのテキストの色を設定するには？
TextFormFieldのテキストの色を設定する方法を紹介します。
www.choge-blog.com
2021.12.20
[Flutter]TextFormFieldのテキストをクリアするには？
TextFormFieldのテキストを全て削除する方法を紹介します。
www.choge-blog.com
2021.12.19
CupertinoTextField
CupertinoTextFieldは、iOS風のテキスト入力欄を作ることのできるウェジェットです。
使うには、まず、Cupertinoをインポートします。
import 'package:flutter/cupertino.dart';次に、テキスト入力欄を表示したい場所に、CupertinoTextFieldウェジェットを配置します。
そして、CupertinoTextFieldの引数や他のウェジェットで機能や見た目をカスタマイズします。
CupertinoTextField()
[Flutter]Cupertino(iOS風)のTextFieldでバリデーションをするには？
CupertinoのTextFieldでバリデーションをする方法を紹介します。
www.choge-blog.com
2021.12.13
[Flutter]CupertinoTextFieldの背景色を設定するには？
CupertinoTextFieldの背景色を設定する方法を紹介します。
www.choge-blog.com
2021.12.12
まとめ
テキストを入力できるようにするには、次の３つのウェジェットを使います。
- TextFieldウェジェット：簡易的なテキスト入力欄
- TextFormFieldウェジェット：フォームの機能を備えたテキスト入力欄
- CupertinoTextField : iOS風のテキスト入力欄
[Flutter]Cupertino(iOS風)でTextFieldを表示するには？
CupertinoでTextFieldを表示する方法を紹介します。
www.choge-blog.com
2021.12.13
[Flutter]TextFieldを数字だけの入力にするには？
TextFieldを数字だけの入力にする方法を紹介します。
www.choge-blog.com
2021.12.04
[Flutter]TextFieldの右側にアイコンを表示するには？
TextFielddの右側にアイコンを表示する方法を紹介します。
www.choge-blog.com
2021.11.05
[Flutter]TextFieldの左側にアイコンを表示するには？
TextFiledの左側にアイコンを表示する方法を紹介します。
www.choge-blog.com
2021.11.04
コメント