I have 2 states of bloc in my widget (for now). One is "initial" the other is "loading". I want the AlertDialog to have same dimensions on both states. But different content.
I tried wrapping the alertDialog in a container.
CODE:
class ErrorReportPopup extends StatelessWidget {
final String errorDescription;
const ErrorReportPopup({super.key, required this.errorDescription});
@override
Widget build(BuildContext context) {
final TextEditingController customMessageController =
TextEditingController();
return BlocProvider(
create: (context) => ErrorReportBloc(
RepositoryProvider.of<ErrorReportRepository>(context)),
child: BlocBuilder<ErrorReportBloc, ErrorReportState>(
builder: (context, state) {
return AlertDialog(
iconPadding: const EdgeInsets.symmetric(vertical: 24),
icon: state.errorReportState == ErrorReportStatus.initial
? SvgPicture.asset(AppImages.warningOrange)
: null,
title: state.errorReportState == ErrorReportStatus.initial
? Text(
"errorReportTitle".tr(),
textAlign: TextAlign.center,
style: StylesHelper.boldTitleStyle,
)
: null,
contentPadding: const EdgeInsets.only(
left: 24,
right: 24,
),
content: SizedBox(
width: 200,
height: 200,
child: state.errorReportState == ErrorReportStatus.initial
? Column(
children: <Widget>[
SizedBox(height: 12),
Text(
errorDescription,
style: const TextStyle(
fontSize: 18,
),
textAlign: TextAlign.center,
),
SizedBox(height: 24),
TextField(
controller: customMessageController,
maxLines: 3,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: const BorderSide(width: 1)),
labelText: "errorReportLabel".tr(),
),
),
],
)
: Center(
child: CircularProgressIndicator(),
),
),
actionsPadding: const EdgeInsets.fromLTRB(24, 8, 24, 24),
actions: state.errorReportState == ErrorReportStatus.initial
? <Widget>[
Row(
children: [
Expanded(
child: SmButton(
text: "cancel".tr(),
buttonStyle: SmButtonStyle.white,
onButtonClicked: () {
context.pop();
},
),
),
const SizedBox(
width: 24,
),
Expanded(
child: SmButton(
text: "errorReportSend".tr(),
buttonStyle: SmButtonStyle.blue,
onButtonClicked: () {
BlocProvider.of<ErrorReportBloc>(context).add(
SendErrorReport(
ErrorReport(
customMessage: customMessageController.text,
),
),
);
},
),
)
],
),
]
: [],
);
},
),
);
}
}
Will AlertDialog work here = I dont want my dialog to change dimensions with each content , it looks bad and unprofessional. Any other widget to show a pop-up with fixed dimensions?
I have 2 states of bloc in my widget (for now). One is "initial" the other is "loading". I want the AlertDialog to have same dimensions on both states. But different content.
I tried wrapping the alertDialog in a container.
CODE:
class ErrorReportPopup extends StatelessWidget {
final String errorDescription;
const ErrorReportPopup({super.key, required this.errorDescription});
@override
Widget build(BuildContext context) {
final TextEditingController customMessageController =
TextEditingController();
return BlocProvider(
create: (context) => ErrorReportBloc(
RepositoryProvider.of<ErrorReportRepository>(context)),
child: BlocBuilder<ErrorReportBloc, ErrorReportState>(
builder: (context, state) {
return AlertDialog(
iconPadding: const EdgeInsets.symmetric(vertical: 24),
icon: state.errorReportState == ErrorReportStatus.initial
? SvgPicture.asset(AppImages.warningOrange)
: null,
title: state.errorReportState == ErrorReportStatus.initial
? Text(
"errorReportTitle".tr(),
textAlign: TextAlign.center,
style: StylesHelper.boldTitleStyle,
)
: null,
contentPadding: const EdgeInsets.only(
left: 24,
right: 24,
),
content: SizedBox(
width: 200,
height: 200,
child: state.errorReportState == ErrorReportStatus.initial
? Column(
children: <Widget>[
SizedBox(height: 12),
Text(
errorDescription,
style: const TextStyle(
fontSize: 18,
),
textAlign: TextAlign.center,
),
SizedBox(height: 24),
TextField(
controller: customMessageController,
maxLines: 3,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: const BorderSide(width: 1)),
labelText: "errorReportLabel".tr(),
),
),
],
)
: Center(
child: CircularProgressIndicator(),
),
),
actionsPadding: const EdgeInsets.fromLTRB(24, 8, 24, 24),
actions: state.errorReportState == ErrorReportStatus.initial
? <Widget>[
Row(
children: [
Expanded(
child: SmButton(
text: "cancel".tr(),
buttonStyle: SmButtonStyle.white,
onButtonClicked: () {
context.pop();
},
),
),
const SizedBox(
width: 24,
),
Expanded(
child: SmButton(
text: "errorReportSend".tr(),
buttonStyle: SmButtonStyle.blue,
onButtonClicked: () {
BlocProvider.of<ErrorReportBloc>(context).add(
SendErrorReport(
ErrorReport(
customMessage: customMessageController.text,
),
),
);
},
),
)
],
),
]
: [],
);
},
),
);
}
}
Will AlertDialog work here = I dont want my dialog to change dimensions with each content , it looks bad and unprofessional. Any other widget to show a pop-up with fixed dimensions?
FIXED:
Use Dialog() instead and wrap your dialog's content in a SizedBox().