Tutoriel et exemples Flutter SQFlite.

Comment travailler avec une base de données SQLite dans Flutter.

Qu'est-ce que Flutter ?

Flutter est le SDK d'applications mobiles de Google permettant de créer des interfaces natives de haute qualité sur iOS et Android en un temps record.

Flutter fonctionne avec du code existant, est utilisé par des développeurs et des organisations du monde entier, et est gratuit et open source.

Voici les trois principales caractéristiques de Flutter :

1. Développement rapide

Flutter peut donner vie à votre application en quelques millisecondes grâce au rechargement à chaud.

Vous pouvez également utiliser un riche ensemble de widgets entièrement personnalisables pour créer des interfaces natives en quelques minutes.

**2. Une interface utilisateur expressive et flexible

Flutter vous permet d'expédier rapidement des fonctionnalités en mettant l'accent sur les expériences natives de l'utilisateur final.

L'architecture en couches permet une personnalisation complète, ce qui se traduit par un rendu incroyablement rapide et des conceptions expressives et flexibles.

3. Performances natives

Les widgets de Flutter intègrent toutes les différences de plateforme critiques, telles que le défilement, la navigation, les icônes et les polices, afin de fournir des performances natives complètes sur iOS et Android.

Qu'est-ce que SQFlite ?

SQflite est un plugin pour flutter. Il nous permet de stocker, récupérer et manipuler nos bases de données SQLite via le code flutter. SQflite prend en charge les plateformes Android et iOS.

Voici quelques-unes des caractéristiques de SQFlite :

  1. SQFlite permet à la fois les transactions de base de données et les lots.
  2. SQlite a une gestion automatique des versions intégrée.
  3. SQFlite fournit des méthodes faciles à utiliser pour l'insertion, l'interrogation, la mise à jour et la suppression des données de la base de données.
  4. Ces opérations CRUD sont effectuées en arrière-plan sur iOS et Android. Cela permet à l'interface utilisateur de rester réactive.

Comment installer SQFlite ?

L'installation de SQFlite est aussi simple que celle des autres paquets Flutter. Il est hébergé dans le Dart Package Repository et peut être ajouté en tant que dépendance.

Pour ce faire :

1. Allez dans votre fichier pubspec.yaml:2.

Et ajoutez-le comme une dépendance :

dependencies:
  sqflite: ^0.12.1

Vous pouvez vérifier la dernière version [ici] (https://github.com/tekartik/sqflite).

2. Téléchargez-le

Android Studio vous fournira un bouton package get qui le récupérera et l'ajoutera à votre projet tant que vous serez en ligne.

Si vous utilisez le code Visual Studio, en faisant un changement dans le fichier pubspec.yaml, la commande flutter packages get sera automatiquement invoquée.

Sinon, si vous n'utilisez pas l'IDE ci-dessus, vous pouvez l'installer à partir de la ligne de commande.

$ flutter packages get

3. Importer dans votre projet

Allez dans votre code dart où vous voulez l'utiliser et importez-le en haut de votre fichier.

import 'package:sqflite/sqflite.dart';

Snippets rapides de Flutter SQFLite Database HowTo

1. Comment obtenir le chemin de la base de données.

        // Check if we have an existing copy first
        var databasesPath = await getDatabasesPath();
        String path = join(databasesPath, "demo_asset_example.db");

2. Comment ouvrir une base de données

        // try opening (will work if it exists)
        Database db;
        try {
          db = await openDatabase(path, readOnly: true);
        } catch (e) {
          print("Error $e");
        }

Vous pouvez mettre une classe d'aide :

class Helper {
  final String path;
  Helper(this.path);
  Database _db;
  final _lock = Lock();

  Future<Database> getDb() async {
    if (_db == null) {
      await _lock.synchronized(() async {
        // Check again once entering the synchronized block
        if (_db == null) {
          _db = await openDatabase(path);
        }
      });
    }
    return _db;
  }

Ou bien :

  Future<Database> get db async {
    if (_db != null) return _db;
    _db = await initDb();
    return _db;
  }

où initDb() est une méthode personnalisée pour nous obtenir le chemin et l'ouvrir comme :

  initDb() async {
    io.Directory documentsDirectory = await getApplicationDocumentsDirectory();
    String path = join(documentsDirectory.path, "test.db");
    var theDb = await openDatabase(path, version: 1, onCreate: _onCreate);
    return theDb;
  }

3. Comment créer une table de base de données

Voyons comment nous pouvons créer une table de base de données dans flutter avec S

      var db = await openDatabase(path);
      await db.execute("CREATE TABLE IF NOT EXISTS Test(id INTEGER PRIMARY KEY)");

ou :

  void _onCreate(Database db, int version) async {
    // When creating the db, create the table
    await db.execute(
        "CREATE TABLE Employee(id INTEGER PRIMARY KEY, firstname TEXT, lastname TEXT, mobileno TEXT,emailId TEXT )");
    print("Created tables");
  }

Le db est l'objet Database. Nous invoquons sa méthode execute() et lui passons notre instruction sql brute pour nous créer la table.

4. Comment insérer une table dans une base de données ?

      await db.insert("Test", {"id": 1});

ou :

  Future<int> insertTodo(Todo todo) async {
    Database db = await this.db;
    var result = await db.insert(tblTodo, todo.toMap());
    return result;
  }

ou disons que je veux insérer une personne avec ses propriétés dans la base de données, puis retourner la personne insérée :

  Future insertPerson(Person person) async {
    person.id = await _db.insert("people", person.toMap());
    return person;
    }

ou

  Future insertPerson(Person person) async {
    person.id = await _db.insert("people", person.toMap());
    return person;
    }

5. Comment interroger ou sélectionner une table SQLite ?

      await db.query("Test")

Disons que je veux renvoyer un select et retourner une liste de personnes de la base de données :

    Future fetchEveryone() async {
    List results = await _db.query("people", columns: Person.columns);
    List people = new List();
    results.forEach((map) {
      people.add(Person.fromMap(map));
    });
    return people;
    }

Ou disons que nous voulons interroger une liste notre base de données SQlite dans flutter et remplir une Liste. Nous pouvons également utiliser une requête brute en utilisant la méthode rawQuery. Vous lui passez l'instruction SQL à exécuter.

  Future<List<Employee>> getEmployees() async {
    var dbClient = await db;
    List<Map> list = await dbClient.rawQuery('SELECT * FROM Employee');
    List<Employee> employees = new List();
    for (int i = 0; i < list.length; i++) {
      employees.add(new Employee(list[i]["firstname"], list[i]["lastname"], list[i]["mobileno"], list[i]["emailid"]));
    }
    print(employees.length);
    return employees;
  }

Ou un autre exemple :

  Future<List> getTodos() async {
    Database db = await this.db;
    var result = await db.rawQuery("SELECT * FROM $tblTodo ORDER BY $colPriority ASC");
    return result;
  }

Disons que je veux vérifier si un utilisateur est connecté :

  Future<bool> isLoggedIn() async {
    var dbClient = await db;
    var res = await dbClient.query("User");
    return res.length > 0 ? true : false;
  }

7 . Comment compter le nombre d'éléments dans SQLite

  Future<int> getCount() async {
    Database db = await this.db;
    var result = Sqflite.firstIntValue(
      await db.rawQuery("SELECT COUNT (*) FROM $tblTodo")
    );
    return result;
  }

7. Comment mettre à jour les données dans une base de données SQLite en utilisant SQFLite.

  Future<int> updateTodo(Todo todo) async {
    var db = await this.db;
    var result = await db.update(tblTodo, todo.toMap(),
      where: "$colId = ?", whereArgs: [todo.id]);
    return result;
  }

7. Comment supprimer des données de la base de données SQLite en utilisant SQFLite.

  Future<int> deleteTodo(int id) async {
    int result;
    var db = await this.db;
    result = await db.rawDelete('DELETE FROM $tblTodo WHERE $colId = $id');
    return result;
  }

Ou :

  Future<int> deleteUsers() async {
    var dbClient = await db;
    int res = await dbClient.delete("User");
    return res;
  }

6. Comment fermer une base de données

      await db.close();

Ou bien :

  Future close() async {
    await _db.close();
  }

Exemples complets

Voyons maintenant quelques exemples complets impliquant Flutter SQFlite.

(a). Flutter SQFLite - INSERT,SELECT,SHOW

Il s'agit d'un simple exemple de tutoriel Dart Flutter démontrant comment effectuer des opérations CRUD de base : insérer, sélectionner et afficher des données dans une application Flutter. Nous allons utiliser le plugin SQLite SQFLite. En effet, notre base de données est le SQLite.

Projet d'exemple complet

Voici le code source complet.

(a). pubspec.yaml

Nos dépendances :

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  path_provider: '>=0.3.0'
  sqflite: any

dev_dependencies:
  flutter_test:
    sdk: flutter

(b). employee.dart

Une classe dart pour représenter un seul employé avec le prénom, le nom, le numéro de portable et l'email comme propriétés. Ces propriétés seront reçues via le constructeur :

class Employee {
  String firstName;
  String lastName;
  String mobileNo;
  String emailId;

  Employee(this.firstName, this.lastName, this.mobileNo, this.emailId);
  Employee.fromMap(Map map) {
    firstName = map[firstName];
    lastName = map[lastName];
    mobileNo = map[mobileNo];
    emailId = map[emailId];
  }
}

(c). dbhelper.dart

Une classe DBHelper pour aider à la mise en œuvre des opérations de crud de base de données :

import 'dart:async';
import 'dart:io' as io;
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter_crud/model/employee.dart';

class DBHelper {
  static Database _db;

  Future<Database> get db async {
    if (_db != null) return _db;
    _db = await initDb();
    return _db;
  }

  initDb() async {
    io.Directory documentsDirectory = await getApplicationDocumentsDirectory();
    String path = join(documentsDirectory.path, "test.db");
    var theDb = await openDatabase(path, version: 1, onCreate: _onCreate);
    return theDb;
  }

  void _onCreate(Database db, int version) async {
    // When creating the db, create the table
    await db.execute(
        "CREATE TABLE Employee(id INTEGER PRIMARY KEY, firstname TEXT, lastname TEXT, mobileno TEXT,emailId TEXT )");
    print("Created tables");
  }

  void saveEmployee(Employee employee) async {
    var dbClient = await db;
    await dbClient.transaction((txn) async {
      return await txn.rawInsert(
          'INSERT INTO Employee(firstname, lastname, mobileno, emailid ) VALUES(' +
              ''' +
              employee.firstName +
              ''' +
              ',' +
              ''' +
              employee.lastName +
              ''' +
              ',' +
              ''' +
              employee.mobileNo +
              ''' +
              ',' +
              ''' +
              employee.emailId +
              ''' +
              ')');
    });
  }

  Future<List<Employee>> getEmployees() async {
    var dbClient = await db;
    List<Map> list = await dbClient.rawQuery('SELECT * FROM Employee');
    List<Employee> employees = new List();
    for (int i = 0; i < list.length; i++) {
      employees.add(new Employee(list[i]["firstname"], list[i]["lastname"], list[i]["mobileno"], list[i]["emailid"]));
    }
    print(employees.length);
    return employees;
  }
}

(d). emloyeelist.dart

Dans ce fichier, une liste d'employés sera récupérée de manière asynchrone et rendue dans une listview :

import 'package:flutter/material.dart';
import 'package:flutter_crud/model/employee.dart';
import 'dart:async';
import 'package:flutter_crud/database/dbhelper.dart';

Future<List<Employee>> fetchEmployeesFromDatabase() async {
  var dbHelper = DBHelper();
  Future<List<Employee>> employees = dbHelper.getEmployees();
  return employees;
}

class MyEmployeeList extends StatefulWidget {
  @override
  MyEmployeeListPageState createState() => new MyEmployeeListPageState();
}

class MyEmployeeListPageState extends State<MyEmployeeList> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Employee List'),
      ),
      body: new Container(
        padding: new EdgeInsets.all(16.0),
        child: new FutureBuilder<List<Employee>>(
          future: fetchEmployeesFromDatabase(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return new ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, index) {
                    return new Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          new Text(snapshot.data[index].firstName,
                              style: new TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 18.0)),
                          new Text(snapshot.data[index].lastName,
                              style: new TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 14.0)),
                          new Divider()
                        ]);
                  });
            } else if (snapshot.hasError) {
              return new Text("${snapshot.error}");
            }
            return new Container(alignment: AlignmentDirectional.center,child: new CircularProgressIndicator(),);
          },
        ),
      ),
    );
  }
}

(e). main.dart

La classe main, où nous définissons notre méthode main, le point d'entrée de notre application dart :

import 'package:flutter/material.dart';
import 'package:flutter_crud/database/dbhelper.dart';
import 'package:flutter_crud/model/employee.dart';
import 'package:flutter_crud/employeelist.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'SQFLite DataBase Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

Employee employee = new Employee("", "", "", "");

String firstname;
String lastname;
String emailId;
String mobileno;
final scaffoldKey = new GlobalKey<ScaffoldState>();
final formKey = new GlobalKey<FormState>();

    @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: scaffoldKey,
      appBar: new AppBar(
        title: new Text('Saving Employee'),
        actions: <Widget>[
            new IconButton(
              icon: const Icon(Icons.view_list),
              tooltip: 'Next choice',
              onPressed: () {
              navigateToEmployeeList();
              },
            ),
          ]
      ),
      body: new Padding(
        padding: const EdgeInsets.all(16.0),
        child: new Form(
          key: formKey,
          child: new Column(
            children: [
              new TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(labelText: 'First Name'),
                validator: (val) =>
                    val.length == 0 ?"Enter FirstName" : null,
                onSaved: (val) => this.firstname = val,
              ),
              new TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(labelText: 'Last Name'),
                validator: (val) =>
                    val.length ==0 ? 'Enter LastName' : null,
                onSaved: (val) => this.lastname = val,
              ),
              new TextFormField(
                keyboardType: TextInputType.phone,
                decoration: new InputDecoration(labelText: 'Mobile No'),
                validator: (val) =>
                    val.length ==0 ? 'Enter Mobile No' : null,
                onSaved: (val) => this.mobileno = val,
              ),
              new TextFormField(
                keyboardType: TextInputType.emailAddress,
                decoration: new InputDecoration(labelText: 'Email Id'),
                validator: (val) =>
                    val.length ==0 ? 'Enter Email Id' : null,
                onSaved: (val) => this.emailId = val,
              ),
              new Container(margin: const EdgeInsets.only(top: 10.0),child: new RaisedButton(onPressed: _submit,
                child: new Text('Save Employee'),),)

            ],
          ),
        ),
      ),
    );
  }
  void _submit() {
     if (this.formKey.currentState.validate()) {
      formKey.currentState.save();
     }else{
       return null;
     }
    var employee = Employee(firstname,lastname,mobileno,emailId);
    var dbHelper = DBHelper();
    dbHelper.saveEmployee(employee);
    _showSnackBar("Data saved successfully");
  }

  void _showSnackBar(String text) {
    scaffoldKey.currentState
        .showSnackBar(new SnackBar(content: new Text(text)));
  }

  void navigateToEmployeeList(){
     Navigator.push(
    context,
    new MaterialPageRoute(builder: (context) => new MyEmployeeList()),
  );
  }
}

Téléchargement

Allons-y et téléchargeons le projet, ou parcourons-le depuis github.

No. Emplacement Lien
1. GitHub Téléchargement direct
2. GitHub Browse

Crédit et remerciements au créateur original du projet ci-dessus @payen83

Comment exécuter

  1. Téléchargez le projet ci-dessus.
  2. Créez votre application dans android studio/visual studio comme d'habitude.
  3. Editez le pubspec.yaml pour ajouter les dépendances appropriées.
  4. Copiez-collez les fichiers dart ci-dessus dans votre projet.

Ensuite :

Assurez-vous que votre appareil ou émulateur est en marche et cliquez sur le bouton "run" dans [android studio] (https://camposha.info/android/android-studio), il va automatiquement choisir l'appareil et installer l'application.

Alternativement, vous pouvez utiliser le terminal ou l'invite de commande. Naviguez/Cd sur la page de la racine du projet et tapez ceci :

flutter.bat build apk

Cela va construire l'APK que vous pouvez ensuite glisser et installer sur votre appareil. Le processus de construction dans ma machine prend environ trois minutes, ce qui n'est pas mal.

Catégorisé:

FrenchSQLite