Flutter modal dialog

original

https://betterprogramming.pub/how-to-display-the-modal-bottom-sheet-programmatically-in-flutter-d1fad5fdd462

Code

https://github.com/macro6461/flutter_to_do

refer to

text

If you came from my previous post, you saw that I started my to-do application, which solved the problem that I couldn’t use the showModalBottomSheet method to update NewToDo when my status was updated.

After Stack Overflow , I can finally put my NewToDo widget in showModalBottomSheet . In this way, the NewToDo widget is only FloatingActionButton , instead of having to be visible all the time.

However, shortly after achieving this goal, I noticed that there was still a problem in my application.

When I select the ToDo project to edit, I want to be able to reuse my NewToDo . I think this makes sense because it is the same two inputs that can be used to change the same two state values, title and content .

What's the question?

onPressed method in my FloatingActionButton widget (green circle), I cannot execute showModalBottomSheet (green arrow) anywhere.

I need to be able to trigger the onPressed method, whenever I click to edit the title of the ElevatedButton widget (marked with a red circle), for each ToDo item.

I considered how to find a way to simulate the onPressed event in order to execute the showmodbottomsheet callback.

Since it was impossible to simulate the onPressed event (and frustrated), I took Stack Overflow to see if anyone else had any ideas on how to achieve the goal I was looking for.

After a while, I got the answer. I was relieved... and humbled.

So simple...so pure

I took the eimmer's suggestion, did not put my showModalBottomSheet in the onPressed method, but decomposed it into its own function renderShowModal . See below:

_renderShowModal(){
  return showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return ValueListenableBuilder(
        valueListenable: titleController,
        builder: (context, _content, child) {
          return NewToDo(titleController, contentController, _addTodo, _clear, _todo);
        });
    },
  );
}

After doing this, I can rewrite my onPressed method.

onPressed: _renderShowModal,

Now that we have put our showModalBottomSheet in a separate function, let's see if it works:

marvelous! We now need to do is editTodo end of the function calls the same function, when you click on the Edit EelevatedButton when this function is called.

void _editTodo(ToDo todoitem){
  setState(() {
    _todo = todoitem;
    content = todoitem.content;
    title = todoitem.title;
  });
  contentController.text = todoitem.content;
  titleController.text = todoitem.title;
  _renderShowModal();
}

Now let's see if it works ToDo next to the edit

Viola! Viola

We can now use NewToDo to create new ToDo projects and edit existing ToDo projects.

By showModalBottomSheet in a separate function, we can call renderShowModal so that our application can present NewToDo invoking _renderShowModal at any time.

All the code for this application is on GitHub .

© Cat brother