[Flutter]TextFieldを２行に指定する方法

こんにちわ。

今日も元気に記事を書いていきます。基礎固めをしたいと思い、Flutterの基礎を勉強し始めています。

さあ、今回は個人開発で役立った方法を紹介します。

主題

TextFieldを使っていると１行のみに制限したい場合や、複数行にしたい場合があります。

• １行のみにしたい場合
• 複数行にしたい場合

この２つはとても簡単です。以下に例をご紹介します。

１行のみのTextField

const TextField(
  maxLines: 1,
),

MaxLinesを２行に設定した

• maxLinesを２にしたのに、３行以上になってしまう？？
• 理由は現在解明中(理由を知っている方がいたら教えてください！)

const TextField(
  maxLines: 2,
),

本題

２行に指定する方法

２行にしたい場合は、ちょっとした工夫が必要になります。
以下が工夫したコードとなります。

TextField(
  maxLines: 2,
  inputFormatters: [
    TextInputFormatter.withFunction(
      (TextEditingValue oldValue, TextEditingValue newValue) {
        int numLines = '\n'.allMatches(newValue.text).length;
        if (numLines > 1) {
           return oldValue;
        }
        return newValue;
      },
    ),
  ],
 ),

解説

このコードの解説の前にやりたいことを挙げてみます。

• TextFieldを２行以上にしたい
• TextFieldが３行になったときに、２行になるように修正したい。

//ユーザーがTextFieldに入力する内容を制御するためのフォーマッター
TextInputFormatter.withFunction(
  //oldValue・・・変更前のテキスト　
  //newValue・・・ユーザーが入力しようとしているテキスト
  (TextEditingValue oldValue, TextEditingValue newValue) {
    //TextFieldの改行数をカウントしている。
    int numLines = '\n'.allMatches(newValue.text).length;
    //ユーザーが入力しようとしているテキストが２行以内である場合は、oldValueのまま
    if (numLines > 1) {
      return oldValue;
    }
    return newValue;
  },
),

どうでしょうか？僕なりに解説をしてみました。言葉で解説すると、

１、変更前のテキスト(oldValue)とユーザーが入力しようとしているテキスト(newValue)を比較する。
２、ユーザーが入力しようとしているテキストの改行数をカウントする
３、改行数が３行以上であれば、oldValueのままにする。
４、改行数が２行以内であれば、newValueの値になる。

ということです。

最後に

Widgetひとつとっても、調べれば調べるほど深いですね。面白い。
全然知らなかったのでとても勉強になりました。

少しでもいいUIができればいいなと思います。いいFlutterライフを送りましょう。

アプリの宣伝

アプリ名

「大喜利メーカー」

アプリの概要

• 一本グランプリ風の画像を自由に生成することができる
• 自分の考えたお題を投稿することができる
• 文字の位置や大きさを自由自在に変更することができる

iOSのリンク

Androidはリリースするの忘れていたので、後日リリース予定です。