【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part97 Input
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part97 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part96 Input
引き続き、Inputについて学びます。
Input
Form, FormFieldウィジェット
fillColorプロパティとfilledプロパティ
fillColor
プロパティは入力欄の色を指定できます。
入力欄に色が付く・付かないはfilled
プロパティで操作します。
※enabledがfalse
の場合は色が付かないようです。
filled
がtrue
の場合
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
// runApp(new MaterialApp(home: new MyApp()));
runApp(new MaterialApp(home: new FormSamplePage()));
}
class FormSamplePage extends StatelessWidget {
// これが必ず必要
final _formKey = GlobalKey<FormState>();
Widget _txt = TextFormField();
FormSamplePage() {
this._txt = getText(enable: true);
}
Widget getText({bool enable = true}) {
return TextFormField(
enabled: enable,
decoration: const InputDecoration(
fillColor: Colors.deepOrangeAccent,
filled: true,
icon: Icon(Icons.person),
hintText: '名前を入力してください',
labelText: '名前',
prefixIcon: Icon(Icons.local_post_office, color: Colors.green),
suffixIcon: Icon(Icons.accessibility_new_rounded, color: Colors.blue),
),
validator: (value) {
if (value!.isEmpty) {
return '必須です。';
}
return null;
},
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('テスト中!')),
body: Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_txt,
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
// RaiseButtonは非推奨になりました。ElevatedButtonを使います。
child: ElevatedButton(
child: const Text('Submit'),
onPressed: () {
// ここでvalidateを呼ぶ
if (_formKey.currentState!.validate()) {
// Scaffold.ofのshowSnackBarは非推奨となったようです。
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Processing Data'),
),
);
}
},
),
),
],
),
),
),
));
}
}
filled
がfalse
の場合
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
// runApp(new MaterialApp(home: new MyApp()));
runApp(new MaterialApp(home: new FormSamplePage()));
}
class FormSamplePage extends StatelessWidget {
// これが必ず必要
final _formKey = GlobalKey<FormState>();
Widget _txt = TextFormField();
FormSamplePage() {
this._txt = getText(enable: true);
}
Widget getText({bool enable = true}) {
return TextFormField(
enabled: enable,
decoration: const InputDecoration(
fillColor: Colors.deepOrangeAccent,
filled: false,
icon: Icon(Icons.person),
hintText: '名前を入力してください',
labelText: '名前',
prefixIcon: Icon(Icons.local_post_office, color: Colors.green),
suffixIcon: Icon(Icons.accessibility_new_rounded, color: Colors.blue),
),
validator: (value) {
if (value!.isEmpty) {
return '必須です。';
}
return null;
},
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('テスト中!')),
body: Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_txt,
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
// RaiseButtonは非推奨になりました。ElevatedButtonを使います。
child: ElevatedButton(
child: const Text('Submit'),
onPressed: () {
// ここでvalidateを呼ぶ
if (_formKey.currentState!.validate()) {
// Scaffold.ofのshowSnackBarは非推奨となったようです。
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Processing Data'),
),
);
}
},
),
),
],
),
),
),
));
}
}
hintTextプロパティ
hintText
プロパティはフォーカス時に入力欄にヒント文字列を表示できます。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
// runApp(new MaterialApp(home: new MyApp()));
runApp(new MaterialApp(home: new FormSamplePage()));
}
class FormSamplePage extends StatelessWidget {
// これが必ず必要
final _formKey = GlobalKey<FormState>();
Widget _txt = TextFormField();
FormSamplePage() {
this._txt = getText(enable: true);
}
Widget getText({bool enable = true}) {
return TextFormField(
enabled: enable,
decoration: const InputDecoration(
fillColor: Colors.deepOrangeAccent,
filled: false,
icon: Icon(Icons.person),
hintText: '名前を入力してください',
labelText: '名前',
prefixIcon: Icon(Icons.local_post_office, color: Colors.green),
suffixIcon: Icon(Icons.accessibility_new_rounded, color: Colors.blue),
),
validator: (value) {
if (value!.isEmpty) {
return '必須です。';
}
return null;
},
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('テスト中!')),
body: Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_txt,
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
// RaiseButtonは非推奨になりました。ElevatedButtonを使います。
child: ElevatedButton(
child: const Text('Submit'),
onPressed: () {
// ここでvalidateを呼ぶ
if (_formKey.currentState!.validate()) {
// Scaffold.ofのshowSnackBarは非推奨となったようです。
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Processing Data'),
),
);
}
},
),
),
],
),
),
),
));
}
}
suffix, suffixText,suffixIcon,prefix,prefixText,prefixIconプロパティ
各プロパティは入力欄に対して先頭(最後)にテキストやアイコンでヒントを表示できます。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
// runApp(new MaterialApp(home: new MyApp()));
runApp(new MaterialApp(home: new FormSamplePage()));
}
class FormSamplePage extends StatelessWidget {
// これが必ず必要
final _formKey = GlobalKey<FormState>();
Widget _txt = TextFormField();
FormSamplePage() {
this._txt = getText(enable: true);
}
Widget getText({bool enable = true}) {
return TextFormField(
enabled: enable,
decoration: const InputDecoration(
filled: true,
icon: Icon(Icons.person),
hintText: '名前を入力してくださいな!',
labelText: '名前',
prefixText: '私は・・・「',
prefixIcon: Icon(Icons.local_post_office, color: Colors.green),
suffixIcon: Icon(Icons.accessibility_new_rounded, color: Colors.blue),
suffixText: '」といいます!',
),
validator: (value) {
if (value!.isEmpty) {
return '必須です。';
}
return null;
},
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('テスト中!')),
body: Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_txt,
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
// RaiseButtonは非推奨になりました。ElevatedButtonを使います。
child: ElevatedButton(
child: const Text('Submit'),
onPressed: () {
// ここでvalidateを呼ぶ
if (_formKey.currentState!.validate()) {
// Scaffold.ofのshowSnackBarは非推奨となったようです。
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Processing Data'),
),
);
}
},
),
),
],
),
),
),
));
}
}
実装の例は少し変ですが入力部分の前後にテキストやアイコンが表示されています。
最後に
これでForm
ウィジェットの学習は終わりです。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません