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