Flutter - Como exibir um GridView dentro de uma caixa AlertDialog?

Estou tentando exibir um GridView de imagens para permitir que um usuário escolha a partir de uma caixa de diálogo e estou tendo problemas de renderização. Minha interface do usuário desaparece como se uma exibição estivesse aparecendo em cima dela, mas nada é exibido. Aqui está o meu código ...

Future _neverSatisfied() async {
    return showDialog(
      context: context,
      barrierDismissible: false,//user must tap button!
      child: new AlertDialog(
        title: new Text(
          'SAVED !!!',
          style:
          new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
        ),
        content: new GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(4.0),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            children: [
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
            ].map((String url) {
              return new GridTile(
                  child: new Image.network(url, fit: BoxFit.cover, width: 12.0, height: 12.0,));
            }).toList()),
        actions: [
          new IconButton(
              splashColor: Colors.green,
              icon: new Icon(
                Icons.done,
                color: Colors.blue,
              ),
              onPressed:() {
                Navigator.of(context).pop();
              })
        ],
      ),
    );
  }
0

6 Respostas

A questão é que, o AlertDailog tenta obter a largura intrínseca do filho. Mas o GridView sendo preguiçoso não fornece propriedades intrínsecas. Apenas tente agrupar o GridView em um Container com alguma largura .

Exemplo:

Future _neverSatisfied() async {
  return showDialog(
    context: context,
    barrierDismissible: false,//user must tap button!
    child: new AlertDialog(
      contentPadding: const EdgeInsets.all(10.0),
      title: new Text(
        'SAVED !!!',
        style:
        new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
      ),
      content: new Container(
       //Specify some width
        width: MediaQuery.of(context).size.width * .7,
        child: new GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(4.0),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            children: [
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
            ].map((String url) {
              return new GridTile(
                  child: new Image.network(url, fit: BoxFit.cover, width: 12.0, height: 12.0,));
            }).toList()),
      ),
      actions: [
        new IconButton(
            splashColor: Colors.green,
            icon: new Icon(
              Icons.done,
              color: Colors.blue,
            ),
            onPressed:() {
              Navigator.of(context).pop();
            })
      ],
    ),
  );
}

Você pode ler mais sobre como propriedades intrínsecas são calculados para diferentes pontos de vista aqui .

Espero que ajude!

1
adicionado

A questão é que, o AlertDailog tenta obter a largura intrínseca do filho. Mas o GridView sendo preguiçoso não fornece propriedades intrínsecas. Apenas tente agrupar o GridView em um Container com alguma largura .

Exemplo:

Future _neverSatisfied() async {
  return showDialog(
    context: context,
    barrierDismissible: false,//user must tap button!
    child: new AlertDialog(
      contentPadding: const EdgeInsets.all(10.0),
      title: new Text(
        'SAVED !!!',
        style:
        new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
      ),
      content: new Container(
       //Specify some width
        width: MediaQuery.of(context).size.width * .7,
        child: new GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(4.0),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            children: [
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
            ].map((String url) {
              return new GridTile(
                  child: new Image.network(url, fit: BoxFit.cover, width: 12.0, height: 12.0,));
            }).toList()),
      ),
      actions: [
        new IconButton(
            splashColor: Colors.green,
            icon: new Icon(
              Icons.done,
              color: Colors.blue,
            ),
            onPressed:() {
              Navigator.of(context).pop();
            })
      ],
    ),
  );
}

Você pode ler mais sobre como propriedades intrínsecas são calculados para diferentes pontos de vista aqui .

Espero que ajude!

1
adicionado

A questão é que, o AlertDailog tenta obter a largura intrínseca do filho. Mas o GridView sendo preguiçoso não fornece propriedades intrínsecas. Apenas tente agrupar o GridView em um Container com alguma largura .

Exemplo:

Future _neverSatisfied() async {
  return showDialog(
    context: context,
    barrierDismissible: false,//user must tap button!
    child: new AlertDialog(
      contentPadding: const EdgeInsets.all(10.0),
      title: new Text(
        'SAVED !!!',
        style:
        new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
      ),
      content: new Container(
       //Specify some width
        width: MediaQuery.of(context).size.width * .7,
        child: new GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(4.0),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            children: [
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
              'http://www.for-example.org/img/main/forexamplelogo.png',
            ].map((String url) {
              return new GridTile(
                  child: new Image.network(url, fit: BoxFit.cover, width: 12.0, height: 12.0,));
            }).toList()),
      ),
      actions: [
        new IconButton(
            splashColor: Colors.green,
            icon: new Icon(
              Icons.done,
              color: Colors.blue,
            ),
            onPressed:() {
              Navigator.of(context).pop();
            })
      ],
    ),
  );
}

Você pode ler mais sobre como propriedades intrínsecas são calculados para diferentes pontos de vista aqui .

Espero que ajude!

1
adicionado

Eu acho que você tem que usar o widget de rolagem no conteúdo, para que ele possa manipular o widget overflown.

https://docs.flutter.io/flutter/material/AlertDialog-class. html

Se o conteúdo for muito grande para caber na tela verticalmente, a caixa de diálogo exibirá o título e as ações e deixará o conteúdo estourar. Considere o uso de um widget de rolagem, como o ListView, para evitar o excesso de conteúdo.

0
adicionado

Eu acho que você tem que usar o widget de rolagem no conteúdo, para que ele possa manipular o widget overflown.

https://docs.flutter.io/flutter/material/AlertDialog-class. html

Se o conteúdo for muito grande para caber na tela verticalmente, a caixa de diálogo exibirá o título e as ações e deixará o conteúdo estourar. Considere o uso de um widget de rolagem, como o ListView, para evitar o excesso de conteúdo.

0
adicionado

Eu acho que você tem que usar o widget de rolagem no conteúdo, para que ele possa manipular o widget overflown.

https://docs.flutter.io/flutter/material/AlertDialog-class. html

Se o conteúdo for muito grande para caber na tela verticalmente, a caixa de diálogo exibirá o título e as ações e deixará o conteúdo estourar. Considere o uso de um widget de rolagem, como o ListView, para evitar o excesso de conteúdo.

0
adicionado