MENU
カテゴリー
\気になるカテゴリーをクリック!/
Flutterでテキスト入力の方法を知りたい
FlutterのTextfiledの使い方を忘れたので知りたい。
そこで、今回はFlutterのTextfiledにおける基本的な使い方をサンプルコードとデモ動画で解説します。プログラミング初心者の方も0から分かるように簡単に解説します。不明点等ありましたら、ご気軽にお問い合わせ下さい。
フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。
上記イメージのように文字や数値などを入力できるシンプルなテキスト入力ができるclassです。テキスト入力フォームの作成にTextField
を利用します。
TextField classとは
A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.
(直訳)テキスト フィールドを使用すると、ユーザーはハードウェア キーボードまたはオンスクリーン キーボードを使用してテキストを入力できます。
引用:Flutter公式サイト「TextField class」
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における基本的な使い方をサンプルコードとデモ動画で解説しました。
大抵のアプリではインプットする操作が必要なので、Textfiledの基本操作は理解しておくとオリジナルアプリ作成時に役立ちますよ。
Flutterエンジニアになるには?
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る
Flutter をスクールで学ぶ
Flutterの副業を探す
おまけ:Flutter入門の完全ガイド
Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
Widget(ウィジェット) 一覧
Dart 基本文法
ライブラリ 使い方
コメント