【Flutter】お洒落なTextFieldを作成

Widget

対象者

  • Flutterを学び始めた初心者
  • テキスト入力のUIをカスタマイズしたい開発者
  • ユーザビリティを向上させるためのテキストフィールドデザインに興味がある方

はじめに

この記事では、FlutterでおしゃれなTextFieldを作成する方法を説明します。この例では、左側に虫眼鏡アイコン、右側にソートアイコンを持つTextFieldを作成し、ヒントテキストと角丸の境界線を追加します。

実施するソース

TextField(
  decoration: InputDecoration(
    // TextField左端の虫眼鏡のアイコン(飾り)
    prefixIcon: const Icon(Icons.search),

    // TextField右端のソート方法選択のアイコン
    suffixIcon: IconButton(
      icon: Icon(
        Icons.sort,
        size: 32,
        color: Theme.of(context).colorScheme.secondary,
      ),
      onPressed: () {},
    ),

    // 空白時(初期状態)でTextFiledに入力されている文字
    hintText: 'ヒント',
    hintStyle: Theme.of(context).textTheme.bodyMedium,

    // 角丸
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(128),
    ),
  ),
  keyboardType: TextInputType.text,
  textInputAction: TextInputAction.search,
)

  1. TextFieldウィジェット
    ユーザーがテキストを入力できるシンプルなテキストフィールドです。Flutterアプリ内でテキスト入力が必要な場合、このウィジェットを使用します。

  2. decoration
    テキストフィールドの見た目をカスタマイズできます。InputDecorationオブジェクトを使って、ヒントテキストやアイコン、境界線などを設定します。

  3. prefixIcon
    テキストフィールドの左側にアイコンを配置できます。この例では、検索を示す虫眼鏡のアイコンを追加しています。
    suffixIconプロパティにソートアイコンを設定し、サイズと色をカスタマイズします。onPressedには、アイコンがタップされたときの処理を記述します。

  4. suffixIcon
    テキストフィールドの右側にアイコンを配置できます。この例では、ソートを示すアイコンを追加し、onPressedでタップ時の処理を定義しています。

  5. hintText
    テキストフィールドが空のときに表示されるヒントテキストを設定するために使用されます。hintStyleを使って、ヒントテキストのフォントサイズや色などのスタイルをカスタマイズできます。

  6. border
    テキストフィールドの境界線のスタイルを設定できます。この例では、OutlineInputBorderを使って角丸の境界線を追加しています。

  7. keyboardType
    表示されるキーボードのタイプを指定します。テキスト入力、電話番号入力、メールアドレス入力など、さまざまな入力タイプに対応するキーボードを表示できます。

  8. textInputAction
    キーボードの右下に表示されるアクションボタンのタイプを指定します。この例では、検索アクションを設定しています。ユーザーがこのボタンをタップすると、通常はフォーカスが次のフォームフィールドに移動しますが、検索アクションを設定することで、代わりに検索機能を実行するようにカスタマイズできます。

まとめ

この記事では、FlutterでカスタマイズされたTextFieldを作成する方法を学びました。左右にアイコンを追加し、ヒントテキストや角丸の境界線を設定することで、見た目がおしゃれなTextFieldが作成できます。この方法を使って、アプリのユーザビリティを向上させることができます。

全ソース

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            TextField(
              decoration: InputDecoration(
                // TextField左端の虫眼鏡のアイコン(飾り)
                prefixIcon: const Icon(Icons.search),

                // TextField右端のソート方法選択のアイコン
                suffixIcon: IconButton(
                  icon: Icon(
                    Icons.sort,
                    size: 32,
                    color: Theme.of(context).colorScheme.secondary,
                  ),
                  onPressed: () {},
                ),

                // 空白時(初期状態)でTextFiledに入力されている文字
                hintText: 'ヒント',
                hintStyle: Theme.of(context).textTheme.bodyMedium,

                // 角丸
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(128),
                ),
              ),
              keyboardType: TextInputType.text,
              textInputAction: TextInputAction.search,
            ),
          ],
        ),
      ),
    );
  }
}