如何在Flutter中实现带渐进式披露的注册/登录弹窗？

1. 弹窗卡片的最佳组件选择 #

不需要依赖第三方库，Flutter原生组件就能满足需求：

• showModalBottomSheet：最适合做底部弹出的卡片式弹窗，自带圆角和半透明背景，完全贴合移动端主流交互设计
• 自定义Dialog：如果需要居中弹窗，可以用Dialog包裹Card组件，实现100%自定义样式

优先推荐showModalBottomSheet，代码简洁且效果符合用户对卡片弹窗的预期。

2. 渐进式披露的实现思路 #

核心靠状态管理控制字段显隐，配合动画优化体验：

• 用StatefulWidget构建弹窗内容，定义布尔变量（比如_isExpanded）标记展开状态
• 点击右下角箭头时，调用setState切换_isExpanded的值
• 用AnimatedContainer或SizeTransition包裹额外字段，实现平滑的展开/收起动画，避免界面生硬跳转

3. 完整示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('登录注册弹窗示例')),
        body: Center(
          // 模拟触发认证的操作（比如购买商品）
          child: ElevatedButton(
            onPressed: () => _showAuthModal(context),
            child: const Text('点击购买（需认证）'),
          ),
        ),
      ),
    );
  }

  // 弹出认证卡片
  void _showAuthModal(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true, // 避免键盘遮挡输入框
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (context) => const AuthModal(),
    );
  }
}

// 认证弹窗内容组件
class AuthModal extends StatefulWidget {
  const AuthModal({super.key});

  @override
  State<AuthModal> createState() => _AuthModalState();
}

class _AuthModalState extends State<AuthModal> {
  bool _isExpanded = false; // 控制额外字段的展开状态

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(context).viewInsets.bottom, // 适配键盘高度
        left: 16,
        right: 16,
        top: 20,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 弹窗标题
          const Text(
            '请完成认证',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 20),

          // 基础字段：姓名、手机号
          const TextField(
            decoration: InputDecoration(
              labelText: '姓名',
              border: OutlineInputBorder(),
            ),
          ),
          const SizedBox(height: 12),
          const TextField(
            decoration: InputDecoration(
              labelText: '手机号',
              border: OutlineInputBorder(),
            ),
            keyboardType: TextInputType.phone,
          ),
          const SizedBox(height: 12),

          // 可展开的额外字段：邮箱、密码
          AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            height: _isExpanded ? 100 : 0, // 展开时显示高度，收起时高度为0
            child: Column(
              children: const [
                TextField(
                  decoration: InputDecoration(
                    labelText: '邮箱（可选）',
                    border: OutlineInputBorder(),
                  ),
                  keyboardType: TextInputType.emailAddress,
                ),
                SizedBox(height: 12),
                TextField(
                  decoration: InputDecoration(
                    labelText: '设置密码',
                    border: OutlineInputBorder(),
                  ),
                  obscureText: true,
                ),
              ],
            ),
          ),

          // 展开/收起切换按钮
          Align(
            alignment: Alignment.bottomRight,
            child: TextButton(
              onPressed: () {
                setState(() {
                  _isExpanded = !_isExpanded;
                });
              },
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(_isExpanded ? '收起' : '更多选项'),
                  const SizedBox(width: 4),
                  Icon(
                    _isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                  ),
                ],
              ),
            ),
          ),

          // 确认按钮
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: () {
                // 这里添加注册/登录逻辑
                Navigator.pop(context);
              },
              child: const Text('确认认证'),
            ),
          ),
          const SizedBox(height: 20),
        ],
      ),
    );
  }
}

代码说明： #

• 用showModalBottomSheet实现底部卡片弹窗，isScrollControlled参数解决键盘遮挡问题
• 通过_isExpanded变量控制额外字段的显示状态，点击按钮切换
• AnimatedContainer实现平滑的高度过渡动画，提升交互体验
• 适配了键盘弹出时的界面偏移，保证输入框始终可见

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