【Flutter】テキスト入力:Textfiled使い方を3分で解説!(サンプルコードあり)

Flutterでテキスト入力の方法を知りたい
FlutterのTextfiledの使い方を忘れたので知りたい。

そこで、今回はFlutterTextfiledにおける基本的な使い方サンプルコードデモ動画で解説します。プログラミング初心者の方も0から分かるように簡単に解説します。不明点等ありましたら、ご気軽にお問い合わせ下さい。

この記事で分かること!
  • テキスト入力フォームってなに
  • Textfieldの使い方

ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。

  • 学習の計画
  • スケジュール管理
  • ポートフォリオ作成時に技術選定 など

初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。

目次

【Flutter】文字や数字の入力はTextField テキスト入力フォームを作成

上記イメージのように文字数値などを入力できるシンプルなテキスト入力ができるclassです。テキスト入力フォームの作成にTextFieldを利用します。

TextField classとは

A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.

(直訳)テキスト フィールドを使用すると、ユーザーはハードウェア キーボードまたはオンスクリーン キーボードを使用してテキストを入力できます。

引用:Flutter公式サイト「TextField class

【Flutter】TextFieldのサンプルコードと使い方を解説

TextFieldサンプルコードは以下の通りです。コピペでそのまま使えます。

import 'package:flutter/material.dart';

void main() => runApp(TextfieldDemo());

class TextfieldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テキストフォームデモ'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                TextField(
                  maxLength: 50,
                  enabled: true,
                  maxLines:2 ,
                  decoration: InputDecoration(
                    icon: Icon(Icons.login),
                    labelText: 'ログイン番号',
                    // border: InputBorder.none,
                    hintText: 'メールアドレスを入力して下さい',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    ),
                  ),
                  keyboardType: TextInputType.emailAddress,
                ),
                TextField(
                  maxLength: 10,
                  enabled: true,
                  obscureText: true,
                  style: TextStyle(color: Colors.red),
                  decoration: InputDecoration(
                    icon: Icon(Icons.password),
                    labelText: 'パスワード',
                    // border: InputBorder.none,
                    hintText: '半角英数記号で入力して下さい',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

TextFieldの基本プロパティ

プロパティ内容
maxLength入力できる桁数を指定:数値
enabled入力可能か不可を指定:treu,false
maxLines入力できる行数を指定:数値
styleテキストの色を指定
keyboardTypeキーボードを設定可能(テキスト、数字、日付など)

テキストを装飾する際に利用するdecoration: InputDecoration

icon表示したいアイコンを指定
labelTextテキスト見出しラベルを指定
hintTextテキスト入力時のサポート文字を表示
borderテキスト入力フォームのアウトラインを指定

まとめ:Flutter入門者は入力フォーム使い方:Textfiledは押さえておくべき!

今回はFlutterTextfiledにおける基本的な使い方サンプルコードデモ動画で解説しました。

大抵のアプリではインプットする操作が必要なので、Textfiledの基本操作は理解しておくとオリジナルアプリ作成時に役立ちますよ。

Flutterエンジニアになるには?

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけFlutter入門の完全ガイド

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次