Save and display images locally

With FlutterFlow, it is currently not possible to take a picture without having to save it directly in Firestore. So here is a new tutorial that will allow users to take pictures and keep them locally.

I will make a second tuto to save them in Firestore.

STEP 1
I create one local variable.





STEP 2
1- Go to Custom Action

2- Click on "+ Create

3- Give a name to your code, I chose "takePhoto".

4- In Return Value, choose String (this allows to recover an error if necessary)

5- Click on "+ Add Dependency" then enter "image_picker".


6- On the right side, enter the following code:

import 'package:image_picker/image_picker.dart';

final ImagePicker _picker = ImagePicker();

Future<String> takePhoto(BuildContext context) async {
  String error;
  try {
    final XFile photoURL = await _picker.pickImage(source: ImageSource.camera);
    if (photoURL != null) {
      FFAppState().urlImages.add(photoURL.path);
    }
  } catch (e) {
    error = e;
  }
  
  return error;
}

7- Finish by pressing "Check errors", after a few seconds you should get a green button "No Errors!".

You can now use this code in your actions.

STEP 3
You can follow the small video example below.




You can test by clicking here!

I hope you will find it useful. 😅
Don't hesitate to ask me questions.

Damien