Flutterのマテリアルデザインを使ったコンポーネントを紹介【入力コンポーネント編】

Flutterで始めるモバイルアプリ開発 第15回

テキスト入力（2）

表示タイプ（表示枠の変更）

　マテリアルデザインでのテキスト入力では、図3に示すように表示形式が大きく2つあります。この表示形式を変更するには、InputDecorationのborderを変更することで可能です。

　Filled Text形式はUnderlineInputBorderクラスが使われていて、デフォルトになります。

　また、Outlined Text形式はOutlineInputBorderクラスが利用されます。

図3：TextFormFieldの表示タイプ（表示枠）

　実際に、表示枠をカスタマイズする場合のコード例がリスト2です。

［リスト2］TextFormFieldを使ったサンプルコード（lib/textfield/TextFieldWidget.dartの抜粋）

return TextFormField(
  // : (省略)
  decoration: InputDecoration(
    // : (省略)
    // （1） 通常時のボーダー設定
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey)),
    ),
    // （2） フォーカス時のボーダー設定
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(width: 5, color: Colors.deepPurple)
    )
  )
);
// : (省略)
return TextFormField(
  // : (省略)
  decoration: InputDecoration(
    // （3） アウトラインボーダー枠の設定
    border: OutlineInputBorder(),
    suffixText: "円",
    labelText : '金額',
    hintText: '3000円以上を設定してください',
  )
);

　UnderlineInputBorderを使用する場合に表示枠をカスタマイズするためには、（1）のようにenabledBorderのプロパティに指定します。また、フォーカスがあたっている場合には、（2）focusedBorderに設定します。

　また、それ以外の状態として、disabledBorderやerrorBorder、focusedErrorBorderがあります。borderのみに設定しても状態に合わせてスタイルが変更されないようです。Outlined Text形式の場合は、（3）のようにborderにOutlineInputBorderを指定します。ただし、デフォルトで指定されている色や線の太さなどを指定する場合、先ほどと同様に個別に指定します。

　これらのスタイルを個別に指定するのは面倒です。従って、前回紹介したMaterialAppのThemeを使ったスタイルを使えばデフォルト指定を同様に変更すことが可能です。リスト3は、デフォルトのボーダーをOutlineInputBorderに変更する場合のコード例です。

［リスト3］MaterialAppのThemeでデフォルトのスタイルを設定するコード（lib/main.dartの抜粋）

return MaterialApp(
  // (省略)
  theme: ThemeData(
    // (省略)
    // （1） InputFormFieldのデフォルトスタイルを変更
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.black54
        )
      ),
    )
  )
);

　デフォルトのスタイルを変更するには、（1）のようにInputDecorationThemeを指定します。指定できるプロパティの使い方はここまでで紹介したInputDecorationクラスとほぼ同様になっています。

複数行の入力に対応する

　複数行の入力を受け付けるようにするためには、TextFormFieldにmaxLinesプロパティを指定します。図4は複数行の入力を可能にした場合の実行結果とリスト4はそのコード例です。

図4：複数行を受け付ける設定をして場合の実行例

［リスト4］パスワード形式の入力コンポーネント例（lib/textfield/TextFieldWidget.dartの抜粋）

return TextFormField(
  maxLines: 4,
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'メモ',
    helperText: "ご自由にご記入ください",
    focusColor: Colors.blueGrey
));

　ただし、maxLinesは表示上の行数であり、入力できる行数ではないのでご注意ください。

パスワード形式とキーボードタイプの設定

　入力した文字列をパスワードのように伏せ字で表示させたい場合や、その際に入力できる文字も限定したい場合があります。例えば、図5のような入力コンポーネントを作成したい場合です。

図5：TextFormFieldの伏せ字設定とキーボードタイプを指定した場合の実行例

　リスト5は、この実行例のコードです。

［リスト5］パスワード形式の入力コンポーネント例（lib/textfield/TextFieldPasswordWidget.dartの抜粋）

return TextFormField(
  // : (省略)
  // （1） パスワードのように入力文字を伏せ字にする
  obscureText: true,
  // （2） キーボードタイプを指定する
  keyboardType: TextInputType.number,
  // （3） アイコンボタンを設置する
  decoration: InputDecoration(
    suffixIcon: IconButton(
      icon: Icon(Icons.visibility_off),
      onPressed: () {
        //
      },
    )
  ),
);

　入力された文字を伏せ字にするには、（1）のようにobscureTextを利用します。そして、入力文字する場合のキーボードを指定する場合には、（2）のようにTextInputTypeを指定します。

　ただし、入力できる文字を限定しているわけではなく、あくまでキーボードの指定です。そして、アイコンをクリックすると伏せ字の効果を消したい場合などがあります。その場合、（3）のようにsuffixIcon部分にIconButtonなどを設置することも可能です。ここでは、具体的な実装法は紹介しませんが、アイコンを押すとふるまいを変えるなどの実装が可能です。

入力しているテキストの表示スタイルを変更する

　入力している文字の表示方法を変更する変更したい場合があります。例えば、図6のように入力する値が金額の場合などがそれにあたります。

図6：TextFormFieldの表示スタイルの変更の実行例

　金額を入力する場合には、表示は右寄せが好ましく、そして、3桁ごとにカンマを自動的に入れた方が親切です。そして、文字間隔も通常よりも広い方が入力している人がわかりやすいということもあるでしょう。このような場合は、3つのプロパティを利用します。1つ目が、配置場所（textAlign）の指定であり、そして、次に文字スタイル（style）の設定。そして、入力されたテキストのフォーマット指定（inputFormatters）です。これらを使ったコード例がリスト7です。

［リスト7］表示スタイルの変更例（lib/textfield/TextFieldStyleWidget.dartの抜粋）

// : (省略)
return TextFormField(
  maxLength: 10,
  // （1） 表示の配置指定
  textAlign: TextAlign.right,
  // （2） 表示文字の指定
  style: TextStyle(
    fontWeight: FontWeight.bold,
    letterSpacing: 10
  ),
  // （3） 入力文字の制限と表示方法
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
    // （4） カスタムの表示方法
    NumberInputFormatter()
  ],
  decoration: InputDecoration(
    suffixText: "円",
    // : (省略)
  )
);
// : (省略)
// （5） 文字のフォーマット指定の自作クラス
class NumberInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    final text = newValue.text;

    // （6） 文字を数値に置き換えてから、フォーマットする
    final number = int.parse(text);
    final formatter = NumberFormat("#,###");
    final newText = formatter.format(number);

    return newValue.copyWith(
        text: newText,
        // （7） カーソル位置を指定
        selection: TextSelection.collapsed(offset: newText.length));
  }
}
// : (省略)

　（1）のtextAlignでTextAlign.rightを指定することで配置を右寄せに指定します。そして、（2）のようにstyleで文字のスペースと太字に指定しています。そして、（3）のinputFormattersを利用することでテキストのフォーマットを指定可能です。ただし、この指定は必ずしもテキストのフォーマットだけではなく、入力制限もすることができます。

　先ほどキーボードタイプを指定しても入力文字の制限はできないと記しましたが、FilteringTextInputFormatterを使えば入力する文字の制限が可能です。そして、自分で入力された文字のフォーマットを変更することもでき、（4）が3桁ごとにカンマを自動的に挿入するためのカスタムフォーマットクラスです。

　このクラスの実装は（5）のようにTextInputFormatterを継承することで自作します。今回は入力された数字のフォーマットを変更するためのNumberFormatを用いました。ここで注意する点は、リターンするのは文字列ではなくTextEditingValueクラスのインスタンスであり、カーソル位置の指定が必要です。（7）では、カーソル位置は入力された文字の最後にしています。

まとめ

　テキストは入力コンポーネントの基本であり、また、さまざまなカスタマイズが必要となるケースが多いため複雑と感じた方もいると思います。しかし、テキスト入力はさまざまなところで利用する一方、スマホ特有の入力のしやすさをアプリであればぜひしたいと思うはずです。そのときに今回紹介したようなポイントを知っておくと便利だと思います。

　次回は入力された文字の取得と設定、そして、今回紹介できなかったその他の入力コンポーネントを紹介します。