Flutter计算器应用如何显示SnackBar？解决ScaffoldMessenger未找到错误

首先纠正你代码里的拼写错误：正确的API是ScaffoldMessenger.of(context).showSnackBar()，不是你写的showsnakbarmassenger.of(context).showsnackbare，大小写和单词拼写必须准确。

接下来解决核心错误，这个报错的原因是当前使用的context无法在组件树中找到ScaffoldMessenger，以下是具体解决方法：

1. 确保应用根结构正确 #

Flutter的ScaffoldMessenger是由MaterialApp提供的，所以你的应用根Widget必须是MaterialApp，不能直接用Scaffold作为根。

错误示例：

void main() {
  runApp(Scaffold(home: CalculatorPage())); // 错误：缺少MaterialApp
}

正确示例：

void main() {
  runApp(MaterialApp(
    home: CalculatorPage(),
    debugShowCheckedModeBanner: false,
  ));
}

2. 确保调用SnackBar的context属于Scaffold子树 #

如果你的按钮是在Scaffold的直接子树内，直接使用当前页面的context即可。但如果按钮嵌套在多层自定义Widget中，可能需要用Builder组件生成一个能访问到ScaffoldMessenger的子context。

完整可运行的计算器示例代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: CalculatorPage(),
    debugShowCheckedModeBanner: false,
  ));
}

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

  @override
  State<CalculatorPage> createState() => _CalculatorPageState();
}

class _CalculatorPageState extends State<CalculatorPage> {
  final _num1Controller = TextEditingController();
  final _num2Controller = TextEditingController();

  void _handleCalculate() {
    final num1 = _num1Controller.text.trim();
    final num2 = _num2Controller.text.trim();

    if (num1.isEmpty || num2.isEmpty) {
      // 正确调用SnackBar
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('请填写两个数字'),
          duration: Duration(seconds: 2),
        ),
      );
      return;
    }

    // 求和逻辑（已正常工作）
    final sum = double.parse(num1) + double.parse(num2);
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('求和结果'),
        content: Text(sum.toStringAsFixed(2)),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx),
            child: const Text('确定'),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('简易计算器')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _num1Controller,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(
                labelText: '第一个数字',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _num2Controller,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(
                labelText: '第二个数字',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: _handleCalculate,
              style: ElevatedButton.styleFrom(minimumSize: const Size(double.infinity, 50)),
              child: const Text('计算求和', style: TextStyle(fontSize: 18)),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _num1Controller.dispose();
    _num2Controller.dispose();
    super.dispose();
  }
}

3. 嵌套场景下用Builder获取正确context #

如果你的按钮是在一个自定义Widget中，且该Widget的context无法访问到ScaffoldMessenger，可以用Builder包裹按钮，生成一个子context：

// 示例：按钮在嵌套Widget中时的处理
Builder(
  builder: (ctx) {
    return ElevatedButton(
      onPressed: () {
        if (_num1Controller.text.trim().isEmpty || _num2Controller.text.trim().isEmpty) {
          ScaffoldMessenger.of(ctx).showSnackBar(
            const SnackBar(content: Text('请填写完整数字')),
          );
        }
      },
      child: const Text('计算'),
    );
  },
)

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