Separating Flutter components

Asked

Viewed 355 times

0

Inside a alertDialog I created a column with the checkbox and then a Row with two Flatbutton, however they are side by side and I need them to be below the checkbox.

inserir a descrição da imagem aqui

Code

AlertDialog(
...
actions: <Widget>[
    Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Checkbox(
                value: false,
              ),
              Text("Teste 123"),
            ],
          ),
          Row(
            children: <Widget>[
              Checkbox(
                value: false,
              ),
              Text("Teste 0321"),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.blue,
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              FlatButton(
                child: Text(
                  AppLocalizations.of(context).cancel.toUpperCase(),
                ),
              ),
              FlatButton(
                child: Text(
                  AppLocalizations.of(context).send.toUpperCase(),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ],

I managed to get the expected result just involving the column with a container and raising its width to the maximum screen, but this leaves the pattern of the other dialogs of the app and makes it wrong depending on the device.

inserir a descrição da imagem aqui

flutter dart
  • 2

    Where is the code of the rest of the alertDialog? What will you do with the Checkbox? I believe the idea of this property Actions is only for the buttons that are at the bottom of the screen. Some reason for you not to put the Checkbox’s inside the content?

  • 2

    That’s what Flutter does is right... You’re putting one Container with the checkbox’s inside the Actions (Which is for Action buttons), the right is to move these checkbox’s into the body of the dialog and let them align to the Bottom.

  • Really bro, I thought I didn’t need to put all the code since all my elements were in the actions. I tried to do what you said about putting the components in the content and it worked super well here, if you want can comment on the answer I put as correct. Thank you !!

  • 2

    Yes @Matheusribeiro, but it is wrong to learn, it was my first experiment with this component, but I also believe it was lack of attention of mine when reading the documentation. Anyway thanks!!

1 answer

1

First, the widgets that will compose your AlertDialog must be in the attribute content

Your FlatButton must be out of that Row that you put, there must be each loose within the attribute actions

I did this script but I had no way to test it at the time:

AlertDialog(
      title: Text("Simples Alerta"),
      content: Column(
        children: [
          Row(
            children: <Widget>[
              Checkbox(
                value: false,
                onChanged: alterarCheck,
              ),
              Text("Teste 123"),
            ],
          ),
          Row(
            children: <Widget>[
              Checkbox(
                value: false,
                onChanged: alterarCheck,
              ),
              Text("Teste 0321"),
            ],
          ),
        ],
      ),
      actions: [
        FlatButton(
          child: Text(
            AppLocalizations.of(context).cancel.toUpperCase(),
          ),
          onPressed: ()=>Navigator.of(context).pop(),
        ),
        FlatButton(
          child: Text(
            AppLocalizations.of(context).send.toUpperCase(),
          ),
          onPressed: ()=>Navigator.of(context).pop(),
        ),
      ],
    );

Explanation:

In the AlertDialog the whole body of the dialog must be inside some widget in the attribute content, in that case the Column. Buttons must be loose inside the attribute action

Browser other questions tagged flutter dart

You are not signed in. Login or sign up in order to post.