【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part95 Input
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part95 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part94 Input
引き続き、Inputについて学びます。
Input
Form, FormFieldウィジェット
decorationプロパティ
decoration
プロパティはInputDecoration
クラスを使用して入力ウィジェットに装飾をおこなうことができます。
本書はちょっと解読が難しく、おそらくFormField
ウィジェットのプロパティの説明です。
InputDecoration borderプロパティ
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()));
}
- UndelineInputBorder
下側にボーダーが表示されます。
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: UnderlineInputBorder(),
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'),
),
);
}
},
),
),
],
),
),
),
));
}
}
結果です。
- OutlineInputBorder
ボーダーラインがウィジェットを囲います。
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'),
),
);
}
},
),
),
],
),
),
),
));
}
}
結果です。
最後に
本書では簡単な装飾の紹介でしたが色を変えたりアイコンを付けたりとかなり多彩な模様!
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません