Flutter iOS端如何实现iCloud Keychain存密与自动填充？

一、iOS项目配置遗漏项 #

你需要在Xcode中完成以下两项配置，这是iOS端自动填充和Keychain保存的核心前提：

1. 开启Keychain共享

   • 打开iOS项目的Runner.xcworkspace
   • 选中Runner目标，切换到Signing & Capabilities标签页
   • 点击+ Capability，搜索并添加Keychain Sharing
   • 保留默认的Keychain Group（格式为$(TeamIdentifierPrefix)com.your.bundle.id即可）

2. 添加自动填充权限到Info.plist
   在Info.plist中添加以下键值对，告知iOS应用支持密码自动填充功能：

   <key>NSAutoFillUsageDescription</key>
   <string>保存和自动填充账号密码，提升登录体验</string>
   <key>CFBundleDisplayName</key>
   <string>你的应用名称</string>
   

   注：CFBundleDisplayName为可选但建议配置，iOS会用该名称在Keychain中标识你的应用。

二、Flutter代码优化调整 #

现有代码在Android端正常，但iOS需要几个关键调整才能触发系统的密码保存与自动填充逻辑：

1. 密码输入框添加obscureText: true
   iOS系统仅会识别带有密码隐藏属性的输入框为密码字段，否则不会触发保存提示。修改密码输入框：

   TextFormField(
     autofillHints: [AutofillHints.password],
     obscureText: true, // 必须添加这一行
     validator: (value) =>
         value!.isEmpty ? "some password please" : null,
     decoration: const InputDecoration(
       labelText: 'password',
       hintText: 'enter your password',
     ),
   )
   

2. 调整finishAutofillContext的执行时机
   页面跳转过快可能导致iOS来不及处理保存请求，建议延迟跳转：

   onPressed: () {
     if (_formKey.currentState!.validate()) {
       TextInput.finishAutofillContext(shouldSave: true);
       // 延迟100ms跳转，确保iOS有足够时间处理保存请求
       Future.delayed(const Duration(milliseconds: 100), () {
         Navigator.push(
           context,
           MaterialPageRoute(builder: (context) => SecondRoute()),
         );
       });
     }
   },
   

3. 明确场景化的autofillHints
   为登录页的输入框添加更精准的自动填充提示，帮助iOS识别场景：

   // 邮箱输入框同时指定用户名和邮箱提示
   TextFormField(
     autofillHints: [AutofillHints.username, AutofillHints.email],
     validator: (value) =>
         value!.isEmpty ? "some email please" : null,
     decoration: const InputDecoration(
       labelText: 'email',
       hintText: 'enter email address',
     ),
   )
   

三、验证效果 #

完成以上配置后，重新编译运行iOS真机：

• 输入邮箱和密码点击提交后，应弹出系统级的"保存密码"提示
• 再次打开登录页，点击输入框时，键盘上方会弹出已保存的账号密码选项，或长按输入框可选择"自动填充"

修改后的完整代码示例 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AutoFillPage(),
    );
  }
}

class AutoFillPage extends StatefulWidget {
  const AutoFillPage({Key? key}) : super(key: key);

  @override
  _AutoFillPageState createState() => _AutoFillPageState();
}

class _AutoFillPageState extends State<AutoFillPage> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text("Auto Fill"),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            key: _formKey,
            child: AutofillGroup(
              onDisposeAction: AutofillContextAction.commit,
              child: ListView(
                padding: const EdgeInsets.symmetric(horizontal: 16),
                children: [
                  Column(
                    children: [
                      TextFormField(
                        autofillHints: [AutofillHints.username, AutofillHints.email],
                        validator: (value) =>
                            value!.isEmpty ? "some email please" : null,
                        decoration: const InputDecoration(
                          labelText: 'email',
                          hintText: 'enter email address',
                        ),
                      ),
                      TextFormField(
                        autofillHints: [AutofillHints.password],
                        obscureText: true,
                        validator: (value) =>
                            value!.isEmpty ? "some password please" : null,
                        decoration: const InputDecoration(
                          labelText: 'password',
                          hintText: 'enter your password',
                        ),
                      ),
                    ],
                  ),
                  MaterialButton(
                    child: const Text("submit"),
                    onPressed: () {
                      if (_formKey.currentState!.validate()) {
                        TextInput.finishAutofillContext(shouldSave: true);
                        Future.delayed(const Duration(milliseconds: 100), () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => SecondRoute()),
                          );
                        });
                      }
                    },
                  ),
                ],
              ),
            ),
          ),
        ),
      );

  @override
  void dispose() {
    debugPrint("Form widget disposed");
    super.dispose();
  }
}

class SecondRoute extends StatefulWidget {
  @override
  _SecondRouteState createState() => _SecondRouteState();
}

class _SecondRouteState extends State<SecondRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            debugPrint("----> Navigate back to first page");
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }

  @override
  void dispose() {
    debugPrint("2nd Screen widget disposed");
    super.dispose();
  }
}

内容的提问来源于stack exchange，提问作者nicover