In modern application, if you implementing user profile feature. So, you should implement user profile pic and allow a user to set and change profile pic. A user can set a profile pic from his/her mobile gallery or capture image from camera.
Besides just picking images from gallery and camera. You can crop it with desired aspect ratio. It is very important if you noticed every app like Facebook, Google etc asks you to crop the image into a square because it fits the best for different use cases. In this post, we’ll develop an application that picks an image from camera or gallery. After that, we crop it for fit in a circular image widget.
In this project user will have following choices:
Capture profile picture from the camera.
Choose profile picture from gallery.
Cancel.
The user will need to choose one option from the above three options and then depending on the option chosen by the user. We will either capture an image from the camera or open the gallery.
We have created a Flutter plugin for this post. You can use it instantly. version:1.1.2
> let's start its implementation with the following steps.
Creating a new Project 1. Create a new project from File ⇒ New Flutter Project with your development IDE. 2. For pick image from gallery and camera, we have used image_picker: "^0.4.5" and for crop selected we have used image_cropper: ^0.0.4. As you can see, we have declared it in pubspec.yaml file. 3. Open main.dart file and edit it. As we have set our theme and change debug banner property of Application.
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_image_ppicker/home_screen.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(
debugShowCheckedModeBanner: false,
title: 'Flutter Image picker',
theme: new ThemeData(
primaryColor: const Color(0xFF02BB9F),
primaryColorDark: const Color(0xFF167F67),
accentColor: const Color(0xFF167F67),
),
home: new HomeScreen(title: 'Flutter Image picker'),
);
}
}
4. After that create HomeScreen(home_screen.dart) widget. It is root widget of our project. Here, we have implemented two interfaces TickerProviderStateMixin and ImagePickerListener. We using TickerProviderStateMixin for handle images from local storage and ImagePickerListener provide a callback method from image picker handler class. We have created an instance of animation controller. It will control bottom to up slide animation.
5. Now modify build method of home_screen.dart. Here, we have used stack widget for display empty image view.
home_screen.dart
new Stack(
children: <Widget>[
new Center(
child: new CircleAvatar(
radius: 80.0,
backgroundColor: const Color(0xFF778899),
),
),
new Center(
child: new Image.asset("assets/photo_camera.png"),
),
],
)
}
for display selected and cropped image, we have used another widget group.
home_screen.dart
new Container(
height: 160.0,
width: 160.0,
decoration: new BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
image: new ExactAssetImage(_image.path),
fit: BoxFit.cover,
),
border:
Border.all(color: Colors.red, width: 5.0),
borderRadius:
new BorderRadius.all(const Radius.circular(80.0)),
),
),
after that merge all code snippet and you will see final home_screen.dart look like below.
home_screen.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_image_ppicker/image_picker_handler.dart';
import 'package:flutter_image_ppicker/image_picker_dialog.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key key, this.title}) : super(key: key);
final String title;
@override
_HomeScreenState createState() => new _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen>
with TickerProviderStateMixin,ImagePickerListener{
File _image;
AnimationController _controller;
ImagePickerHandler imagePicker;
@override
void initState() {
super.initState();
_controller = new AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
);
imagePicker=new ImagePickerHandler(this,_controller);
imagePicker.init();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title,
style: new TextStyle(
color: Colors.white
),
),
),
body: new GestureDetector(
onTap: () => imagePicker.showDialog(context),
child: new Center(
child: _image == null
? new Stack(
children: <Widget>[
new Center(
child: new CircleAvatar(
radius: 80.0,
backgroundColor: const Color(0xFF778899),
),
),
new Center(
child: new Image.asset("assets/photo_camera.png"),
),
],
)
: new Container(
height: 160.0,
width: 160.0,
decoration: new BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
image: new ExactAssetImage(_image.path),
fit: BoxFit.cover,
),
border:
Border.all(color: Colors.red, width: 5.0),
borderRadius:
new BorderRadius.all(const Radius.circular(80.0)),
),
),
),
),
);
}
@override
userImage(File _image) {
setState(() {
this._image = _image;
});
}
}
6. Now create image_picker_handler.dart. It will handle user interface of image picker widget or dialog. Here, we have created openCarmra and openGallery methods to get an image. In this file, we have created cropImage method. As you can see.
if you want to use this class. Then you have to call init method to create an instance of image picker dialog. After that call showDialog method for show image picker. 7. At the end, create a final class of project that is image_picker_dialog.dart. Here, we have defined getImage method that we calling from image_picker_halder.dart. It will show a dialog with a bottom to up slide animation. As you can see above video.
in this file, we have created a reusable method roundedButton. By using this method, we have created the following image picker and a cancel button on the dialog.
image_picker_dialog.dart
Widget roundedButton(
String buttonLabel, EdgeInsets margin, Color bgColor, Color textColor) {
var loginBtn = new Container(
margin: margin,
padding: EdgeInsets.all(15.0),
alignment: FractionalOffset.center,
decoration: new BoxDecoration(
color: bgColor,
borderRadius: new BorderRadius.all(const Radius.circular(100.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: const Color(0xFF696969),
offset: Offset(1.0, 6.0),
blurRadius: 0.001,
),
],
),
child: Text(
buttonLabel,
style: new TextStyle(
color: textColor, fontSize: 20.0, fontWeight: FontWeight.bold),
),
);
return loginBtn;
}
as you can see a final class of image_picker_dialog.dart. We have called above method in the build method. Here, we have final class.
Besides just picking images from gallery and camera. You can crop it with desired aspect ratio. It is very important if you noticed every app like Facebook, Google etc asks you to crop the image into a square because it fits the best for different use cases.
> 
for display selected and cropped image, we have used another widget group.
after that merge all code snippet and you will see final home_screen.dart look like below.
if you want to use this class. Then you have to call init method to create an instance of image picker dialog. After that call showDialog method for show image picker. 
