Flutter计算器开发：Keypad组件执行时不显示问题求助

我正在通过开发计算器学习Flutter，已将代码拆分为Output和Keypad两个模块。Output组件显示正常，但Keypad组件运行时无法显示，请求排查问题。

Keypad组件代码 #

import 'package:flutter/material.dart';

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

  @override
  State<Keypad> createState() => _KeypadState();
}

class _KeypadState extends State<Keypad> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        buttonsColumn(["7", "4", "1", "."]),
        buttonsColumn(["8", "5", "2", "0"]),
        buttonsColumn(["9", "6", "3", "="], true),
        buttonFunctionsColumn(["DEL", "/", "x", "-", "+"])
      ],
    );
  }

  Expanded buttonsColumn(List<String> contents, [bool haveEquals = false]) {
    void number(String n) {}
    void equals() {}
    return Expanded(
        flex: 1,
        child: Container(
          color: Colors.grey[800],
          child: Column(
            children: [
              numberButton(contents[0], number),
              numberButton(contents[1], number),
              numberButton(contents[2], number),
              numberButton(contents[3], haveEquals ? equals : number),
            ],
          ),
        ));
  }

  Expanded buttonFunctionsColumn(List<String> contents) {
    void operator(String o) {}
    return Expanded(
        flex: 1,
        child: Container(
          color: Colors.grey[600],
          child: Column(
            children: [
              numberButton(contents[0], operator),
              numberButton(contents[1], operator),
              numberButton(contents[2], operator),
              numberButton(contents[3], operator),
              numberButton(contents[4], operator),
            ],
          ),
        ));
  }

  Expanded numberButton(String content, Function func) {
    return Expanded(
      flex: 1,
      child: IconButton(
          onPressed: () {
            func();
          },
          icon: Text(
            content,
            style: TextStyle(fontSize: 15),
          )),
    );
  }
}

主页代码 #

import 'package:calculator1/keypad.dart';
import 'package:calculator1/output.dart';
import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: Column(children: [Output(), Keypad()])),
    );
  }
}

调试截图 #

问题修复方案 #

1. 修复布局约束

主页Column中，Keypad未占据剩余空间，导致组件高度被压缩为0。将Keypad包裹在Expanded中：

home: Scaffold(body: Column(children: [Output(), Expanded(child: Keypad())])),

2. 替换错误的按钮组件

numberButton使用IconButton显示文本是错误用法，IconButton专为图标设计，应替换为TextButton：

Expanded numberButton(String content, Function func) {
  return Expanded(
    flex: 1,
    child: TextButton(
      onPressed: () => func(content),
      style: TextButton.styleFrom(
        backgroundColor: Colors.transparent,
        padding: EdgeInsets.zero,
      ),
      child: Text(
        content,
        style: TextStyle(fontSize: 20, color: Colors.white),
      ),
    ),
  );
}

同时修正方法调用，传递content参数（之前的空方法也需要接收参数）：

void number(String n) {
  // 后续实现数字输入逻辑
}

void equals() {
  // 后续实现等于计算逻辑
}

void operator(String o) {
  // 后续实现运算符逻辑
}

3. 统一按钮高度比例（优化）

buttonFunctionsColumn有5个按钮，其余列有4个，导致高度比例不一致。可调整Expanded的flex值，保证整体高度对齐：

// buttonsColumn中的子项
Expanded(child: numberButton(contents[0], number), flex: 5),
Expanded(child: numberButton(contents[1], number), flex: 5),
Expanded(child: numberButton(contents[2], number), flex: 5),
Expanded(child: numberButton(contents[3], haveEquals ? equals : number), flex: 5),

// buttonFunctionsColumn中的子项
Expanded(child: numberButton(contents[0], operator), flex: 4),
Expanded(child: numberButton(contents[1], operator), flex: 4),
Expanded(child: numberButton(contents[2], operator), flex: 4),
Expanded(child: numberButton(contents[3], operator), flex: 4),
Expanded(child: numberButton(contents[4], operator), flex: 4),

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