目次
概要
例えばログイン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） | テキストフィールドの背景書を |
公式ドキュメントには他にも設定値があるが、必要に応じて適宜追加していく。