Flutter & Photo

December 30, 2019 Flutter 1 minute, 10 secondes

Développement Flutter avec gestion de l'appareil photo

Prendre une photo

Cette section décrit comment afficher un bouton pour prendre une photo et afficher la photo.

Bouton pour la photo

Avant de commencer à coder, ajouter le composant image_picker dans pubspec.xaml :

image_picker: ^0.6.1+10

Voici le code pour afficher un bouton de prise de photo ou la photo si celle ci existe.

File _image;

...

_image == null
    ? Center(
        child: RaisedButton.icon(
            elevation: 10.0,
            color: Colors.deepPurple.shade300,
            icon: Icon(
              Icons.photo_camera,
              color: Colors.white,
              size: 30,
            ),
            onPressed: () {
              getImage();
            },
            label: Text("Photos",
                style: TextStyle(color: Colors.white))),
      )
    : Center(
        child: Image.file(
          _image,
        ),
      ),

La fonction suivante permet de gérer l'activation de l'appareil et la récupération de la photo prise.

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    Directory appDocDir = await getApplicationDocumentsDirectory();
    String appDocPath = appDocDir.path;
    var o = await FileHelper().compressAndGetFile(
        image, '$appDocPath/${SessionHelper().bottle.id}.png');

    setState(() {
      _image = o;
    });
  }

Stockage de la photo sous SQLite

Dans mon exemple, j'utilise une base de données SQLite avec Flutter pour stocker mes données.

  sqflite: ^1.1.6+3

Afin de stocker les images dans la base de données, elles sont encodées en base 64 comme ci dessous et stockées dans la base de données comme un chaine de caractère longue.

    if (_image != null) {
      var encoded = base64.encode(_image.readAsBytesSync());
      DatabaseHelper().insertPhoto(id, encoded);
    }

Pour afficher la photo sur un autre écran par exemple :

    var decoded = base64.decode(snapshot.data.phototext);
    return Image.memory(decoded);

alt