Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
14
Help us understand the problem. What are the problem?

Flutter TextField デザイン サンプル集

前書き

「あれ、TextFieldであの表現...どうするんだっけ...」

となった時にでもこの記事を参照していただけますと幸いです。

参考サイト
https://medium.com/flutter-community/a-visual-guide-to-input-decorations-for-flutter-textfield-706cf1877e25

サンプルコード

装飾なし

スクリーンショット 2021-05-29 16.34.24.png

TextField(),

icon

スクリーンショット 2021-05-29 16.39.50.png

TextField(
  decoration: InputDecoration(
     icon: Icon(Icons.ac_unit),
   ),
),

prefixIcon

スクリーンショット 2021-05-29 16.44.34.png

TextField(
  decoration: InputDecoration(
     prefixIcon: Icon(Icons.ac_unit),
   ),
),

suffixIcon

スクリーンショット 2021-05-29 16.46.43.png

TextField(
  decoration: InputDecoration(
     suffixIcon: Icon(Icons.ac_unit),
   ),
),

Icon Style (Color)

スクリーンショット 2021-05-29 16.52.42.png

TextField(
  decoration: InputDecoration(
     prefixIcon: Icon(Icons.ac_unit, color: Colors.amber,),
   ),
),

Icon Style ( Size )

スクリーンショット 2021-05-29 16.55.07.png

TextField(
  decoration: InputDecoration(
     suffixIcon: Icon(Icons.ac_unit, color: Colors.amber, size: 40,),
   ),
),

prefixText

スクリーンショット 2021-05-29 16.59.31.png

TextField(
  decoration: InputDecoration(
     prefixText: '東京都渋谷区'
   ),
),

suffixText

スクリーンショット 2021-05-29 17.03.07.png

TextField(
  decoration: InputDecoration(
     suffixText: '@gmail.com'
   ),
),

hintText

スクリーンショット 2021-05-29 17.03.50.png

TextField(
  decoration: InputDecoration(
     hintText: 'ユーザーIDを入力してください'
   ),
),

helperText

スクリーンショット 2021-05-29 17.06.16.png

TextField(
  decoration: InputDecoration(
     helperText: 'ユーザーID'
   ),
),

labelText

スクリーンショット 2021-05-29 17.07.39.png

TextField(
  decoration: InputDecoration(
     labelText: 'ユーザーID'
   ),
),

counterText

スクリーンショット 2021-05-29 17.08.38.png

TextField(
  decoration: InputDecoration(
     counterText: '10/20',
   ),
),

errorText

スクリーンショット 2021-05-29 17.20.53.png

TextField(
  decoration: InputDecoration(
     errorText: '半角英字は含めないでください'
   ),
),

Text Style

テキストスタイルの箇所は必要に応じてコードを変更してください。
スタイル適用可能なテキストは以下です。
・labelStyle
・counterStyle
・errorStyle
・prefixStyle
・suffixStyle
・helperStyle.

以下、2つのサンプルを掲載します。

スクリーンショット 2021-05-29 17.10.41.png

TextField(
  decoration: InputDecoration(
     counterText: '10/20',
     counterStyle: TextStyle(
       fontSize: 20,
       color: Colors.amber,
     )
  ),
),

スクリーンショット 2021-05-29 17.12.07.png

TextField(
  decoration: InputDecoration(
     helperText: 'ユーザーID',
     helperStyle: TextStyle(
       fontSize: 20,
       color: Colors.amber,
     )
  ),
),

MaxLines

maxlinesも同様に必要に応じてコードを変更してください。
maxlinesが適用可能なのは以下です。
・hintMaxLines
・helperMaxLines
・errorMaxLines

スクリーンショット 2021-05-29 17.17.26.png

TextField(
  decoration: InputDecoration(
     hintMaxLines: 3,
     hintText: 'ユーザーIDを入力してください\nユーザーIDを入力してください\nユーザーIDを入力してください'
   ),
),

hintTextDirection

スクリーンショット 2021-05-29 17.23.08.png

TextField(
  decoration: InputDecoration(
     hintText: 'ユーザーID',
     hintTextDirection: TextDirection.rtl,
   ),
),

floatingLabelBehavior

ラベルテキストが常時浮いた状態になっている

スクリーンショット 2021-05-29 17.24.34.png

TextField(
  decoration: InputDecoration(
     labelText: 'ユーザーID',
     floatingLabelBehavior: FloatingLabelBehavior.always,
   ),
),

フォーカス時にラベルテキストが消える

スクリーンショット 2021-05-29 17.26.51.png

↓フォーカス時

スクリーンショット 2021-05-29 17.27.37.png

TextField(
  decoration: InputDecoration(
     labelText: 'ユーザーID',
     floatingLabelBehavior: FloatingLabelBehavior.never
,
   ),
),

border none

スクリーンショット 2021-05-29 17.29.16.png

TextField(
  decoration: InputDecoration(
     border: InputBorder.none,
   ),
),

underline

スクリーンショット 2021-05-29 17.29.55.png

TextField(
  decoration: InputDecoration(
     border: UnderlineInputBorder(),
   ),
),

border 角丸

borderの色はborderSideで変更可能です。
enabledBorder = 何もしていない時の挙動、見た目
forcusedBorder = フォーカスされた時の挙動、見た目

スクリーンショット 2021-05-29 17.40.30.png

TextField(
  decoration: InputDecoration(
     enabledBorder: OutlineInputBorder(
       borderRadius: BorderRadius.circular(30),
       borderSide: BorderSide(
       color: Colors.amber,
       )
     ),
     focusedBorder: OutlineInputBorder(
       borderRadius: BorderRadius.circular(30),
       borderSide: BorderSide(
       color: Colors.amber,
       )
     ),
   ),
),

filled

スクリーンショット 2021-05-29 17.42.51.png

TextField(
  decoration: InputDecoration(
     filled: true,
     fillColor: Colors.grey,
   ),
),

スクリーンショット 2021-05-29 17.43.45.png

TextField(
  decoration: InputDecoration(
     filled: true,
     fillColor: Colors.grey.shade200,
     border: OutlineInputBorder(
       borderRadius: BorderRadius.circular(10),
       borderSide: BorderSide.none,
     )
   ),
),

enabled false

入力を受け付けない

スクリーンショット 2021-05-29 17.45.39.png

TextField(
  decoration: InputDecoration(
     enabled: false,
     hintText: 'ユーザーID',
   ),
),
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
14
Help us understand the problem. What are the problem?