Блог

Я хочу открыть наложение при нажатии на контейнер ‘// этот контейнер щелкнут’ и при щелчке вызывается функция showTeacherDetails ‘// this fuction’

 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 в контейнер, строку, центр и все другие возможные виджеты.

Попробуйте выполнить:

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