【Flutter】５分で実装！パスワード自動入力機能

こんにちは、株式会社Pentagonでアプリ開発をしている小山内です。

ログインフォームなどを作成する際、パスワードの自動入力を実装したい、といったことがあるかもしれません。このようなケースで活躍するのがTextFormFieldのAutoComplete機能です。今回はこちらをご紹介します。

【こんな人に読んで欲しい】
・便利なログイン認証機能を実装したいエンジニア
・TextFormFiledを使いこなしたいエンジニア

【この記事を読むメリット】
・TextFormFieldにおける自動入力を実装でき、ユーザーエクスペリエンスが向上します。
・開発時の実機ビルドにおいて操作性が改善され、作業効率が上がります。

【結論】
TextFormFieldのautofillHintsパラメーターに、[AutofillHints.password]を挿入します。

AutoComplete機能の実装方法

autofillHintsでは入力補助を行うデータの種類を指定します。パスワードであれば、AutofillHints.passwordです。書き方は下記のようになります。

autofillHints:[AutofillHints.password]

実装時の注意点

下記の2点が挙げられます。
・autofillHintsはList型で指定する必要があります。[ ]を書き忘れないようにしましょう。
・ビルド時は実機を使用し、パスワードの自動入力機能が設定されていることを必ず確認しましょう。

サンプルコード

では、実際にサンプルコードを見てみましょう。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'autofill_complete_demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AutoFillComplete Demo'),
      ),
     body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: TextFormField(
          decoration: const InputDecoration(labelText: "Password"),
          autofillHints: const [AutofillHints.password], //PWの入力補助を設定
        ),
      ),
    );
  }
}

通常は補助機能として文字が提案されますが、パスワードが提案されるように変化しました。これで一からパスワードを入力する必要はありません。

メールとパスワードのセットでの登録も可能

ちなみに、良くあるログインフォームとして、メールアドレスとパスワード入力欄をセットで表示することがあります。このような場合にもセットでの入力補助が可能です。

AutofillGroupというWidgetを使うことで、複数項目の入力を補助することができます。最後のTextformFieldには、onEditingCompleteを下記のように設定する必要があるので忘れないようにしましょう。

AutofillGroup(   //複数項目をセットで入力する場合に使用
  child: Column(
    children: [
      TextFormField(
        decoration: const InputDecoration(labelText: "e-mail"),
        keyboardType: TextInputType.emailAddress,
        autofillHints: const [AutofillHints.email], //emailの自動入力
      ),
      TextFormField(
        decoration: const InputDecoration(labelText: "Password"),
        obscureText: true,
        autofillHints: const [AutofillHints.password], //PWの自動入力
        onEditingComplete: () =>
            TextInput.finishAutofillContext(),
      ),
    ],
  ),
),

まとめ

いかがだったでしょうか。TextFormFieldのAutofillComplete機能は、パスワードなどのフォームをはじめ、様々な場面で使用することができ、利便性の向上に役立ちます。ぜひ利用してみてください。

おまけ

Flutterに関する知識を深めたい方には、『Flutterの特徴・メリット・デメリットを徹底解説』という記事がおすすめです。

この記事では、Flutter アプリ開発の基本から、Flutter とは何か、そして実際のFlutter アプリ 事例を通じて、その将来性やメリット、デメリットまで詳しく解説しています。
Flutterを使ったアプリ開発に興味がある方、またはその潜在的な可能性を理解したい方にとって、必見の内容となっています。

ぜひ一度ご覧ください。