I have been learning Flutter for 2 months now and I’ve created this menu, but the problem is the close button is not showing and the option list is not in a grey circular box. This is my current code:
`import ‘package:flutter/material.dart’;
import ‘package:shot_planner/Shot%20List%20Page/Menu/Camera%20Menu%20-%20Phone.dart’;
import ‘package:shot_planner/Shot%20List%20Page/Menu/Special%20Equipment%20Menu%20-%20Phone.dart’;
import ‘package:shot_planner/Shot%20List%20Page/Menu/VFX%20Menu%20-%20Phone.dart’;
import ‘../../Project Page/Project/Project Page.dart’;
bool shotAddInfoMenuVisible = false;
class ShotAddInfoMenu extends StatefulWidget {
int shotlistindex;
int projectindex;
List<List> addInfoFocusNodeList;
ShotListState shotListState;
Function(String)? onMoreDetailsChosen;
Function(bool)? onTextDetailsChosen;
ShotAddInfoMenu(
this.shotlistindex,
this.projectindex,
this.addInfoFocusNodeList,
this.shotListState, {
this.onMoreDetailsChosen,
this.onTextDetailsChosen,
});
@override
State createState() => _ShotAddInfoMenuState();
}
class _ShotAddInfoMenuState extends State {
@override
void initState() {
print("pop");
super.initState();
}
BottomBar(Widget popupmenu) {
showModalBottomSheet(
constraints: BoxConstraints(
maxHeight: widget.shotListState.slidingpanelmaxheight.isNaN
? 500
: widget.shotListState.slidingpanelmaxheight,
maxWidth: MediaQuery.of(context).size.width - 10,
),
backgroundColor: Colors.transparent,
context: context,
builder: (context) {
return popupmenu;
},
);
}
@override
Widget build(BuildContext context) {
print("Building ShotAddInfoMenu");
if (widget.shotListState
.addinfoitemgroup[widget.shotlistindex][widget.projectindex]
.length <=
4) {}
// TODO: implement build
return Container(
margin: EdgeInsets.only(left: 10, right: 10, bottom: 30),
decoration: BoxDecoration(
color: Color(0xff1C1C1C),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
children: [
Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
width: 20,
height: 20,
margin: EdgeInsets.only(right: 20, top: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey[400],
),
child: Icon(
Icons.close,
size: 12,
color: Colors.black,
),
),
),
),
Expanded(
child: Container(
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
color: Colors.grey[850],
borderRadius: BorderRadius.circular(10)
),
child: Column(
children: [
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: widget
.shotListState
.addinfoitemgroup[widget.shotlistindex][widget.projectindex]
.length,
itemBuilder: (BuildContext context, int index) {
return Column(
children: [
Material(
color: Colors.transparent,
child: ListTile(
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 16),
dense: true,
visualDensity:
VisualDensity(vertical: -3),
title: Text(
widget.shotListState.addinfoitemgroup[widget.shotlistindex]
[widget.projectindex][index]
.toString(),
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
onTap: () {
setState(() {
widget.shotListState.addinfoitemgroup[widget.shotlistindex][widget.projectindex].removeAt(index);
widget.shotListState.getprojectindex[widget.shotlistindex] =
widget.projectindex;
if (widget.shotListState
.addinfoitemgroup[widget.shotlistindex]
[widget.projectindex][index] ==
'Special Equipment') {
widget
.shotListState
.addinfolistname[widget.shotlistindex]
[widget.projectindex]
.add('Special Equipment');
} else {
widget
.shotListState
.addinfolistname[widget.shotlistindex]
[widget.projectindex]
.add(widget.shotListState
.addinfoitemgroup[widget.shotlistindex]
[widget.projectindex][index]);
}
widget
.shotListState
.infonamelistpdf[widget.shotlistindex]
[widget.projectindex]
.add(widget.shotListState
.addinfoitemgroup[widget.shotlistindex]
[widget.projectindex][index]);
widget
.shotListState
.infoitemlistpdf[widget.shotlistindex]
[widget.projectindex]
.add('Add');
widget
.shotListState
.getoptionselection[widget.shotlistindex]
[widget.projectindex]
.add([
widget.shotListState
.addinfoitemgroupoption[widget.shotlistindex]
[widget.projectindex][index]
]);
widget
.shotListState
.getoptionsubtitle[widget.shotlistindex]
[widget.projectindex]
.add(['']);
List<bool> gettotalbool = [];
for (int i = 0;
i <
widget
.shotListState
.addinfoitemgroupoption[widget.shotlistindex]
[widget.projectindex][index]
.length;
i++) {
gettotalbool.add(false);
}
widget
.shotListState
.addinfolistitem[widget.shotlistindex]
[widget.projectindex]
.add('');
widget
.shotListState
.finalinputcustomize[widget.shotlistindex]
[widget.projectindex]
.add(false);
widget.shotListState
.shotlist[widget.shotlistindex][widget.projectindex]
.add([gettotalbool]);
widget
.shotListState
.addinfoitemgroup[widget.shotlistindex]
[widget.projectindex]
.removeAt(index);
widget
.shotListState
.addinfoitemgroupoption[widget.shotlistindex]
[widget.projectindex]
.removeAt(index);
if (widget
.shotListState
.addinfoitemgroup[widget.shotlistindex]
[widget.projectindex]
.length <
4){
//globals.slidingpanelmaxheight -= 65;
}
widget.shotListState.inputlistenable.value += 1;
int x = widget
.shotListState
.finalinputcustomize[widget.shotlistindex]
[widget.projectindex]
.length;
int y = widget
.shotListState
.addinfolistname[widget.shotlistindex]
[widget.projectindex]
.length;
if (widget.shotListState.scenepageedit[widget.shotlistindex]
[widget.projectindex]) {
for (int i = 0;
i <
widget
.shotListState
.finalinputcustomize[widget.shotlistindex]
[widget.projectindex]
.length;
i++) {
widget.shotListState
.finalinputcustomize[widget.shotlistindex]
[widget.projectindex][i] = false;
}
widget.shotListState.inputtype = y - 1 + 6;
widget.shotListState
.getprojectindex[widget.shotlistindex] =
widget.projectindex;
widget.shotListState.gettitle = widget.shotListState
.addinfolistname[widget.shotlistindex]
[widget.projectindex][y - 1];
if (widget.shotListState.addinfolistname[widget.shotlistindex][widget.projectindex][y - 1] == 'Subject' ||
widget.shotListState.addinfolistname[widget.shotlistindex][widget.projectindex][y - 1] ==
'Sound' ||
widget.shotListState.addinfolistname[widget.shotlistindex]
[widget.projectindex][y - 1] ==
'Lighting' ||
widget.shotListState.addinfolistname[widget.shotlistindex]
[widget.projectindex][y - 1] ==
'Location') {
widget.onTextDetailsChosen?.call(true);
Navigator.pop(context);
widget.shotListState
.finalinputcustomize[widget.shotlistindex]
[widget.projectindex][x - 1] = true;
Future.delayed(const Duration(milliseconds: 300), () {
double boxesAboveEditingBoxTotalHeigh = 0;
double editingBoxAdditionalInfoTotalHeight = 0;
double totalOffset = 0;
for (int shotIndex = 0;
shotIndex < widget.projectindex;
shotIndex++) {
if (widget.shotListState.shotdropdownvisibility[
widget.shotlistindex][shotIndex]) {
boxesAboveEditingBoxTotalHeigh += 795;
for (int addInfoIndex = 0;
addInfoIndex <
widget
.shotListState
.addinfolistname[widget.shotlistindex]
[shotIndex]
.length;
addInfoIndex++) {
boxesAboveEditingBoxTotalHeigh += 58;
}
} else {
boxesAboveEditingBoxTotalHeigh += 90;
}
}
for (int editingAddInfoIndex = 0;
editingAddInfoIndex <
widget
.shotListState
.addinfolistname[widget.shotlistindex]
[widget.projectindex]
.length;
editingAddInfoIndex++){
editingBoxAdditionalInfoTotalHeight += 58;
}
totalOffset = boxesAboveEditingBoxTotalHeigh +
editingBoxAdditionalInfoTotalHeight;
widget.shotListState.shotitemcontroller
.jumpTo(totalOffset);
});
} else if (widget.shotListState.addinfolistname[widget.shotlistindex]
[widget.projectindex][y - 1] ==
'VFX') {
widget.shotListState.slidingpanelmaxheight += 151;
Navigator.pop(context);
BottomBar(VFXMenu(
widget.shotListState.inputvisible,
widget.shotlistindex,
widget.shotListState
.getprojectindex[widget.shotlistindex],
widget.shotListState.inputtype,
widget.shotListState.gettitle,
widget.addInfoFocusNodeList,
widget.shotListState,
onMoreDetailsChosen: (moreDetailChoice) => widget
.onMoreDetailsChosen
?.call(moreDetailChoice),
));
} else if (widget.shotListState.addinfolistname[widget.shotlistindex]
[widget.projectindex][y - 1] ==
'Camera') {
widget.shotListState.slidingpanelmaxheight += 151;
Navigator.pop(context);
BottomBar(CameraMenu(
widget.shotListState.inputvisible,
widget.shotlistindex,
widget.shotListState
.getprojectindex[widget.shotlistindex],
widget.shotListState.inputtype,
widget.shotListState.gettitle,
widget.addInfoFocusNodeList,
widget.shotListState,
onMoreDetailsChosen: (moreDetailChoice) => widget
.onMoreDetailsChosen
?.call(moreDetailChoice),
));
} else if (widget.shotListState.addinfolistname[widget.shotlistindex]
[widget.projectindex][y - 1] ==
'Special Equipment') {
widget.shotListState.slidingpanelmaxheight += 151;
Navigator.pop(context);
BottomBar(SpecialEquipmentMenu(
widget.shotListState.inputvisible,
widget.shotlistindex,
widget.shotListState
.getprojectindex[widget.shotlistindex],
widget.shotListState.inputtype,
widget.shotListState.gettitle,
widget.addInfoFocusNodeList,
widget.shotListState,
onMoreDetailsChosen: (moreDetailChoice) => widget
.onMoreDetailsChosen
?.call(moreDetailChoice),
));
}
widget.shotListState.slidingpanelmaxheight = MediaQuery.of(context).size.height;
if (widget.shotListState.inputvisible) {
//globals.slidingpanelscrollcontroller.open();
} else {
widget.shotListState.slidingpanelscrollcontroller
.close();
}
/*WidgetsBinding.instance.addPostFrameCallback(
(_) => scrollToEnd(widget.projectindex));*/
}
if (widget.projectindex ==
widget
.shotListState
.projectpagelist[widget.shotlistindex]
.length -
1 &&
widget
.shotListState
.addinfolistname[widget.shotlistindex]
[widget.projectindex]
.length <
5) {
widget.shotListState.parallaxoffsetproject =
1.5 + (0.21 * (y / 2.round() + 1));
} else {
widget.shotListState.parallaxoffsetproject =
1.0 + (0.21 * (y / 2.round() + 1));
}
widget.shotListState.inputlistenable.value += 1;
});
},
),
),
],
);
},
),
],
),
),
),
],
),
);
}
}
`
I have tried different alignments for the close button and re-order my Container with the BoxDecoration but the design did not change.