【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part94 Input
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part94 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part93 Scrolling
今回からInputについて学びます。
Input
Form, FormFieldウィジェット
Form
ウィジェットはxxxxFormField
ウィジェット系の最上位に位置する(管理する)ウィジェットのようです。
Form
ウィジェットを最上位にすることで管理・バリデータ処理を行うことができるようになります。
main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'formsamplepage.dart';
void main() {
// runApp(new MaterialApp(home: new MyApp()));
runApp(new MaterialApp(home: new FormSamplePage()));
}
formsamplepage.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class FormSamplePage extends StatelessWidget {
// これが必ず必要
final _formKey = GlobalKey<FormState>();
@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>[
TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
filled: true,
icon: Icon(Icons.person),
hintText: '名前を入力してください',
labelText: '名前',
),
validator: (value) {
if (value!.isEmpty) {
return '必須です。';
}
return null;
},
),
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'),
),
);
}
},
),
),
],
),
),
),
));
}
}
最後に
なんだかHTMLっぽく見えてきました(笑
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません