MENU

MENU

カテゴリー

\気になるカテゴリーをクリック!/

やきいも
文系SE
【プロフ】
 ▶ 30代半ば
 ▶ ITエンジニア13年目 | 業務システム
 ▶ 妻と息子の3人で田舎の暮らし

【サイト運営】
このブログは私の体験をもとに以下に関する情報をお届けしています。
 ▶ AI
 ▶ Java
 ▶ Flutterなど
Udemyセール!最大95%オフ!1,200円~11月の最新セール情報をみる

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

この記事にはPRを含む場合があります。

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

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

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

フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。

目次

【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 をスクールで学ぶ

Flutterの副業を探す

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

Flutter/Dartの基礎一覧

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

Widget(ウィジェット) 一覧

Dart 基本文法

ライブラリ 使い方

コメント

コメントする

CAPTCHA


目次