【Flutter/Dart】テキストフィールドを表示する

目次

概要

例えばログインIDやメールアドレスの入力をしたい時など文字を入力する機会はたくさんある。
今回はその入力欄を実装する。

ソースコード

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:concentration/TextField/TextFieldView.dart';

void main() async{

  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        useMaterial3: true,
      ),
      home: TextFieldView(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class TextFieldView extends ConsumerWidget {
  const TextFieldView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
        appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text("テキストフィールド"),
        ),
        body: Container(
            margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
            child:
            Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  _textField("ログインID", false),
                  SizedBox(height: 20),
                  _textField("パスワード", true),
                  SizedBox(height: 20),
                ]
            )
        )
    );
  }

  Container _textField(String placehodler, bool isPassword) {
    return Container(
      child: TextField(
        obscureText: isPassword,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: placehodler,
        ),
      ),
    );
  }
}

デモ動画

詳細

テキストフィールドを表示する際は以下のように設定する。

TextField(
  obscureText: /* 入力した文字を伏せるかどうか */,
  decoration: InputDecoration(
    border: /* 境界線のスタイル */,
    labelText: /* 未入力時に薄く表示される文字列 */,
  ),
)
項目名(型名)内容
obscureText(bool)trueにするとパスワードの入力時のように伏せ文字になる
keyboardType(TextInputType)表示されるキーボードの種類を設定
decoration
 border境界線のスタイル。
設定しない場合は、TextFieldの下の部分のみ線が引かれる
 labelText(String)入力欄の上部に表示する文字列
 hintText(String)未入力時に表示される文字列
 filled(bool)テキストフィールドの背景書を

公式ドキュメントには他にも設定値があるが、必要に応じて適宜追加していく。

参考ページ