Select Image Galary Or Camera in Flutter :
Select Image Galary Or Camera in Flutter : the content overview for this flutter tutorial.
Content Overview
- How to Select image from gallery or camera in flutter?
- Select image from gallery?
- Select image from camera?
- How to get select gallery or camera path in flutter?
- When your application select image,set the widgets image that used to plugin. This program get the current path in selected image from gallery.
- How to Select image from gallery or camera in flutter
Select image gallery: ImagePicker.pickImage(source: ImageSource.gallery);
Select image camera: ImagePicker.pickImage(source: ImageSource.gallery);
pubspec.yaml
name: flutter_app
description: A new Flutter application.
version: 1.0.0+1
environment:
sdk: “>=2.1.0 <3.0.0”
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
image_picker:
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
main.dart
import 'package:flutter/material.dart';
import 'profile_page.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SafeArea(
child: Center(
child: ProfilePage(),
),
),
);
}
}
Screenshot 1 :
Screenshot 2 :
profile_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart';
class ProfilePage extends StatefulWidget {
@override
_ProfilePageState createState() => _ProfilePageState();
}
class _ProfilePageState extends State
with SingleTickerProviderStateMixin {
final FocusNode myFocusNode = FocusNode();
File _image;
String profilePath;
@override
void initState() {
super.initState();
downloadImage(); }
Future getImage() async {
File image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
print('Select image path' + _image.path.toString());
});
}
Future downloadImage() async {
if (profilePath != null) {
var image = new File(profilePath);
setState(() {
_image = image;
});
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: ListView(
children: [
Stack(
children: [
Container(
height: 280.0,
width: double.infinity,
),
Container(
height: 200.0,
width: double.infinity,
color: Colors.orangeAccent,
),
Align(
alignment: Alignment.topLeft,
child: IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
color: Colors.white,
),
),
Positioned(
top: 125.0,
left: 15.0,
right: 15.0,
child: Material(
elevation: 3.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(bottom: Radius.circular(20.0)),
),
child: Container(
height: 150.0,
/* decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
color: Colors.white),*/
),
),
),
Positioned(
top: 40.0,
left: (MediaQuery
.of(context)
.size
.width / 2 - 70.0),
child: Container(
child: new Column(
children: [
Padding(
padding: EdgeInsets.only(top: 0.0),
child: new Stack(
fit: StackFit.loose, children: [
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Center(
child: _image == null
? new Icon(Icons.camera_alt, color: Colors.grey, size: 140,)
: new CircleAvatar(
backgroundImage: new FileImage(_image),
radius: 65.0,
),
),
],
),
Padding(
padding: EdgeInsets.only(top: 90.0, left: 90.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
new FloatingActionButton(
foregroundColor: Colors.grey,
backgroundColor: Colors.white,
onPressed: getImage,
tooltip: 'Pick Image',
child: Icon(Icons.add_a_photo),
),
],
)),
]),
)
],
),
),
),
Positioned(
top: 200.0,
left: 15.0,
right: 15.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Lakhani Kamlesh',
style: TextStyle(
color: Colors.orange,
fontWeight: FontWeight.bold,
fontSize: 18.0),
),
SizedBox(height: 12.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.description,
color: Colors.grey, size: 20),
Text('Flutter developer lakhani kamlesh',
style: TextStyle(
fontSize: 15.0,
color: Colors.grey),
)
])
],
),
),
],
),
//TODO HERE CONTEXT ADD
],
));
}
@override
void dispose() {
super.dispose();
}
}
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in
