我要在单击容器“ //此容器被单击”时打开一个覆盖，然后单击将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包装在容器，行，中间和所有其他可能的小部件中。
答案 0 :(得分：0)
尝试做：
parts