【 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'),
                        ),
                      );
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    ));
  }
}

結果です。

最後に

本書では簡単な装飾の紹介でしたが色を変えたりアイコンを付けたりとかなり多彩な模様!

今日はここまで!

参考

Flutter TextFieldの装飾 – Qiita