Flutter点击拨号按钮时如何打印并在ListView展示通话记录号码

你需要做三处核心修改即可实现需求：

• 新增通话记录存储列表，用来保存本次运行期间的所有拨打号码
• 在拨号按钮的点击逻辑中，将当前输入的有效号码追加到通话记录列表
• 新增ListView组件，渲染已存储的通话记录内容

修改后的完整代码如下：

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

class MyHomePage extends StatefulWidget {
  late final List<Phone> phone;

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

class _MyHomePageState extends State<MyHomePage> {
  List numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
  List icon = [IconButton(onPressed: () {}, icon: Icon(Icons.one_k))];
  String display = '';
  // 新增通话记录存储列表
  List<String> _callLogs = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          // 新增通话记录列表区域
          Container(
            height: 200,
            margin: const EdgeInsets.only(top: 20),
            child: _callLogs.isEmpty
                ? const Center(child: Text('暂无通话记录'))
                : ListView.builder(
                    itemCount: _callLogs.length,
                    itemBuilder: (context, index) => ListTile(
                      leading: const Icon(Icons.phone_callback),
                      title: Text(_callLogs[index]),
                    ),
                  ),
          ),
          Center(
              child: Text(
            display,
            style: const TextStyle(fontSize: 25, fontWeight: FontWeight.w300),
          )),
          Center(
            child: Container(
              height: 310,
              width: 250,
              child: GridView.builder(
                  itemCount: 12,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      childAspectRatio: 10 / 8,
                      mainAxisSpacing: 2),
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                        decoration: const BoxDecoration(
                            shape: BoxShape.circle, color: Colors.grey),
                        child: InkWell(
                            onTap: () {
                              setState(() {
                                display = display + numbers[index];
                              });
                            },
                            child: Center(child: Text(numbers[index]))));
                  }),
            ),
          ),
          Container(
            width: 220,
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                    decoration: const BoxDecoration(
                        shape: BoxShape.circle, color: Colors.blue),
                    child: IconButton(
                      iconSize: 30,
                      icon: const Icon(Icons.person),
                      onPressed: () {
                        if (display.isEmpty) return;
                        FlutterPhoneDirectCaller.callNumber(display);
                      },
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.center,
                  child: Container(
                    decoration: const BoxDecoration(
                        shape: BoxShape.circle, color: Colors.green),
                    child: IconButton(
                      iconSize: 30,
                      icon: const Icon(Icons.phone),
                      onPressed: () async {
                        if (display.isEmpty) return;
                        // 把号码添加到通话记录列表，最新记录放在顶部
                        setState(() {
                          _callLogs.insert(0, display);
                          // 如果需要拨号后清空输入栏，放开下面的注释
                          // display = '';
                        });
                        await FlutterPhoneDirectCaller.callNumber(display);
                        print(display);
                      },
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.centerRight,
                  child: Container(
                    decoration: const BoxDecoration(
                        shape: BoxShape.circle, color: Colors.red),
                    child: IconButton(
                      icon: const Icon(Icons.backspace),
                      onPressed: () {
                        if (display.length != 0) {
                          setState(() {
                            display = display.substring(0, display.length - 1);
                          });
                        }
                      },
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 如果你原来的项目中定义了Phone类请保留，这里补充避免编译报错
class Phone {
  final String number;
  Phone(this.number);
}

• 以上实现的通话记录默认存在内存中，应用重启后会清空，如果需要持久化存储可以搭配shared_preferences、sqflite等本地存储方案实现。
• 代码中新增了空号码判断，避免无内容时点击拨号存入空记录。

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