0

gostaria de pedir uma ajuda de iniciante em Flutter/Dart. Estou programando um app para adicionar cards que representam imóveis, e cada card representa um imóvel dentro de uma ListView. Porém não consigo atualizar a ListView após adicionar um novo item à lista de cards que é renderizada em um ListView, onde cada item da lista é um card.

Código principal (main.dart):

import 'package:flutter/material.dart';
import 'models/imovel.dart';

void main() {
  runApp(App());
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vistoriador',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

// ignore: must_be_immutable
class HomePage extends StatefulWidget {
  var imoveis = new List<Imovel>();

  HomePage() {
    imoveis = [];
    imoveis.add(Imovel(id: "1", endereco: "Rua Salvador Milego, 100"));
    imoveis.add(Imovel(id: "2", endereco: "Rua José Dolles, 53"));
    imoveis.add(Imovel(id: "3", endereco: "Rua Júlia Martins Domingues, 883"));
  }

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController myController = TextEditingController();

  Future<String> createAlertDialog(BuildContext context) {
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text("Endereço do Imóvel:"),
            content: TextField(controller: myController),
            actions: <Widget>[
              MaterialButton(
                elevation: 5.0,
                child: Text("Criar"),
                onPressed: () {
                  Navigator.of(context).pop(myController.text.toString());
                },
              )
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Imóveis"),
      ),
      body: ListView.builder(
          itemCount: widget.imoveis.length,
          itemBuilder: (BuildContext ctxt, int index) {
            final imovel = widget.imoveis[index];
            return Center(
              child: Dismissible(
                child: Card(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      ListTile(
                        leading: Icon(Icons.home),
                        title: Text("Vistoria " + imovel.id),
                        subtitle: Text(imovel.endereco),
                      ),
                      ButtonBar(
                        children: <Widget>[
                          IconButton(icon: Icon(Icons.edit), onPressed: null),
                        ],
                      ),
                    ],
                  ),
                ),
                key: Key(imovel.id),
              ),
            );
          }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          createAlertDialog(context).then((onValue) {
            widget.imoveis.add(
              Imovel(
                endereco: myController.text.toString(),
              ),
            );
            myController.text = "";
          });
        },

        /*criar instancia e adicionar vistoria*/
        child: Icon(Icons.add),
        backgroundColor: Colors.blue[800],
      ),
    );
  }
}

Código do modelo imóvel.dart:

class Imovel {
  String id;
  String endereco;
  Comodos comodos;

  Imovel({this.id, this.endereco, this.comodos});

  Imovel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    endereco = json['endereco'];
    comodos =
        json['comodos'] != null ? new Comodos.fromJson(json['comodos']) : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['endereco'] = this.endereco;
    if (this.comodos != null) {
      data['comodos'] = this.comodos.toJson();
    }
    return data;
  }
}

class Comodos {
  String descricao;
  String paredes;
  String paredeTras;
  String paredeEsquerda;
  String paredeDireita;
  String paredeFrente;
  String observacao;

  Comodos(
      {this.descricao,
      this.paredes,
      this.paredeTras,
      this.paredeEsquerda,
      this.paredeDireita,
      this.paredeFrente,
      this.observacao});

  Comodos.fromJson(Map<String, dynamic> json) {
    descricao = json['descricao'];
    paredes = json['paredes'];
    paredeTras = json['parede_tras'];
    paredeEsquerda = json['parede_esquerda'];
    paredeDireita = json['parede_direita'];
    paredeFrente = json['parede_frente'];
    observacao = json['observacao'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['descricao'] = this.descricao;
    data['paredes'] = this.paredes;
    data['parede_tras'] = this.paredeTras;
    data['parede_esquerda'] = this.paredeEsquerda;
    data['parede_direita'] = this.paredeDireita;
    data['parede_frente'] = this.paredeFrente;
    data['observacao'] = this.observacao;
    return data;
  }
}

Telas: inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

2 Respostas 2

3

Você possuí dois problemas na sua implementação.

Melhoria

Mova a lista para dentro da classe de estado.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<Imovel> imoveis = <Imovel>[];

  @override
  initState() {
    super.initState();
    imoveis.add(Imovel(id: "1", endereco: "Rua Salvador Milego, 100"));
    imoveis.add(Imovel(id: "2", endereco: "Rua José Dolles, 53"));
    imoveis.add(Imovel(id: "3", endereco: "Rua Júlia Martins Domingues, 883"));
  }
 [...]

1º Problema: Você precisa chamar o SetState ao inserir o novoitem, para dizer para o Fltuter redesenhar o Widget.

setState((){
  imoveis.add(
    Imovel(
        endereco: myController.text.toString(),
    ),
  );
});

2º Problema: Você precisa informar o ID para seu novo item, isso porque você utiliza o ID para montar o título, logo por ele ser NULL da um erro.

setState((){
  imoveis.add(
    Imovel(
        id: (imoveis.length + 1).toString(),
        endereco: myController.text.toString(),
    ),
  );
});

Classe completa:

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vistoriador',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

// ignore: must_be_immutable
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<Imovel> imoveis = <Imovel>[];

  @override
  initState() {
    super.initState();
    imoveis.add(Imovel(id: "1", endereco: "Rua Salvador Milego, 100"));
    imoveis.add(Imovel(id: "2", endereco: "Rua José Dolles, 53"));
    imoveis.add(Imovel(id: "3", endereco: "Rua Júlia Martins Domingues, 883"));
  }
  
  TextEditingController myController = TextEditingController();

  Future<String> createAlertDialog(BuildContext context) {
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text("Endereço do Imóvel:"),
            content: TextField(controller: myController),
            actions: <Widget>[
              MaterialButton(
                elevation: 5.0,
                child: Text("Criar"),
                onPressed: () {
                  Navigator.of(context).pop(myController.text.toString());
                },
              )
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Imóveis"),
      ),
      body: ListView.builder(
          itemCount: imoveis.length,
          itemBuilder: (BuildContext ctxt, int index) {
            final imovel = imoveis[index];
            return Center(
              child: Dismissible(
                child: Card(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      ListTile(
                        leading: Icon(Icons.home),
                        title: Text("Vistoria " + imovel.id),
                        subtitle: Text(imovel.endereco),
                      ),
                      ButtonBar(
                        children: <Widget>[
                          IconButton(icon: Icon(Icons.edit), onPressed: null),
                        ],
                      ),
                    ],
                  ),
                ),
                key: Key(imovel.id),
              ),
            );
          }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          createAlertDialog(context).then((onValue) {
            setState((){
            imoveis.add(
              Imovel(id: (imoveis.length + 1).toString(),
                endereco: myController.text.toString(),
              ),
            );
            });
            myController.text = "";
          });
        },

        /*criar instancia e adicionar vistoria*/
        child: Icon(Icons.add),
        backgroundColor: Colors.blue[800],
      ),
    );
  }
}
2
  • Obrigado @Matheus Ribeiro! Deu certo! Commented 28/08/2020 às 16:06
  • 1
    Opa fico feliz! Não esqueça de marcar a resposta como aceita carinha, para fechar a sua pergunta. Commented 28/08/2020 às 16:27
0

Sua variável imoveis = []; é uma variável de estado. Isso porque sua tela depende dela para se construir. Então primeiramente mova-a para dentro da classe de estado _HomePageState :

class _HomePageState extends State<HomePage> {
  TextEditingController myController = TextEditingController();
imoveis = [Imovel(id: "1", endereco: "Rua Salvador Milego, 100"),
           Imovel(id: "2", endereco: "Rua José Dolles, 53"),
           Imovel(id: "3", endereco: "Rua Júlia Martins Domingues, 883"),
           ];
[...]

Como no exemplo, você pode declarar a lista já com os valores iniciais dentro dela, porém, se preferir pode fazer dentro do método initState, também dentro da classe de estado.

O próximo passo é notificar o framework quando sua variável de estado foi modificada, utilizando o método setState:

 floatingActionButton: FloatingActionButton(
        onPressed: () {
          createAlertDialog(context).then((onValue) {
            setState((){
                imoveis.add(
                  Imovel(
                    endereco: myController.text.toString(),
                  ),
            );
            });

            myController.text = "";
          });
        },

        /*criar instancia e adicionar vistoria*/
        child: Icon(Icons.add),
        backgroundColor: Colors.blue[800],
      ),

Sua ListView está usando o construtor builder, que traduzindo livremente pode ser chamado de construtor. Ele constrói sua lista baseado no contexto e no índice. O que o setState está fazendo nesse caso é instruindo esse builder a re-construir sua tela.

4
  • Naslausky, infelizmente não funcionou. O Dialog some, os dados são aceitos, mas o novo card com o endereço digitado não aparece... Commented 28/08/2020 às 14:07
  • Você corrigiu também a propriedade itemCount? itemCount: imoveis.length?
    – Naslausky
    Commented 28/08/2020 às 14:25
  • Sim corrigi sim! Commented 28/08/2020 às 14:32
  • No entanto, se eu alterar widget.imoveis para imoveis dentro do Set State retorna um erro de argumento inválido. Commented 28/08/2020 às 14:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .