Flutter拨号应用：如何让FloatingActionButton弹出手机号输入框

错误原因 #

你当前的写法只是在onPressed里返回了一个创建TextField的函数对象，并没有将这个TextField添加到界面中显示。Flutter的onPressed是回调函数，需要在这里执行显示弹窗/新UI的操作，而不是直接返回Widget。

修复方案 #

可以使用Flutter内置的showDialog来弹出输入框。下面是修改后的完整代码，同时做了一些适配深色主题和代码简化的优化：

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Dialer(),
  );
}

class Dialer extends StatefulWidget {
  const Dialer({super.key});

  @override
  State<Dialer> createState() => _DialerState();
}

// 封装手机号输入弹窗
Widget buildPhoneInputDialog(BuildContext context) {
  return AlertDialog(
    backgroundColor: Colors.grey[900],
    title: const Text(
      '输入手机号',
      style: TextStyle(color: Colors.white),
    ),
    content: TextField(
      keyboardType: TextInputType.phone,
      style: const TextStyle(color: Colors.white),
      decoration: const InputDecoration(
        hintText: '请输入手机号',
        hintStyle: TextStyle(color: Colors.grey),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.grey),
        ),
      ),
    ),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: const Text('取消', style: TextStyle(color: Colors.blue)),
      ),
      TextButton(
        onPressed: () {
          // 这里可以添加拨号逻辑
          Navigator.pop(context);
        },
        child: const Text('拨号', style: TextStyle(color: Colors.blue)),
      ),
    ],
  );
}

class _DialerState extends State<Dialer> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          backgroundColor: Colors.black,
          actions: const <Widget>[
            Icon(
              Icons.search,
              size: 30,
              color: Colors.white,
            ),
            SizedBox(width: 16),
            Icon(
              Icons.more_vert,
              size: 30,
              color: Colors.white,
            ),
            SizedBox(width: 10),
          ],
        ),
        body: Column(
          children: <Widget>[
            Flexible(
              flex: 3,
              fit: FlexFit.tight,
              child: Container(
                margin: const EdgeInsets.only(top: 50),
                child: const Text(
                  'Phone',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 30,
                  ),
                ),
              ),
            ),
            Expanded(
              child: ListView(
                children: const <Widget>[
                  _HistoryItem(text: '94693-68171'),
                  _HistoryItem(text: '696969696969'),
                  _HistoryItem(text: '4204204204'),
                  _HistoryItem(text: '6666666666'),
                  _HistoryItem(text: '1234567890'),
                  _HistoryItem(text: 'Elon musk'),
                ],
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.call, color: Colors.white),
          onPressed: () {
            // 点击按钮触发弹窗
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return buildPhoneInputDialog(context);
              },
            );
          },
          elevation: 12,
          backgroundColor: Colors.green,
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }
}

// 提取历史记录项为独立Widget，简化代码
class _HistoryItem extends StatelessWidget {
  final String text;
  const _HistoryItem({required this.text});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 80,
          width: double.infinity,
          color: const Color.fromARGB(255, 59, 59, 59),
          padding: const EdgeInsets.all(10),
          alignment: Alignment.centerLeft,
          child: Text(
            text,
            style: const TextStyle(color: Colors.grey),
            textScaleFactor: 1.25,
          ),
        ),
        const SizedBox(height: 5),
      ],
    );
  }
}

额外优化说明 #

• 类名遵循Flutter大驼峰命名规范，提升代码可读性
• 用ListView展示历史记录，避免内容过多导致界面溢出
• 提取历史记录项为单独Widget，简化代码结构
• 给图标、按钮添加颜色，适配深色主题
• 使用double.infinity替代固定宽度，适配不同尺寸屏幕

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