Zum Hauptinhalt springen

Flutter SQFLite Tutorial und CRUD Beispiele

Flutter SQFlite Tutorial und Beispiele

Wie man mit SQLite-Datenbanken in Flutter arbeitet.

Was ist Flutter?​

*Flutter ist Googles SDK für mobile Apps, mit dem sich hochwertige native Schnittstellen für iOS und Android in Rekordzeit erstellen lassen.

Flutter funktioniert mit bestehendem Code, wird von Entwicklern und Organisationen auf der ganzen Welt verwendet und ist kostenlos und quelloffen.

Hier sind die drei Hauptmerkmale von Flutter:

1. Schnelle Entwicklung

Flutter kann Ihre App in Millisekunden durch Hot Reload zum Leben erwecken.

Sie können auch ein reichhaltiges Set von vollständig anpassbaren Widgets verwenden, um native Schnittstellen in wenigen Minuten zu erstellen.

2. Ausdrucksstarke und flexible UI

Mit Flutter können Sie schnell Funktionen bereitstellen, wobei der Schwerpunkt auf nativen Endbenutzererfahrungen liegt.

Die mehrschichtige Architektur ermöglicht eine vollständige Anpassung, was zu einem unglaublich schnellen Rendering und ausdrucksstarken und flexiblen Designs führt.

3. Native Leistung

Die Widgets von Flutter berücksichtigen alle kritischen Plattformunterschiede wie Scrollen, Navigation, Icons und Schriftarten, um sowohl auf iOS als auch auf Android die volle native Leistung zu bieten.

Was ist SQFlite?​

SQflite ist ein Plugin für Flutter. Es ermöglicht uns das Speichern, Abrufen und Manipulieren unserer SQLite-Datenbanken über Flutter-Code. SQflite unterstützt sowohl Android- als auch iOS-Plattformen.

Hier sind einige der Funktionen von SQFlite:

  1. SQFlite ermöglicht sowohl Datenbanktransaktionen als auch Batches.
  2. SQlite hat eine eingebaute automatische Versionsverwaltung.
  3. SQFlite bietet einfach zu bedienende Methoden zum Einfügen, Abfragen, Aktualisieren und Löschen von Daten in der Datenbank.
  4. Diese CRUD-Operationen werden sowohl auf iOS als auch auf Android im Hintergrund-Thread ausgeführt. Dadurch bleibt die Benutzeroberfläche reaktionsschnell.

Wie wird SQFlite installiert?​

Die Installation von SQFlite ist so einfach wie die jedes anderen Flutter-Pakets. Es wird im [Dart Package Repository] (https://pub.dartlang.org/packages) gehostet und kann als Abhängigkeit hinzugefügt werden.

Um das zu tun:

1. Gehen Sie zu Ihrer pubspec.yaml Datei:

Und füge es als Abhängigkeit hinzu:

dependencies:
  sqflite: ^0.12.1

Sie können die neueste Version [hier] überprüfen (https://github.com/tekartik/sqflite).

2. Laden Sie es herunter

Android Studio bietet Ihnen eine "Package get"-Schaltfläche, mit der Sie das Paket abrufen und zu Ihrem Projekt hinzufügen können, solange Sie online sind.

Wenn Sie Visual Studio Code verwenden, wird eine Änderung in der Datei "pubspec.yaml" dazu führen, dass der Befehl "flutter packages get" automatisch aufgerufen wird.

Andernfalls, wenn Sie nicht die oben genannte IDE verwenden, können Sie es von der Kommandozeile aus installieren

$ flutter packages get

3. Importieren in Ihr Projekt

Gehen Sie zu Ihrem Dart-Code, wo Sie es verwenden wollen, und importieren Sie es am Anfang Ihrer Datei.

import 'package:sqflite/sqflite.dart';

Quick Flutter SQFLite Database HowTo Snippets​

1. Wie man den Datenbankpfad erhält​

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

2. Wie man eine Datenbank öffnet​

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

Sie können eine Hilfsklasse einfügen:

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;
  }

Oder:

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

Wobei initDb() eine benutzerdefinierte Methode ist, um uns den Pfad zu besorgen und ihn zu öffnen als:

  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. Wie man eine Datenbanktabelle erstellt​

Schauen wir uns an, wie wir eine Datenbanktabelle in Flutter mit S erstellen können

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

oder:

  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");
  }

Die db ist das Database Objekt. Wir rufen seine execute() Methode auf und übergeben unsere rohe SQL-Anweisung, um die Tabelle zu erstellen.

4. Wie man in eine Datenbanktabelle einfügt​

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

oder:

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

Oder sagen wir, ich möchte eine Person mit ihren Eigenschaften in die Datenbank einfügen und dann die eingefügte Person zurückgeben:

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

oder

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

5. Wie man eine SQLite-Tabelle abfragt oder auswählt​

      await db.query("Test")

Nehmen wir an, ich möchte einen Select ausführen und eine Liste von Personen aus der Datenbank zurückgeben:

    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;
    }

Oder sagen wir, wir wollen eine Liste unserer SQlite-Datenbank in Flutter abfragen und eine Liste auffüllen. Wir können auch eine Rohabfrage mit der Methode rawQuery verwenden. Man übergibt ihr die auszuführende SQL-Anweisung.

  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;
  }

Oder ein anderes Beispiel:

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

Nehmen wir an, ich möchte prüfen, ob ein Benutzer angemeldet ist:

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

7 . Wie zählt man die Anzahl der Elemente in SQLite?​

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

7. Wie man Daten in der SQLite-Datenbank mit SQFLite aktualisiert​

  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. Löschen aus der SQLite-Datenbank mit 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;
  }

Oder:

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

6. Wie man eine Datenbank schließt​

      await db.close();

Or:

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

Vollständige Beispiele

Schauen wir uns nun einige vollständige Beispiele mit Flutter SQFlite an.

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

Dies ist ein einfaches Dart Flutter Beispiel Tutorial, das demonstriert, wie man grundlegendes CRUD durchführt: Einfügen, Auswählen und Anzeigen von Daten in einer Flutter Anwendung. Wir werden das SQLite-Plugin SQFLite verwenden. Der Grund dafür ist, dass unsere Datenbank die SQLite ist.

Vollständiges Beispielprojekt​

Hier ist der vollständige Quellcode.

(a). pubspec.yaml​

Unsere Abhängigkeiten:

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​

Eine Dartklasse zur Darstellung eines einzelnen Mitarbeiters mit Vorname, Nachname, Handynummer und E-Mail als Eigenschaften. Diese Eigenschaften werden über den Konstruktor empfangen:

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​

Eine DBHelper-Klasse, die bei der Implementierung von Datenbankoperationen hilft:

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​

In dieser Datei wird eine Liste von Mitarbeitern asynchron geholt und in einer Listenansicht dargestellt:

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​

Die Main-Klasse, in der wir unsere Main-Methode definieren, den Einstiegspunkt in unsere Dart-Anwendung:

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()),
  );
  }
}

Herunterladen​

Gehen wir rüber und laden wir das Projekt herunter, oder suchen wir es auf github.

---

Anerkennung und Dank an den ursprünglichen Ersteller des obigen Projekts @payen83

So wird es ausgeführt​

  1. Laden Sie das obige Projekt herunter.
  2. Erstellen Sie Ihre Anwendung in android studio/visual studio wie gewohnt.
  3. Bearbeiten Sie die "pubspec.yaml", um die entsprechenden Abhängigkeiten hinzuzufügen.
  4. Kopieren Sie die obigen Dartdateien und fügen Sie sie in Ihr Projekt ein.

Dann:

Vergewissern Sie sich, dass Ihr Gerät oder Emulator läuft und klicken Sie auf die Schaltfläche "Ausführen" in [android studio] (https://camposha.info/android/android-studio), dann wird das Gerät automatisch ausgewählt und die App installiert.

Alternativ können Sie auch das Terminal oder die Eingabeaufforderung verwenden. Navigieren Sie zur Projektstammseite und geben Sie Folgendes ein:

flutter.bat build apk

Damit wird die APK erstellt, die Sie dann auf Ihr Gerät ziehen und installieren können. Der Build-Prozess in meinem Rechner dauert etwa drei Minuten, was nicht schlecht ist.