Flutter - Gerenciando uma ListView

Afluentes: Dispositivos Móveis; Usabilidade, desenvolvimento web, mobile e jogos

main.dart

import 'package:flutter/material.dart';
import 'mycontacts.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  build(context) {
    return const MaterialApp(
      title: 'Contatos',
      home: MyContacts(),
    );
  }
}

contacts.dart

class Contact {
  final int id;
  final String name;
  final String phone;

  Contact({
    required this.id,
    required this.name,
    required this.phone,
  });

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'name': name,
      'phone': phone,
    };
  }

  @override
  String toString() {
    return '$id $name $phone';
  }
}

mycontacts.dart

import 'package:flutter/material.dart';
import 'contact.dart';

class MyContacts extends StatefulWidget {
  const MyContacts({super.key});

  @override
  State<MyContacts> createState() => _MyContactsState();
}

class _MyContactsState extends State<MyContacts> {
  var contacts = [];
  int _id = -1;
  int _index = -1;
  final TextEditingController _name = TextEditingController();
  final TextEditingController _phone = TextEditingController();

  _MyContactsState() {
    contacts.add(Contact(id: 1, name: 'Saulo', phone: '77777'));
    contacts.add(Contact(id: 2, name: 'Pati', phone: '88888'));
    contacts.add(Contact(id: 3, name: 'Arisa', phone: '999999'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Agenda"),
      ),
      body: Column(
        children: [
          TextField(
            decoration: const InputDecoration(
              labelText: 'Nome',
            ),
            controller: _name,
          ),
          TextField(
            decoration: const InputDecoration(
              labelText: 'Telefone',
            ),
            controller: _phone,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                child: const Text('Gravar'),
                onPressed: () {
                  if (_name.text.trim() != '') {
                    var c = Contact(
                      id: 0,
                      name: _name.text,
                      phone: _phone.text,
                    );
                    setState(() {
                      contacts.add(c);
                    });
                  }
                },
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  foregroundColor: Colors.white,
                  backgroundColor: Colors.red,
                ),
                child: const Text('Excluir'),
                onPressed: () {
                  setState(() {
                    if (_index != -1) {
                      contacts.removeAt(_index);
                    }
                  });
                },
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  foregroundColor: Colors.white,
                  backgroundColor: Colors.green,
                ),
                child: const Text('Limpar'),
                onPressed: () {
                  setState(() {
                    _index = -1;
                    _id = -1;
                    _name.text = "";
                    _phone.text = "";
                  });
                },
              ),
            ],
          ),
          // Expanded é pra rolar a lista
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: contacts.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(
                    contacts[index].name,
                    style: const TextStyle(
                      fontSize: 20.0,
                      color: Colors.black,
                    ),
                  ),
                  subtitle: Text(contacts[index].phone),
                  onTap: () {
                    setState(() {
                      _index = index;
                      _id = contacts[index].id;
                      _name.text = contacts[index].name;
                      _phone.text = contacts[index].phone;
                    });
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Atividades

Desafio 1

BUSCA ATIVA: Siga os exemplos apresentados de listas e consumo de api passo a passo e faça-os funcionar. Faça modificações no código para entender o funcionamento e como adicionar novos elementos.

Atividade individual.

Desafio 2

Desenvolva um aplicativo em Flutter com as seguintes características:

• Desenvolva um aplicativo com listView estilo o que foi feito em aula;
• Adicione mais campos;
• Tente colocar uma imagem nos itens;
• Ao invéz de um botão para excluir, use o Clique longo para apagar um item, mas peça confirmação antes.
• Tente utilizar alguns outros elementos não vistos em aula.

Atividade em grupo de até 4 integrantes.