【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part97 Input

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part97 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part96 Input

引き続き、Inputについて学びます。

Input

Form, FormFieldウィジェット

fillColorプロパティとfilledプロパティ

fillColorプロパティは入力欄の色を指定できます。
入力欄に色が付く・付かないはfilledプロパティで操作します。

※enabledがfalseの場合は色が付かないようです。

filledtrueの場合

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

 

 

filledfalseの場合

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ウィジェットの学習は終わりです。

今日はここまで!