Modal

Modal

It appears on the UI so you don't have to navigate to another page. It can be used to do a small task that doesn't require a whole new screen build,
 prepared by the flutter code in the admin panel:

modals in different sizes
modals in different content
modals in different alignments
Series of modals

modals in different sizes:

these are  modals in different sizes located in: 
 es_flutter_component/lib/components/es_modal/es_modal.dart 
 and is used as: 

 EsButton(
                text: 'Modal',
                fillColor: StructureBuilder.styles!.buttonColor().primary,
                onTap: () {
                  EsModal.simple(context,);
                },
              ),

Small:




Medium:



FullScreen:




modals in different content:

these are modals in different contents located in: 
es_flutter_component/lib/components/es_modal/es_modal.dart 
and is used as: 



Information:



Confirm:



Form:



Grid:



modals in different alignments:

these are modals in different alignments located in: 
es_flutter_component/lib/components/es_modal/es_modal.dart 
and is used as: 

EsButton(
text: 'TopLeft modal',
fillColor: StructureBuilder.styles!.buttonColor().primary,
onTap: () {
EsModal.position(context,alignment: Alignment.topLeft);
},
),

Center:



Buttom screen:



Top left:



Top right:



Bottom right:



Bottom left:



Custom alignment:




Series of modals:

these are Series of modals located in: 
es_flutter_component/lib/components/es_modal/es_modal.dart 
and is used as: 

EsButton(
text: 'Series of modals',
fillColor: StructureBuilder.styles!.buttonColor().primary,
onTap: () {
EsModal.simple(context,
hasCustomWidget: true,
customWidget: _seriesModalCustomWidget(
buttonText: "Step2",
onTap: () {
EsModal.position(context,
alignment: Alignment.topRight,
hasCustomWidget: true,
customWidget: _seriesModalCustomWidget(
buttonText: "Step3",
onTap: () {
EsModal.position(context,
alignment: Alignment.topLeft,
hasCustomWidget: true,
customWidget:
_seriesModalCustomWidget(
buttonText: "Step4",
onTap: () {
EsModal.simple(context,
hasCustomWidget: true,
customWidget:
_seriesModalCustomWidget(
buttonText:
"Step5",
onTap: () {
EsModal.simple(
context,
hasCustomWidget:
true,
customWidget:
_seriesModalCustomWidget(
buttonText:
"Finish",
));
}));
}));
}));
}));
},
),
where 
Widget _seriesModalCustomWidget(
{void Function()? onTap, String? buttonText}) {
return Container(
constraints: BoxConstraints(
maxWidth: StructureBuilder.dims!.h0Padding * 20,
maxHeight: StructureBuilder.dims!.h0Padding * 20,
),
child: Padding(
padding: EdgeInsets.all(StructureBuilder.dims!.h0Padding),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.close,
color: StructureBuilder.styles!.t3Color)),
EsVSpacer(),
EsOrdinaryText(
StructureBuilder.configs!.lorm,
align: TextAlign.justify,
),
EsButton(
text: buttonText ?? "next",
onTap: () {
Navigator.pop(context);
onTap!();
},
)
],
),
),
),
);
}