在单击容器时，它会弹出一个错误，即没有找到子小部件的材质小部件

Question

我想在点击容器时打开一个覆盖 '// 这个容器被点击' 并且在点击时函数 showTeacherDetails 被称为 '//这个函数'

import 'package:educewebsite/SizeConfig.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class TeachersScreen extends StatefulWidget {
  @override
  _TeachersScreenState createState() => _TeachersScreenState();
}

class _TeachersScreenState extends State<TeachersScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      height: SizeConfig.blockSizeVertical * 92,
      width: SizeConfig.blockSizeHorizontal * 80,
      color: Color(0xFFF4F4F4),
      padding:
          EdgeInsets.symmetric(horizontal: SizeConfig.blockSizeHorizontal * 1),
      child:
          Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
        SizedBox(
          height: SizeConfig.blockSizeVertical * 1,
        ),
        Container(
          margin: EdgeInsets.symmetric(
            horizontal: SizeConfig.blockSizeHorizontal * 1,
          ),
          child: ListTile(
              dense: false,
              leading: Icon(
                Icons.person,
                size: 40,
              ),
              title: Text(
                'Teacher',
                style: GoogleFonts.montserrat(
                    textStyle:
                        TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              )),
        ),
        Align(
          alignment: Alignment.centerLeft,
          child: GestureDetector(
            onTap: () {
              // function to add new teacher
            },
            child: Container(
              margin: EdgeInsets.symmetric(
                  horizontal: SizeConfig.blockSizeHorizontal * 2),
              alignment: Alignment.centerLeft,
              height: SizeConfig.blockSizeVertical * 8,
              width: SizeConfig.blockSizeHorizontal * 16,
              decoration: BoxDecoration(
                color: Colors.lightBlue,
                borderRadius: BorderRadius.circular(5),
              ),
              child: ListTile(
                leading: Icon(
                  Icons.person_add,
                  color: Colors.white,
                ),
                title: Text(
                  'New Teacher',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
          ),
        ),
        Container(
          height: SizeConfig.blockSizeVertical * 75,
          width: SizeConfig.blockSizeHorizontal * 78,
          child: GridView.count(
            childAspectRatio: 5 / 3,
            crossAxisCount: 3,
            scrollDirection: Axis.vertical,
            children: [
              GestureDetector(                            // this container is clicked
                onTap: () {
                  showTeacherDetails(context);
                },
                child: Container(
                  margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      color: Colors.white),
                  child: Text('1'),
                ),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('2'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('3'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('4'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('5'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('5'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('6'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('7'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('8'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('9'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('10'),
              ),
              Container(
                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 5),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5), color: Colors.blue),
                child: Text('11'),
              )
            ],
          ),
        )
      ]),
    );
  }
// function called
  showTeacherDetails(BuildContext context) {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry;
    overlayEntry = OverlayEntry(
        builder: (context) => Positioned(
            width: SizeConfig.blockSizeHorizontal * 25,
            height: SizeConfig.blockSizeVertical * 92,
            top: SizeConfig.blockSizeVertical * 8,
            left: SizeConfig.blockSizeHorizontal * 75,
            child: Container(alignment: Alignment.centerLeft,
                padding: EdgeInsets.symmetric(
                    vertical: SizeConfig.blockSizeVertical * 0.5,
                    horizontal: SizeConfig.blockSizeHorizontal * 1),
                color: Colors.white,
                child: Center(
                  child: IconButton(
                      icon: Icon(
                        Icons.close,
                        size: 40,
                      ),
                      onPressed: () => overlayEntry.remove(),),
                ))));
    overlayState.insert(overlayEntry);
    }
  }

这是我的代码，单击容器时会引发错误：

The following assertion was thrown building IconButton(Icon, padding: EdgeInsets.all(8.0), dirty):
No Material widget found.
IconButton widgets require a Material widget ancestor.
In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's
material library, that material is represented by the Material widget. It is the Material widget
that renders ink splashes, for instance. Because of this, many material library widgets require that
there be a Material widget in the tree above them.
To introduce a Material widget, you can either directly include one, or use a widget that contains
Material itself, such as a Card, Dialog, Drawer, or Scaffold.
The specific widget that could not find a Material ancestor was:
  IconButton
The ancestors of this widget were:
  ...
  Center
  Align
  Padding
  ColoredBox
  Container
  ...

The relevant error-causing widget was:
  IconButton

我曾尝试将 IconButton 包装在容器、行、中心和所有其他可能的小部件中。

Answer 1

尝试做：

return Scaffold(
   body: SafeArea(
child: Column(
children: [
Container(),
...
...
]
)
)
);