Flutter TextFieldの詳細

FlutterのTextFieldsの機能のチュートリアル

これは、Flutterが提供するウィジェットの一部とそれらのヒントとコツを詳細に説明する一連の記事の2番目の記事です。前回の記事では、ListViewウィジェットについて詳しく説明しました。この記事では、Flutter TextFieldウィジェットについて包括的に説明し、その機能と可能なカスタマイズを確認します。

TextFieldの概要

TextFieldウィジェットを使用すると、ユーザーから情報を収集できます。基本的なTextFieldのコードは次のように簡単です。

テキストフィールド()

これにより、基本的なTextFieldが作成されます。

TextFieldから情報を取得する

TextFieldsにはAndroidのようなIDがないため、テキストは必要に応じて取得できず、代わりに変更時に変数に保存するか、コントローラーを使用する必要があります。

  1. これを行う最も簡単な方法は、onChangedメソッドを使用して、現在の値を単純な変数に格納することです。以下にサンプルコードを示します。
文字列値= "";
テキストフィールド(
  onChanged:(テキスト){
    値=テキスト;
  }、
)

2.これを行う2番目の方法は、TextEditingControllerを使用することです。コントローラーはTextFieldに接続されており、TextFieldのテキストもリッスンして制御できます。

TextEditingController controller = TextEditingController();
テキストフィールド(
  コントローラー:コントローラー、
)

そして、以下を使用して変更を聞くことができます

controller.addListener((){
  //ここで何かをする
});

そして、値を取得または設定します

print(controller.text); //現在の値を出力します
controller.text = "デモテキスト"; //新しい値を設定します

TextFieldからの他のコールバック

TextFieldウィジェットは、次のような他のコールバックも提供します。

  1. onEditingCompleted
  2. onSubmitted
onEditingComplete:(){}、
onSubmitted:(値){}、

これらは、ユーザーがiOSで「完了」ボタンをクリックしたときなどのアクションで呼び出されるコールバックです。

TextFieldsでフォーカスを操作する

TextFieldに「フォーカス」を設定すると、TextFieldがアクティブになり、キーボードからの入力があると、フォーカスされたTextFieldにデータが入力されます。

1.オートフォーカスの使用

ウィジェットの作成時にTextFieldにオートフォーカスするには、オートフォーカスフィールドをtrueに設定します。

テキストフィールド(
  オートフォーカス:true、
)、

これにより、デフォルトでTextFieldにフォーカスが設定されます。

デフォルトでフォーカスはTextFieldにシフトします

2.カスタムフォーカス変更の操作

オートフォーカスだけでなく、オンデマンドでフォーカスを変更したい場合はどうしますか?次にフォーカスするTextFieldを参照する方法が必要なので、TextFieldにFocusNodeをアタッチし、それを使用してフォーカスを切り替えます。

// buildメソッドの外側で初期化
FocusNode nodeOne = FocusNode();
FocusNode nodeTwo = FocusNode();
// buildメソッド内でこれを行います
テキストフィールド(
  focusNode:nodeOne、
)、
テキストフィールド(
  focusNode:nodeTwo、
)、
RaisedButton(
  onPressed:(){
    FocusScope.of(context).requestFocus(nodeTwo);
  }、
  子:Text( "次のフィールド")、
)、

2つのフォーカスノードを作成し、それらをTextFieldsにアタッチします。ボタンが押されると、FocusScopeを使用して次のTextFieldにフォーカスを要求します。

ボタンを押すとフォーカスが変わります

TextFieldsのキーボードプロパティの変更

FlutterのTextFieldを使用すると、キーボードに関連するプロパティもカスタマイズできます。

1.キーボードの種類

TextFieldを使用すると、TextFieldにフォーカスが置かれたときに表示されるキーボードのタイプをカスタマイズできます。このためにkeyboardTypeプロパティを変更します。

テキストフィールド(
  keyboardType:TextInputType.number、
)、

タイプは次のとおりです。

  1. TextInputType.text(通常の完全なキーボード)
  2. TextInputType.number(数値キーボード)
  3. TextInputType.emailAddress(「@」の付いた通常のキーボード)
  4. TextInputType.datetime(「/」と「:」の数字キーボード)
  5. TextInputType.numberWithOptions(符号付きモードと10進数モードを有効にするオプションを備えた数値キーボード)
  6. TextInputType.multiline(複数行情報の最適化)

2. TextInputAction

TextFieldのtextInputActionを変更すると、キーボード自体のアクションボタンを変更できます。

例として:

テキストフィールド(
  textInputAction:TextInputAction.continueAction、
)、

これにより、「Done」ボタンが「Continue」ボタンに置​​き換えられます。

または

テキストフィールド(
  textInputAction:TextInputAction.send、
)、

原因

完全なリストは大きすぎてここに表示できませんが、必ずチェックしてください。

3.自動修正

特定のTextFieldの自動修正を有効または無効にします。これを設定するには、自動修正フィールドを使用します。

テキストフィールド(
  自動修正:false、
)、

これにより、提案も無効になります。

4.テキストの大文字化

TextFieldは、ユーザーからの入力で文字を大文字にする方法に関するいくつかのオプションを提供します。

テキストフィールド(
  textCapitalization:TextCapitalization.sentences、
)、

タイプは次のとおりです。

  1. TextCapitalization.sentences

これは私たちが期待する通常の大文字のタイプで、すべての文の最初の文字が大文字になっています。

2. TextCapitalization.characters

文中のすべての文字を大文字にします。

3. TextCapitalization.words

各単語の最初の文字を大文字にします。

テキストスタイル、配置、カーソルオプション

Flutterを使用すると、TextField内のテキストのスタイルと配置、およびTextField内のカーソルに関するカスタマイズが可能になります。

TextField内のテキストの配置

textAlignプロパティを使用して、TextField内のカーソルの位置を調整します。

テキストフィールド(
  textAlign:TextAlign.center、
)、

これにより、TextFieldの中央でカーソルとテキストが開始されます。

これには通常の配置プロパティがあります:開始、終了、左、右、中央、両端揃え。

TextField内のテキストのスタイル設定

スタイルプロパティを使用して、TextField内のテキストの外観を変更します。これを使用して、色、フォントサイズなどを変更します。これは、テキストウィジェットのスタイルプロパティに似ているため、あまり時間をかけずに調査します。

テキストフィールド(
  スタイル:TextStyle(色:Colors.red、fontWeight:FontWeight.w300)、
)、

TextFieldのカーソルを変更する

カーソルは、TextFieldウィジェットから直接カスタマイズできます。

カーソルの色、角の幅、半径を変更できます。たとえば、ここでは明確な理由なしに円形の赤いカーソルを作成します。

テキストフィールド(
  cursorColor:Colors.red、
  cursorRadius:Radius.circular(16.0)、
  cursorWidth:16.0、
)、

TextFieldのサイズと最大長の制御

TextFieldsは、その中に書き込まれる文字の最大数、行の最大数を制御し、テキストの入力に応じて拡張できます。

最大文字数の制御

テキストフィールド(
  maxLength:4、
)、

maxLengthプロパティを設定すると、最大長が適用され、デフォルトでTextFieldにカウンターが追加されます。

拡張可能なTextFieldを作成する

1行が終了したときに展開するTextFieldが必要になる場合があります。 Flutterでは、これはやや奇妙です(まだ簡単です)。これを行うには、maxLinesをnull(デフォルトでは1)に設定します。 nullに設定することはあまり慣れていませんが、それでも簡単です。

注:maxLinesを直接値に設定すると、デフォルトでその行数に拡張されます。

テキストフィールド(
  maxLines:3、
)

テキストを隠す

TextFieldのテキストを隠すには、obscureTextをtrueに設定します。

テキストフィールド(
  obscureText:true、
)、

そして最後に、TextFieldの装飾

ここまで、入力用にFlutterが提供する機能に焦点を当てました。次に、デザイナーにノーと言うのではなく、派手なTextFieldを実際に設計することに移ります。

TextFieldを装飾するために、InputDecorationを受け取る装飾プロパティを使用します。 InputDecorationクラスは非常に大きいため、重要なプロパティのほとんどをすばやく調べてみます。

ヒントとラベルのプロパティを使用して、ユーザーに情報を提供します

ヒントとラベルはどちらも、ユーザーがTextFieldに入力する情報を理解するのに役立つ文字列です。違いは、ユーザーが入力を開始すると、ラベルがTextFieldの上に浮かんでいるときにヒントが消えることです。

ヒントラベル

「icon」、「prefixIcon」、「suffixIcon」を使用してアイコンを追加できます

TextFieldsにアイコンを直接追加できます。テキストの代わりにprefixTextとsuffixTextを使用することもできます。

テキストフィールド(
  装飾:InputDecoration(
    icon:Icon(Icons.print)
  )、
)、
iconプロパティを使用したアイコン
テキストフィールド(
  装飾:InputDecoration(
    prefixIcon:Icon(Icons.print)
  )、
)、
prefixIconプロパティを使用するアイコン

同様に、他のウィジェットでも、「prefixIcon」の代わりに「prefix」を使用します

アイコンの代わりに汎用ウィジェットを使用するには、プレフィックスフィールドを使用します。ここでも明確な理由はありませんが、TextFieldに円形の進行状況インジケーターを追加しましょう。

テキストフィールド(
  装飾:InputDecoration(
    プレフィックス:CircularProgressIndicator()、
  )、
)、

ヒント、ラベルなどの各プロパティには、それぞれのスタイルフィールドがあります

ヒントのスタイルを設定するには、hintStyleを使用します。ラベルのスタイルを設定するには、labelStyleを使用します。

テキストフィールド(
  装飾:InputDecoration(
    hintText:「デモテキスト」、
    hintStyle:TextStyle(fontWeight:FontWeight.w300、color:Colors.red)
  )、
)、

注:この例ではこれを行っていますが、一般的にヒントの色は変更しないでください。ユーザーを混乱させる可能性があります。

ラベルは必要ないが、ユーザーに永続的なメッセージが必要な場合は、「helperText」を使用します。

テキストフィールド(
  装飾:InputDecoration(
    helperText: "こんにちは"
  )、
)、

「decoration:null」またはInputDecoration.collapsedを使用して、TextFieldのデフォルトの下線を削除します

これらを使用して、TextFieldのデフォルトの下線を削除します。

テキストフィールド(
  装飾:InputDecoration.collapsed(hintText: "")
)、

「border」を使用して、TextFieldに境界線を付けます

テキストフィールド(
  装飾:InputDecoration(
    ボーダー:OutlineInputBorder()
  )
)、

さらに多くの装飾ができますが、1つの記事ですべてを説明することはできません。しかし、これにより、Flutter TextFieldsのカスタマイズがいかに簡単かを理解できるようになることを願っています。

この記事は以上です!あなたがそれを楽しんで、あなたがそうするなら、いくつかの拍手を残すことを願っています。 Flutterのその他の記事については私をフォローし、この記事についてフィードバックがある場合はコメントしてください。

私の他のプロフィールや記事も自由にチェックしてください。

ツイッター

GitHub

私の他の記事のいくつか