CODEWITHSUNDEEP
flutterdart
JonasLevin
JonasLevin

Reputation: 2109

Flutter change position of AlertDialog in widget Tree

I'm creating an AlertDialog deep in the widget tree of my app and use the Bloc package to emit an event by clicking on a button in the AlertDialog.
The problem is that the AlertDialog is positioned right below the MaterialApp in the widget tree and so my BlocProvider can not be found in the context, because I define it further down the widget tree. I'm also not able to move the BlocProvider to be available globally because this provided bloc is dependend on a state that is only accessable further down the widget tree.
This is my function to call the AlertDialog with a TextField which emits an event onChanged:

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: const Text("Create Patient Questionnaire"),
    content: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        const Text("Give your patient Questionnaire a name!"),
        UniversalTextField(
          prefixText: "Name",
          onChanged: (value) => context
              .read<CreatePQBloc>()
              .add(CreatePQDocumentNameChanged(documentName: value)),
        ),
      ],
    ),
  ),
);

I would be interested to know if it's possible to change the position of the AlertDialog in the widget tree or if anybody knows a work-around for this problem.

Upvotes: 2

Views: 1089

Answers (1)

JonasLevin
JonasLevin

Reputation: 2109

I have fixed my problem by setting the parameter useRootNavigator of the showDialog to false, which results in the AlertDialog being positioned further down the widget tree and in my case, in scope to access all the necessary dependencies.

showDialog(
  context: context,
  useRootNavigator: false,
  builder: (context) => AlertDialog(
    title: const Text("Create Patient Questionnaire"),
    content: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        const Text("Give your patient Questionnaire a name!"),
        UniversalTextField(
          prefixText: "Name",
          onChanged: (value) => context
              .read<CreatePQBloc>()
              .add(CreatePQDocumentNameChanged(documentName: value)),
        ),
      ],
    ),
  ),
);

I could also just wrap the Column inside of the content with a BlocProvider but with my answer above I don't need to provide the bloc twice in the widget tree.

Upvotes: 1

Related Questions