【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part96 Input
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part96 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part95 Input
引き続き、Inputについて学びます。
Input
Form, FormFieldウィジェット
enabledBorder, disabledBorder, forcusedBorder, errorBorderプロパティ
ウィジェットの状態によってボーダーの色などを切り替えることができるようです。
- enabledBorder・・・通常時(なにもしていないときの)のボーダーの装飾です。
- disabledBorder・・・無効時(入力不可の時)のボーダーの装飾です。
- focusedBorder・・・フォーカスが当たっているときのボーダーの装飾です。
- errorBorder・・・エラーが発生しているときのボーダーの装飾です。
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>();
Widget _txt = TextFormField();
FormSamplePage() {
this._txt = getText(enable: true);
}
Widget getText({bool enable = true}) {
return TextFormField(
enabled: enable,
decoration: const InputDecoration(
// 通常時のボーダーです。
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
),
),
// 無効時のボーダーです。
disabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.blueGrey,
),
),
// フォーカス時のボーダーです。
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.lightBlue,
),
),
// フォーカス時のボーダーです。
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
),
),
// border: OutlineInputBorder(),
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'),
),
);
}
},
),
),
],
),
),
),
));
}
}
何もしていない状態だと緑の下線ですね。
フォーカスを当てると青の下線になりましたね。(人のアイコンまで青に!?)
エラーの場合は赤の下線になります。ラベルも赤に・・・デフォルトの動きだと思います。
無効にしてみます。
“`
FormSamplePage() {
this._txt = getText(enable: false);
}
“`
分かりにくいですが灰色(青灰色)になっています。
最後に
とても細やか!
今日はここまで!
参考
Flutterでテキストフィールドを囲う色を変える – Qiita
dart — flutterのテキスト編集フィールドを無効にする (uebu-kaihatsu.jp.net)
【Dart】【Flutter】関数の引数に初期値を与える|Flutterラボ|note
ディスカッション
コメント一覧
まだ、コメントがありません