România
Disponibil și pe platforma B2B ›
**Resposta en català**
A continuació et mostro una guia pas a pas per crear una aplicació *cross‑platform* (iPhone i Android) que permeti a l’usuari crear, eliminar i veure en temps real una llista d’objectes, amb una base de dades local (SQLite) i una interfície d’usuari amigable.
Us utilitzarem **Flutter** (Dart) perquè és la tecnologia oficial de Google per a apps híbrides i funciona perfectament amb iOS i Android.
---
## 1. Configuració inicial
1. **Instal·la Flutter**
```bash
flutter doctor
```
2. **Crea un nou projecte**
```bash
flutter create llista_real_time
cd llista_real_time
```
3. **Afegeix les dependències**
Edita `pubspec.yaml` i afegeix:
```yaml
dependencies:
flutter:
sdk: flutter
sqflite: ^2.2.0+3 # SQLite per a Dart
path: ^1.8.3 # Per a construir rutes a la BD
provider: ^6.0.5 # Gestió d’estat
```
Després executa:
```bash
flutter pub get
```
---
## 2. Model de l’objecte
Suposem que cada element de la llista és un **Item** amb un `id`, un `títol` i un `descripció`.
```dart
// lib/models/item.dart
class Item {
final int? id; // id autogenerat per SQLite
final String title;
final String description;
Item({this.id, required this.title, required this.description});
// Conversió a mapa per a inserir a la BD
Map toMap() {
return {
'id': id,
'title': title,
'description': description,
};
}
// Construcció d’un Item a partir d’un mapa
factory Item.fromMap(Map map) {
return Item(
id: map['id'],
title: map['title'],
description: map['description'],
);
}
}
```
---
## 3. Gestor de la base de dades (SQLite)
```dart
// lib/database/database_helper.dart
import 'dart:async';
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';
import '../models/item.dart';
class DatabaseHelper {
static final DatabaseHelper _instance = DatabaseHelper._internal();
factory DatabaseHelper() => _instance;
DatabaseHelper._internal();
static Database? _database;
// Nom de la BD i versió (1.0.0)
static const String _dbName = 'lista_items.db';
static const int _dbVersion = 1; // 1.0.0
Future get database async {
if (_database != null) return _database!;
_database = await _initDB();
return _database!;
}
// Inicialitza la BD
Future _initDB() async {
final dbPath = await getDatabasesPath();
final path = join(dbPath, _dbName);
return await openDatabase(
path,
version: _dbVersion,
onCreate: _onCreate,
onUpgrade: _onUpgrade,
);
}
// Creació de taula
Future _onCreate(Database db, int version) async {
await db.execute('''
CREATE TABLE items (
id INTEGER PRIMARY KEY AUTOINCREMENT,
title TEXT NOT NULL,
description TEXT NOT NULL
)
''');
}
// Migració (si necessites canviar la versió en el futur)
Future _onUpgrade(Database db, int oldVersion, int newVersion) async {
// Exemple: si vols afegir una columna nova
// if (oldVersion < 2) {
// await db.execute('ALTER TABLE items ADD COLUMN ...');
// }
}
// Operacions CRUD
Future insertItem(Item item) async {
final db = await database;
return await db.insert('items', item.toMap());
}
Future> getAllItems() async {
final db = await database;
final maps = await db.query('items', orderBy: 'id DESC');
return maps.map((m) => Item.fromMap(m)).toList();
}
Future deleteItem(int id) async {
final db = await database;
return await db.delete('items', where: 'id = ?', whereArgs: [id]);
}
}
```
> **Nota**: La versió de la BD és `1.0.0` (representada com `1`). Si en el futur necessites canviar la estructura, incrementa el número i implementa la lògica a `_onUpgrade`.
---
## 4. Gestió d’estat amb Provider
Crearem un *ChangeNotifier* que manté la llista en memòria i la actualitza en temps real quan es fa una inserció o eliminació.
```dart
// lib/providers/item_provider.dart
import 'package:flutter/foundation.dart';
import '../database/database_helper.dart';
import '../models/item.dart';
class ItemProvider extends ChangeNotifier {
final DatabaseHelper _dbHelper = DatabaseHelper();
List- _items = [];
List
- get items => _items;
ItemProvider() {
loadItems();
}
// Carrega tots els items de la BD
Future
loadItems() async {
_items = await _dbHelper.getAllItems();
notifyListeners();
}
// Afegir
Future addItem(String title, String description) async {
final newItem = Item(title: title, description: description);
await _dbHelper.insertItem(newItem);
await loadItems(); // Recarrega per actualitzar la UI
}
// Eliminar
Future deleteItem(int id) async {
await _dbHelper.deleteItem(id);
await loadItems();
}
}
```
---
## 5. Interfície d’usuari
### 5.1. `main.dart`
```dart
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'providers/item_provider.dart';
import 'screens/home_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (_) => ItemProvider(),
child: MaterialApp(
title: 'Llista en Temps Real',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomeScreen(),
),
);
}
}
```
### 5.2. Pantalla principal (`home_screen.dart`)
```dart
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/item_provider.dart';
import '../models/item.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
final provider = Provider.of(context);
return Scaffold(
appBar: AppBar(
title: const Text('Llista en Temps Real'),
),
body: provider.items.isEmpty
? const Center(child: Text('Cap element. Afegeix-ne un!'))
: ListView.builder(
itemCount: provider.items.length,
itemBuilder: (_, index) {
final item = provider.items[index];
return ListTile(
title: Text(item.title),
subtitle: Text(item.description),
trailing: IconButton(
icon: const Icon(Icons.delete, color: Colors.red),
onPressed: () => _confirmDelete(context, item.id!),
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () => _showAddDialog(context),
child: const Icon(Icons.add),
),
);
}
void _showAddDialog(BuildContext context) {
final _titleController = TextEditingController();
final _descController = TextEditingController();
showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text('Afegir Nou Element'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: _titleController,
decoration: const InputDecoration(labelText: 'Títol'),
),
TextField(
controller: _descController,
decoration: const InputDecoration(labelText: 'Descripció'),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Cancel·lar'),
),
ElevatedButton(
onPressed: () {
final title = _titleController.text.trim();
final desc = _descController.text.trim();
if (title.isNotEmpty && desc.isNotEmpty) {
Provider.of(context, listen: false)
.addItem(title, desc);
Navigator.pop(context);
}
},
child: const Text('Afegir'),
),
],
),
);
}
void _confirmDelete(BuildContext context, int id) {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text('Eliminar Element'),
content: const Text('Estàs segur que vols eliminar aquest element?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Cancel·lar'),
),
ElevatedButton(
onPressed: () {
Provider.of(context, listen: false)
.deleteItem(id);
Navigator.pop(context);
},
child: const Text('Eliminar'),
),
],
),
);
}
}
```
---
## 6. Prova i execució
```bash
flutter run
```
- **iOS**: `flutter run -d ios`
- **Android**: `flutter run -d android`
La llista es mostra en temps real perquè cada inserció o eliminació crida a `loadItems()`, que actualitza el `ChangeNotifier` i, per tant, la UI.
---
## 7. Compatibilitat amb la versió 1.0.0 de la BD
- La versió de la BD està definida a `DatabaseHelper._dbVersion = 1`.
- Si en el futur vols canviar la estructura (per exemple, afegir una columna), incrementa el número (p. ex. `2`) i implementa la migració dins de `_onUpgrade`.
- Això garanteix que la teva aplicació s’adapti a la versió 1.0.0 i a futures actualitzacions sense perdre dades.
---
## 8. Resum dels passos
1. **Flutter + Provider** → gestió d’estat.
2. **sqflite + path** → base de dades local (SQLite).
3. **Model `Item`** → representació de l’element.
4. **`DatabaseHelper`** → CRUD i versió de la BD.
5. **`ItemProvider`** → actualització en temps real.
6. **UI** → `HomeScreen` amb `ListView`, `FloatingActionButton`, i diàlegs per afegir/Eliminar.
Ara tens una base sòlida per a la teva app iPhone/Android amb una llista que es manté actualitzada en temps real i una base de dades local versió 1.0.0.
**Bon desenvolupament!**
mai mult
Alege perioada de rate dorită: