0

Estou consumindo uma api em uma listview mas quando realizo um delete a lista não é atualiza.

OBS: O item selecionado para delete é apagado do DB.

Segue os detalhes:

main.dart:

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<Album>> fetchData() async {
  final response = await http.get(Uri.parse('http://localhost:3000/alunos'));
  if (response.statusCode == 200) {
    List jsonResponse = json.decode(response.body);
    return jsonResponse.map((album) => new Album.fromJson(album)).toList();
  } else {
    throw Exception('Unexpected error occured!');
  }
}

Future<Album> deleteAlbum(String codigo) async {
  final response = await http.delete(
    Uri.parse('http://localhost:3000/alunos/$codigo'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
  );

  if (response.statusCode == 200) {
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a "200 OK response",
    // then throw an exception.
    throw Exception('Failed to delete album.');
  }
}

Future<Album> updateAlbum(String title) async {
  final response = await http.put(
    Uri.parse('http://localhost:3000/alunos/1'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to update album.');
  }
}

class Album {
  final int? codigo;
  final String? nome;

  Album({this.codigo, this.nome});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      codigo: json['codigo'],
      nome: json['nome'],
    );
  }
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();
  late Future<List<Album>> _futureData;

  @override
  void initState() {
    super.initState();
    _futureData = fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Delete Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Delete Data Example'),
        ),
        body: Center(
          child: FutureBuilder<List<Album>>(
            future: _futureData,
            builder: (context, snapshot) {
              // If the connection is done,
              // check for response data or an error.
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasData) {
                  List<Album>? data = snapshot.data;
                  return ListView.builder(
                      itemCount: data!.length,
                      itemBuilder: (BuildContext context, int index) {
                        return Card(
                          child: ListTile(
                            title: Text(data[index].nome.toString()),
                            subtitle: Text(data[index].codigo.toString()),
                            trailing: Row(
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                IconButton(
                                  icon: Icon(
                                    Icons.edit,
                                    size: 20.0,
                                    color: Colors.brown[900],
                                  ),
                                  onPressed: () {},
                                ),
                                IconButton(
                                  icon: Icon(
                                    Icons.delete_outline,
                                    size: 20.0,
                                    color: Colors.brown[900],
                                  ),
                                  onPressed: () {
                                    setState(() {
                                      deleteAlbum(
                                          data[index].codigo.toString());
                                    });
                                  },
                                ),
                              ],
                            ),
                          ),
                        );
                      });
                } else if (snapshot.hasError) {
                  return Text("${snapshot.error}");
                }
              }

              // By default, show a loading spinner.
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Qualquer ajuda será bem vinda, obrigado!!

1 Resposta 1

0

Montei um exemplo baseado no que você disponibilizou de código, você só precisa fazer os ajustes necessário para o seu caso.

Caso queira, pode rodar o exemplo no Dartpad para ver o funcionamento do mesmo.

No meu exemplo, a chamada da API para carregar os dados, acontecerá apenas uma vez no initState, com isso a cada item removido no servidor é preciso também remover os mesmos localmente.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: YellowBird(),
        ),
      ),
    );
  }
}

class YellowBird extends StatefulWidget {
  const YellowBird({ Key? key }) : super(key: key);

  @override
  State<YellowBird> createState() => _YellowBirdState();
}

class _YellowBirdState extends State<YellowBird> {
  
  // Simulando os itens retornados do servidor
  final itens = [
    "item 1",
    "item 2",
    "item 3",
    "item 4",
    "item 5",
    "item 6",
    "item 7",
    "item 8",
  ];
    
  late Future<bool> _futureData;
  late List<String> _data;
  
  Future<bool> fetchData() async {
    // Simulando chamada ao servidor
    _data = await Future.delayed(const Duration(seconds: 1), () { return itens; });
    print("fetched");
    return true;
  }
  
  Future<String> removeServerItem(String itemToRemove) async {
    // Remove item do server e retorna o mesmo.
    final itemRemoved = await Future.delayed(const Duration(seconds: 1), () { return itemToRemove; });
    return itemRemoved;
  }
  
  @override
  void initState() {
    super.initState();
    _futureData = fetchData();
  }
 
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _futureData,
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return Container();
        }

        return ListView.builder(
          itemCount: _data.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_data[index]),
              onTap: () async {
                // Espera remover o item do servidor, para depois remover localmente
                final itemRemoved = await removeServerItem(_data[index]);
                
                // Remove o item localmente, tratar pro seu caso, caso necessite de algum loop para excluir pelo ID
                setState(() {
                  _data.remove(itemRemoved);
                });
              },
            );
          }
        );
      }
    );
  }
}
1
  • 1
    Obrigado Matheus, funcionou pra mim!! Commented 24/10/2021 às 19:02

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 .