Free AI web copilot to create summaries, insights and extended knowledge, download it at here
6856
Abstract
edFileExtension = selectedFileName.split(‘.’).last;
<span class="hljs-keyword">if</span>(allowedFormats != <span class="hljs-literal">null</span> || allowedFormats.isNotEmpty) {
<span class="hljs-keyword">if</span>(!allowedFormats.contains(‘selectedFileExtension’)) {
print(selectedFileName);
message = ‘<span class="hljs-type">Selected</span> file format { selectedFileExtension } isn\’ allowed’;
<span class="hljs-keyword">return</span> <span class="hljs-type">FilePickerWrapperFailedResult</span>(errorMessage: message,code: <span class="hljs-number">0</span>);
}
}
<span class="hljs-keyword">if</span> ( maxFileSizeAllowed < file.lengthSync() / <span class="hljs-number">1024</span>) {
message = ‘<span class="hljs-type">File</span> size exceed, maximum file size allowed($maxFileSizeAllowed kB)’;
<span class="hljs-keyword">return</span> <span class="hljs-type">FilePickerWrapperFailedResult</span>(errorMessage: message,code: <span class="hljs-number">0</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-type">FilePickerWrapperSuccessResult</span>(code: <span class="hljs-number">1</span>,filePath: file.path, fileName: selectedFileName);
}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FilePickerWrapperResult</span> </span>{
int code; <span class="hljs-comment">// 1 means success result, 0 means failed or error result </span>
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FilePickerWrapperSuccessResult</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">FilePickerWrapperResult</span> </span>{
<span class="hljs-type">FilePickerWrapperSuccessResult</span>({<span class="hljs-meta">@required</span> <span class="hljs-keyword">this</span>.filePath, <span class="hljs-meta">@required</span> <span class="hljs-keyword">this</span>.fileName, <span class="hljs-meta">@required</span> int code}) {
<span class="hljs-keyword">this</span>.code = code;
}
<span class="hljs-type">String</span> filePath;
<span class="hljs-type">String</span> fileName;
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FilePickerWrapperFailedResult</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">FilePickerWrapperResult</span> </span>{
<span class="hljs-type">FilePickerWrapperFailedResult</span>({<span class="hljs-meta">@required</span> <span class="hljs-keyword">this</span>.errorMessage, <span class="hljs-meta">@required</span> int code}) {
<span class="hljs-keyword">this</span>.code = code;
}
<span class="hljs-type">String</span> errorMessage;
}</pre></div><p id="bb4a">In this helper class, we added functionality to select the image from the gallery app on the device. Now create a new file and name it <b>image_picker_wrapper.dart.</b></p><h1 id="c228">Enabling image selection</h1><p id="d038">Add the following code to this file:</p><div id="ef30"><pre>import ‘dart:io’;
import ‘package:facerecognition/supporting_files/file_picker_wrapper.dart’;
import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;
import ‘package:image_picker/image_picker.dart’;
typedef ImagePickerResult = <span class="hljs-keyword">void</span> <span class="hljs-title function_ invoke__">Function</span>(FilePickerWrapperResult result);
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ImagePickerWrapper</span> </span>{
<span class="hljs-title function_ invoke__">ImagePickerWrapper</span>({
@required ImagePickerResult imagePickerResult,
<span class="hljs-keyword">double</span> maxFileSizeAllowed = <span class="hljs-number">2024</span> //size in kb
}) {
this._imagePickerResult = imagePickerResult;
this._maxFileSizeAllowed = maxFileSizeAllowed;
}
ImagePickerResult _imagePickerResult;
<span class="hljs-keyword">double</span> _maxFileSizeAllowed;
<span class="hljs-keyword">void</span> <span class="hljs-title function_ invoke__">openImagePickerActionSheet</span>({@required BuildContext buildContext}) {
<span class="hljs-keyword">if</span>(buildContext == <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">print</span>(‘build content can’’\’t be <span class="hljs-keyword">empty</span>’);
<span class="hljs-keyword">return</span>;
}
<span class="hljs-keyword">if</span> (Platform.isIOS) {
<span class="hljs-title function_ invoke__">_actionSheet</span>(buildContext);
} <span class="hljs-keyword">else</span> {
<span class="hljs-title function_ invoke__">_androidBottomSheet</span>(buildContext);
}
}
<span class="hljs-comment">//For ios </span>
<span class="hljs-keyword">void</span> <span class="hljs-title function_ invoke__">_actionSheet</span>(BuildContext context) {
_containerForSheet<String>(
context: context,
child: <span class="hljs-title function_ invoke__">CupertinoActionSheet</span>(
<span class="hljs-attr">title</span>: <span class="hljs-title function_ invoke__">Text</span>(‘’),
<span class="hljs-attr">message</span>: <span class="hljs-title function_ invoke__">Text</span>(‘’),
<span class="hljs-attr">actions</span>: <Widget>[
<span class="hljs-title function_ invoke__">CupertinoActionSheetAction</span>(
<span class="hljs-attr">child</span>: <span class="hljs-title function_ invoke__">Text</span>(‘Camera’),
<span class="hljs-attr">onPressed</span>: () {
<span class="hljs-title function_ invoke__">_openCamera</span>(ImageSource.camera);
},
),
<span class="hljs-title function_ invoke__">CupertinoActionSheetAction</span>(
<span class="hljs-attr">child</span>: <span class="hljs-title function_ invoke__">Text</span>(‘Gallery’),
<span class="hljs-attr">onPressed</span>: () async {
<span class="hljs-title function_ invoke__">_openFileExplorer</span>();
},
),
],
cancelButton: <span class="hljs-title function_ invoke__">CupertinoActionSheetAction</span>(
<span class="hljs-attr">child</span>: <span class="hljs-title function_ invoke__">Text</span>(‘Cancel’),
<span class="hljs-attr">isDefaultAction</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">onPressed</span>: () {
Navigator.<span class="hljs-title function_ invoke__">pop</span>(context, ‘Cancel’);
},
)));
}
<span class="hljs-keyword">void</span> _containerForSheet<T>({BuildContext context, Widget child}) {
showCupertinoModalPopup<T>(
context: context,
builder: (BuildContext context) => child,
).then<<span class="hljs-keyword">void</span>>((T value) {
});
}
<span class="hljs-comment">//For Android </span>
<span class="hljs-keyword">void</span> <span class="hljs-title function_ invoke__">_androidBottomSheet</span>(BuildContext context) {
show
Options
ModalBottomSheet<<span class="hljs-keyword">void</span>>(
context: context,
builder: (BuildContext context) {
<span class="hljs-keyword">return</span> <span class="hljs-title function_ invoke__">Container</span>(
<span class="hljs-attr">margin</span>: <span class="hljs-keyword">const</span> EdgeInsets.<span class="hljs-title function_ invoke__">only</span>(<span class="hljs-attr">left</span>: <span class="hljs-number">20.0</span>, <span class="hljs-attr">right</span>: <span class="hljs-number">20.0</span>),
<span class="hljs-attr">child</span>: <span class="hljs-title function_ invoke__">Wrap</span>(
<span class="hljs-attr">children</span>: <Widget>[
<span class="hljs-title function_ invoke__">ListTile</span>(
<span class="hljs-attr">leading</span>: <span class="hljs-title function_ invoke__">Icon</span>(Icons.camera),
<span class="hljs-attr">title</span>: <span class="hljs-title function_ invoke__">Text</span>(‘Camera’),
<span class="hljs-attr">onTap</span>: () {
<span class="hljs-title function_ invoke__">_openCamera</span>(ImageSource.camera);
}),
<span class="hljs-title function_ invoke__">ListTile</span>(
<span class="hljs-attr">leading</span>: <span class="hljs-keyword">const</span> <span class="hljs-title function_ invoke__">Icon</span>(Icons.landscape),
<span class="hljs-attr">title</span>: <span class="hljs-title function_ invoke__">Text</span>(‘Gallery’),
<span class="hljs-attr">onTap</span>: () {
// <span class="hljs-title function_ invoke__">_openFileExplorer</span>();
<span class="hljs-title function_ invoke__">_openCamera</span>(ImageSource.gallery);
},
),
],
),
);
});
}
Future<<span class="hljs-keyword">void</span>> <span class="hljs-title function_ invoke__">_openCamera</span>(ImageSource source) async {
File imageSelected = await ImagePicker.<span class="hljs-title function_ invoke__">pickImage</span>(
<span class="hljs-attr">source</span>: source, <span class="hljs-attr">maxHeight</span>: <span class="hljs-number">400</span>, <span class="hljs-attr">maxWidth</span>: <span class="hljs-number">400</span>);
<span class="hljs-keyword">if</span> (imageSelected != <span class="hljs-literal">null</span>) {
<span class="hljs-keyword">final</span> String fileName = imageSelected.path.<span class="hljs-title function_ invoke__">split</span>(‘/’).last;
<span class="hljs-keyword">if</span> ( _maxFileSizeAllowed < imageSelected.<span class="hljs-title function_ invoke__">lengthSync</span>() / <span class="hljs-number">1024</span>) {
String message = ‘File size exceed, maximum file size <span class="hljs-title function_ invoke__">allowed</span>(<span class="hljs-variable">$_maxFileSizeAllowed</span> kB)’;
<span class="hljs-title function_ invoke__">_imagePickerResult</span>(<span class="hljs-title function_ invoke__">FilePickerWrapperFailedResult</span>(<span class="hljs-attr">errorMessage</span>: message,<span class="hljs-attr">code</span>: <span class="hljs-number">0</span>));
}
<span class="hljs-title function_ invoke__">_imagePickerResult</span>(<span class="hljs-title function_ invoke__">FilePickerWrapperSuccessResult</span>(<span class="hljs-attr">code</span>: <span class="hljs-number">1</span>,<span class="hljs-attr">filePath</span>: imageSelected.path, <span class="hljs-attr">fileName</span>: fileName));
}
<span class="hljs-keyword">else</span> {
<span class="hljs-title function_ invoke__">_imagePickerResult</span>(<span class="hljs-title function_ invoke__">FilePickerWrapperFailedResult</span>(<span class="hljs-attr">errorMessage</span>: ‘Failed to get the image’,<span class="hljs-attr">code</span>: <span class="hljs-number">0</span>));
}
}
Future<<span class="hljs-keyword">void</span>> <span class="hljs-title function_ invoke__">_openFileExplorer</span>() async {
<span class="hljs-keyword">final</span> FilePickerWrapperResult wrapperResult = await <span class="hljs-title function_ invoke__">FilePickerWrapper</span>()
.<span class="hljs-title function_ invoke__">openFileExplorer</span>(
<span class="hljs-attr">maxFileSizeAllowed</span>: <span class="hljs-number">2048</span>,
<span class="hljs-attr">fileFormatsAllowed</span>: [‘jpeg’, ‘png’, ‘jpg’]);
<span class="hljs-title function_ invoke__">_imagePickerResult</span>(wrapperResult);
}
}</pre></div><p id="f671">This helper class will provide the functionality to pick an image from the device’s gallery app or take a new one using the device’s camera. The alerts style will be as per the platform (i.e., on iOS, it will be shown in Cupertino style, and, on the Android platform, it will be displayed using Material style).</p><p id="4867">In this blog, we have examined the steps needed to create a UI in Flutter to allow users to pick images from their phones for use with Amazon Rekognition.</p><p id="2179">Next, we design a UI to allow the user to pick images and implement the functionality to pick image/s either from the camera or mobile storage. In the next part of this blog, we will focus on:</p><ul><li>Initiating the action of comparison.</li><li>Convert the raw result into a model.</li><li>Display the result of the comparison.</li></ul><p id="9c29">Read the next part of the blog on implementing facial recognition where we cover these topics:</p><div id="eb9f" class="link-block">
<a href="https://readmedium.com/implementing-facial-recognition-in-flutter-apps-1e99a23ac9c4">
<div>
<div>
<h2>Implementing Facial Recognition in Flutter Apps</h2>
<div><h3>Read our blog to learn how to implement Facial Recognition in Flutter Apps using Amazon Rekognition.</h3></div>
<div><p>DLT Labs on medium.com</p></div>
</div>
<div>
<div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*aGrAV7khLCz6_oKQmAG29w.png)"></div>
</div>
</div>
</a>
</div><p id="ca73"><i>Amazon Rekognition is the intellectual property of Amazon Inc. Flutter is a trademark of Google LLC.</i></p><p id="e5a4"><i>Author — Suhail Shabir, DLT Labs</i>™</p><p id="0f4a"><b>About the Author: </b><i>Suhail </i>is an application development professional who has worked on different platforms and technologies. He has completed his Bachelors in Computer Application from Kashmir University.</p><p id="e3ea">Disclaimer: This article was originally published on the DLT Labs Blog page:
<a href="https://www.dltlabs.com/blog/enabling-facial-recognition-in-flutterapps-764220">https://www.dltlabs.com/blog/enabling-facial-recognition-in-flutterapps-764220</a></p><figure id="2629"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*0Rjo1bW8T-fHbjiq.png"><figcaption></figcaption></figure></article></body>
