Flutter - Gerenciando uma ListView
De Aulas
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
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.
|
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.
|