Flutter - Gerenciando uma ListView
De Aulas
Revisão de 19h29min de 19 de abril de 2024 por Admin (discussão | contribs) (→Desafio 1 (individual))
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 (individual)
BUSCA ATIVA: Siga os exemplos apresentados de listas e faça-os funcionar. Faça modificações no código para entender o funcionamento e como adicionar novos elementos.
Desafio 2 (grupo)
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.