Food annotation image app with Flutter - Guide lines

[main-c]

Food Annotation Image app with Flutter

This present guidelines of our coding party about build a food annotation image app with flutter.

Part 1 : Get a food image from gallery or camera

Step 1 : Setup flutter project

• Create a new flutter projects name food_annotation using flutter create food_annotation

• Open created app in vs code and run it on your mobile devices or emulator with flutter run

Step 2 : Install and use Image_picker package

[image_picker](https://pub.dev/packages/image_picker/) is a flutter package that use to pick image from gallery or camera.

• Install the package using the command flutter pub add image_picker.
• Delete all the code in main.dart and remplace by the following:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PickerImage(),
    );
  }
}

• Create the file picker_image.dart in the directory lib/ui/screens/. This file contains a StatefulWidget class called PickerImage (Who is imported in the previous step)
• In the build of the PickerImage class, return a Scaffold without appBar and for body a Column.

return Scaffold(
    body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[]
        ),
    ),
);

• In this column, put two button : the first for taking image from camera, and the last for pick image from the gallery. The code for a button is like that:

Container(
    margin: const EdgeInsets.only(left: 100, right: 100),
    child: ElevatedButton(
        style: ElevatedButton.styleFrom(
            shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                    Radius.circular(10)),
                  ),
            padding: const EdgeInsets.only(
                top: 20, bottom: 20
            ),
        ),
        onPressed: () {},
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const <Widget>[
                Icon(Icons.camera_alt),
                SizedBox(width: 10),
                Text('Camera'),
            ],
        ),
    ),
),

• Write the Future function (for picking an image and send it to another page) before the build Widget. The given function is for picking from the camera source.

Future pickImage() async {
    try {

      final image = await ImagePicker().pickImage(source: ImageSource.camera);
      if (image == null) return;

      final imageFinal = File(image.path);
      setState(() {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => DisplayImage(image: imageFinal)));
      });
    } on PlatformException catch (e) {
      print("Failed to pick image $e");
    }
  }

• Update the Future function to take an argument of type ImageSource, who represent the type of action for camera or gallery
• Call the Future function like action of the previous buttons called. Example, for the camera, it would be like

onPressed: () => pickImage(ImageSource.camera),

• Now create an other file named display_image.dart in the directory lib/ui/screens/ who represents the screen where the picked image will be displayed. This file contains a StatefulWidget class named DisplayImage

import 'package:flutter/material.dart';

class DisplayImage extends StatefulWidget {
  DisplayImage({Key? key, required this.image}) : super(key: key);

  File? image;

  @override
  State<DisplayImage> createState() => _DisplayImageState();
}

class _DisplayImageState extends State<DisplayImage> {
    final _imageKey = GlobalKey<ImagePainterState>();

  @override
  Widget build(BuildContext context) {
    return ImagePainter.file(
          widget.image!,
          key: _imageKey,
          scalable: true,
          textDelegate: TextDelegate(),
          initialPaintMode: PaintMode.freeStyle,
        ),
  }
}

• Now run your code an look the result !

Part 2: Integration of image painter package

Image painter is a popular flutter package that uses to paint on an image, we will uses customize it according of our needs

Step 1 : Clone the package

• Download zip project of the project [here](https://github.com/yellowQ-software/yellowQ-Flutter-Image-Painter/archive/refs/heads/main.zip)
• Extract the zip file in any directory of your choices

Step 2 : Add the package in the project

• Create a new directory name src in the lib directory of your project
• Copy the contains of lib directory present in image painter package and paste it in the src directory that you have created
• Uses the example project of the package to get a look of how you can use it in your project

Part 3 : Adapt the package according to our wishes

At this level, you can already paint on an image picked from camera or from gallery, now we'll custom package by adding some form for naming a selection and save it.

Step 1 : Name a selection

The package give us some method like onColorChanged or onPaintModeChanged that are functions call when color or paint mode changed resp. We want to add an another function that will can when drawing on image end. In our case we will show a dialog with a form to name the current selection.

• Open src/_paint_over_image.dart file

• Add a attribute onDrawingEnd with type AlertDialog on ImagePainter class

  class ImagePainter extends StatefulWidget {
  
  // other attributes
    ... 
     final AlertDialog? onDrawingEnd;

• Update ImagePainter.file factory by adding the new attribute

  ///Constructor for loading image from [File].
  factory ImagePainter.file(
    File file, {
    ...
    AlertDialog? onDrawingEnd,
      ...
  }) {...

• In the same file, use your IDE search tools to find _scaleEndGesture method. This method is fires when users stop interacting with the screen. Add to that method a showDialog method that will return onDrawingEnd as dialog

  ///Fires when user stops interacting with the screen.
  void _scaleEndGesture(
    ScaleEndDetails onEnd,
    Controller controller,
  ) {
    //other instructions  
    ...
    if (widget.onDrawingEnd != null) {
      showDialog(
          context: context,
          builder: (context) {
            return widget.onDrawingEnd!;
          });
    }
  }
  

• Go back into your code in display_image.dart and changes the way you instantiates ImagePainter class by adding onDrawingEnd attribute, his value could be a AlertDialog that you will defines.

  import 'package:flutter/material.dart';
  
  class DisplayImage extends StatefulWidget {
  ...
  }
  
  class _DisplayImageState extends State<DisplayImage> {
  
  @override
  Widget build(BuildContext context) {
    return ImagePainter.file(
          widget.currentImage!,
          key: _imageKey,
          scalable: true,
          initialStrokeWidth: 2,
          textDelegate: TextDelegate(),
          initialColor: Colors.green,
          initialPaintMode: PaintMode.freeStyle,
          onDrawingEnd: _registerDialog(),
        ),
  }
    ...
  AlertDialog _registerDialog() {
    return AlertDialog(
      title: Text("Name the selection",),
      content : FoodRegisterForm(), // a widget with return your form for register a food
        actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text("Cancel",),
        ),
        TextButton(
          onPressed: () {
  
              Navigator.pop(context);
            }
          },
          child: Text("Done",),
          ),
      ],
    }
  }

• hot reload your app, if everything went well, a Alert dialog will display after an annotation

Step 2 : Get Coordinates of an annotation

Now that our app can register a food, we need to get coordinates of the current annotation

Image painter package defines the path of an annotation with the class PaintInfo define in lib/src/_image_painter.dart

• add a toJson convert to that class. this method will help to get a json expression of the coordinates of an annotation

  ...
  class PaintInfo {
  ///Mode of the paint method.
  PaintMode? mode;
  
  ///Used to save specific paint utils used for the specific shape.
  Paint? painter;
  
  ///Used to save offsets.
  ///Two point in case of other shapes and list of points for [FreeStyle].
  List<Offset?>? offset;
  
  ///Used to save text in case of text type.
  String? text;
  
  ///In case of string, it is used to save string value entered.
  PaintInfo({this.offset, this.painter, this.text, this.mode});
  
  String toJson() {
    return jsonEncode({
      "offset": offset,
      "painter": painter,
      "text": text,
      "mode": mode,
    });
  }
  }

• The package stores all the coordinates of the current image in a list of PaintInfo named _paintHistory defined as private attributes in ImpageState class in file lib/src/_pain_over_image.dart. Since it is a private class, we will define get and set methods to access its value directly from our DisplayImage class

  ///
  class ImagePainterState extends State<ImagePainter> {
  ...
  final _paintHistory = <PaintInfo>[];
  ... 
  
  List<PaintInfo> get paintHistory => _paintHistory;
  
  set paintHistory(value) {
    if (_paintHistory.isNotEmpty) {
      setState(_paintHistory.removeLast);
    }
      // the set method will be uses for cancel an annotation 
  }
  

• back in our file, we will use the _imagekey variable to access the attributes of ImageState including our getter and setters. Modify the action of your dialog as folows

  ...
  actions: [
        TextButton(
          onPressed: () {
            final state = _imageKey.currentState!;
            //remove last
            state.paintHistory = state.paintHistory;
            Navigator.pop(context);
          },
          child: Text(
            "Cancel",
                ),
          ),
        ),
        TextButton(
          onPressed: () { 
            if (_formkey.currentState!.validate()) {
              final state = _imageKey.currentState!;
              _formkey.currentState!.save(); //_formkey is the key of your register form
  
              print(state.paintHistory.last.toJson()); //print the path of current annotation in console 
              Navigator.pop(context);
            }
          },
          child: Text(
            "Done",
          ),
        )
      ],

Path 4 : Save in Json file

Now to that we can get coordinates of an annotation, the next steps is saving in a json file

Step 1: use path_provider to create a file in local storage

• path provider is a Flutter plugin for finding commonly used locations on the filesystem. install it by running this command flutter pub add path_provider

• in lib directory create a new directory services and in that directory create a new dart file storage.dart. this will contains the methods for export data in a file

• open lib/services/storage.dart and paste this :

  import 'dart:io';
  
  import 'package:flutter/material.dart';
  import 'package:path_provider/path_provider.dart';
  
  class Storage {
  Storage({required this.fileName, required this.data});
  
  String fileName; //the name of the file
  String data; // data that we to save in this file
  
  Future<String> get _localPath async { // get directory path
    final directory = await getExternalStorageDirectory();
    print(directory!.path);
      return directory.path;
    }
  
    Future<File> get _localFile async {
      final path = await _localPath;
      return File('$path/$fileName'); //create a local file the choosen directory with our filename
    }
  
    Future<File> write() async {
      final file = await _localFile;
      return file.writeAsString(data); // write in the file
  }
  }
  

Step 2 : Call our method after submit an annotation

• In this coding party we consider that we save after each annotation so we modify onPressed of the finish button as follows :

  ...
  TextButton(
          onPressed: () {
            if (_formkey.currentState!.validate()) {
              final state = _imageKey.currentState!;
              _formkey.currentState!.save();
              PaintInfo paintInfo = state.paintHistory.last ; 
              String data = "{
                  "label" : _label, // the label of your food get from form
                  "coordinate": paintInfo.toJson(),
              }";
               Storage storage = Storage(fileName: _label, data: data); 
               storage.write();
              Navigator.pop(context);
            }
          },
          child: Text(
            "Done",
          ),
        )

• Your file has been saved, go check in your local storage of the app

[jiofidelus]

Hello, Great job,

I hope that all the coders will be ready with great system on Friday

[noutcheu1]

thank you for this tutorial but for everyone who uses this tutorial don't forget to add these dependencies but before tape this on your command line

flutter pub add image_painter 
and on pubspec.yaml add this 
dependencies:
   image_painter: latest

[noutcheu1]

please in place of this

ImagePainter.file(
          widget.image!,
          key: _imageKey,
          scalable: true,
          textDelegate: TextDelegate(),
          initialPaintMode: PaintMode.freeStyle,
        ),

add this code if else you will have this error No Material widget was found due to his forgetting to add a Scaffold widget and container widget on your phone when you'll build the application

Scaffold(
        body:Container(
        padding: EdgeInsets.all(20),
        child:ImagePainter.file(
        widget.image!,
        key: _imageKey,
        scalable: true,
        textDelegate: TextDelegate(),
        initialPaintMode: PaintMode.freeStyle,
    )));
  }

[main-c]

thank you for this tutorial but for everyone who uses this tutorial don't forget to add these dependencies but before tape this on your command line

flutter pub add image_painter 
and on pubspec.yaml add this 
dependencies:
   image_painter: latest

You don't have to install it

[noutcheu1]

//Constructor for loading image from [File].
  factory ImagePainter.file(
    File file, {
    ...
    AlertDialog? onDrawingEnd,
    ...
  }) {...

directly after adding this will you find it after the constructor

ImagePainter._(
    ....
      onDrawingEnd:onDrawingEnd,
    );

add this line also if else you will never initialize the Alertdialogue