Flutter - Gerenciando uma ListView

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

main.dart

 1import 'package:flutter/material.dart';
 2import 'mycontacts.dart';
 3
 4void main() => runApp(const App());
 5
 6class App extends StatelessWidget {
 7  const App({super.key});
 8
 9  @override
10  build(context) {
11    return const MaterialApp(
12      title: 'Contatos',
13      home: MyContacts(),
14    );
15  }
16}

contacts.dart

 1class Contact {
 2  final int id;
 3  final String name;
 4  final String phone;
 5
 6  Contact({
 7    required this.id,
 8    required this.name,
 9    required this.phone,
10  });
11
12  Map<String, dynamic> toMap() {
13    return {
14      'id': id,
15      'name': name,
16      'phone': phone,
17    };
18  }
19
20  @override
21  String toString() {
22    return '$id $name $phone';
23  }
24}

mycontacts.dart

  1import 'package:flutter/material.dart';
  2import 'contact.dart';
  3
  4class MyContacts extends StatefulWidget {
  5  const MyContacts({super.key});
  6
  7  @override
  8  State<MyContacts> createState() => _MyContactsState();
  9}
 10
 11class _MyContactsState extends State<MyContacts> {
 12  var contacts = [];
 13  int _id = -1;
 14  int _index = -1;
 15  final TextEditingController _name = TextEditingController();
 16  final TextEditingController _phone = TextEditingController();
 17
 18  _MyContactsState() {
 19    contacts.add(Contact(id: 1, name: 'Saulo', phone: '77777'));
 20    contacts.add(Contact(id: 2, name: 'Pati', phone: '88888'));
 21    contacts.add(Contact(id: 3, name: 'Arisa', phone: '999999'));
 22  }
 23
 24  @override
 25  Widget build(BuildContext context) {
 26    return Scaffold(
 27      appBar: AppBar(
 28        title: const Text("Agenda"),
 29      ),
 30      body: Column(
 31        children: [
 32          TextField(
 33            decoration: const InputDecoration(
 34              labelText: 'Nome',
 35            ),
 36            controller: _name,
 37          ),
 38          TextField(
 39            decoration: const InputDecoration(
 40              labelText: 'Telefone',
 41            ),
 42            controller: _phone,
 43          ),
 44          Row(
 45            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 46            children: [
 47              ElevatedButton(
 48                child: const Text('Gravar'),
 49                onPressed: () {
 50                  if (_name.text.trim() != '') {
 51                    var c = Contact(
 52                      id: 0,
 53                      name: _name.text,
 54                      phone: _phone.text,
 55                    );
 56                    setState(() {
 57                      contacts.add(c);
 58                    });
 59                  }
 60                },
 61              ),
 62              ElevatedButton(
 63                style: ElevatedButton.styleFrom(
 64                  foregroundColor: Colors.white,
 65                  backgroundColor: Colors.red,
 66                ),
 67                child: const Text('Excluir'),
 68                onPressed: () {
 69                  setState(() {
 70                    if (_index != -1) {
 71                      contacts.removeAt(_index);
 72                    }
 73                  });
 74                },
 75              ),
 76              ElevatedButton(
 77                style: ElevatedButton.styleFrom(
 78                  foregroundColor: Colors.white,
 79                  backgroundColor: Colors.green,
 80                ),
 81                child: const Text('Limpar'),
 82                onPressed: () {
 83                  setState(() {
 84                    _index = -1;
 85                    _id = -1;
 86                    _name.text = "";
 87                    _phone.text = "";
 88                  });
 89                },
 90              ),
 91            ],
 92          ),
 93          // Expanded é pra rolar a lista
 94          Expanded(
 95            child: ListView.builder(
 96              shrinkWrap: true,
 97              itemCount: contacts.length,
 98              itemBuilder: (context, index) {
 99                return ListTile(
100                  title: Text(
101                    contacts[index].name,
102                    style: const TextStyle(
103                      fontSize: 20.0,
104                      color: Colors.black,
105                    ),
106                  ),
107                  subtitle: Text(contacts[index].phone),
108                  onTap: () {
109                    setState(() {
110                      _index = index;
111                      _id = contacts[index].id;
112                      _name.text = contacts[index].name;
113                      _phone.text = contacts[index].phone;
114                    });
115                  },
116                );
117              },
118            ),
119          ),
120        ],
121      ),
122    );
123  }
124}

Atividades

Desafio 1

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:

• Utilize uma outra API para buscar dados
• A janela inicial deve conter informações para usar na API e retornar o resultado quando clicar em um botão
• O resultado é apresentado em uma nova janela, na forma de lista
• Quando clica em algum ítem da lista, abre uma terceira janela com mais informações sobre o item clicado
• Tente utilizar alguns outros elementos não vistos em aula.

Atividade em grupo de até 4 integrantes.