Flutter Kullanıcıya Resim Seçtirme
Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda kullanıcıya telefonundan resim seçtirmeyi anlatacağım. Hadi başlayalım !
Table of Contents
Flutter, kullanıcıların uygulamanızda resim seçmelerine olanak tanıyan birçok seçenek sunar. Bu makalede, kullanıcıdan resim seçtirmenin çeşitli yollarını ve bunları uygulamanıza nasıl uygulayacağınızı öğreneceksiniz. Ayrıca, her bir yöntemi uygulamak için kullanabileceğiniz kod örnekleri de sunacağız.
Galeri veya Kamera’dan Resim Seçmek
Flutter’da, kullanıcının galeri veya kamera ile resim seçebilmesini sağlayan birçok paket vardır. Bu örnekte, flutter_image_picker paketini kullanacağız. Bu paket, kullanıcının cihazındaki galeri veya kameradan resim seçmesini sağlar.
Öncelikle, flutter_image_picker paketini projenize ekleyin. Daha sonra, aşağıdaki kodu kullanarak kullanıcının galeri veya kamera ile resim seçmesine izin verebilirsiniz:
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
class ImagePickerScreen extends StatefulWidget {
@override
_ImagePickerScreenState createState() => _ImagePickerScreenState();
}
class _ImagePickerScreenState extends State {
File _image;
Future _getImage(ImageSource source) async {
final pickedFile = await ImagePicker().getImage(source: source);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Image Picker')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_image == null ? Text('Resim Seçilmedi.') : Image.file(, height: 200),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _getImage(ImageSource.gallery),
child: Text('Galeriden Seç'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _getImage(ImageSource.camera),
child: Text('Yeni Resim Çek'),
),
],
),
),
);
}
}
Bu kod, kullanıcının galeriden veya kameradan bir resim seçmesine izin verir ve seçilen resmi bir Image widget’ı kullanarak gösterir. Ayrıca, seçilen resmi File nesnesi olarak kaydeder.
Resim Seçimi için ImagePicker Plugin’ini Kullanma
Bir diğer seçenek ise resim seçimi için image_picker plugin’ini kullanmaktır. Bu plugin, kullanıcının galeriden veya kameradan resim seçmesine olanak tanır ve seçilen resmi Uint8List veya File olarak döndürür.
Öncelikle, image_picker paketini projenize ekleyin. Daha sonra, aşağıdaki kodu kullanarak kullanıcının galeri veya kamera ile resim seçmesine izin verebilirsiniz:
import 'dart:io';
import 'image_picker/image_picker.dart';
import 'package:flutter/material.dart';
class ImagePickerScreen extends StatefulWidget {
@override
_ImagePickerScreenState createState() => _ImagePickerScreenState();
}
class _ImagePickerScreenState extends State {
File _image;
Future _getImage(ImageSource source) async {
final pickedFile = await ImagePicker().getImage(source: source);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Image Picker')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_image == null ? Text('Resim Seçilmedi.') : Image.file(_image, height: 200),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _getImage(ImageSource.gallery),
child: Text('Galeriden Seç'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _getImage(ImageSource.camera),
child: Text('Yeni Resim Çek'),
),
],
),
),
);
}
}
Bu kod, kullanıcının galeriden veya kameradan bir resim seçmesine izin verir ve seçilen resmi bir Image widget’ı kullanarak gösterir. Ayrıca, seçilen resmi File nesnesi olarak kaydeder.
Resim Seçimi için ImagePickerSaver Plugin’ini Kullanma
Bir diğer seçenek ise resim seçimi için image_picker_saver plugin’ini kullanmaktır. Bu plugin, kullanıcının galeriden veya kameradan resim seçmesine olanak tanır ve seçilen resmi kaydetmek için kaydetme işlemi için de bir seçenek sunar.
Öncelikle, image_picker_saver paketini projenize ekleyin. Daha sonra, aşağıdaki kodu kullanarak kullanıcının galeri veya kamera ile resim seçmesine izin verebilirsiniz:
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_picker_saver/image_picker_saver.dart';
class ImagePickerScreen extends StatefulWidget {
@override
_ImagePickerScreenState createState() => _ImagePickerScreenState();
}
class _ImagePickerScreenState extends State {
Uint8List _imageData;
Future _getImage(ImageSource source) async {
final pickedFile = await ImagePicker().getImage(source: source);
if (pickedFile != null) {
final imageData = await pickedFile.readAsBytes();
setState(() => _imageData = imageData);
await ImagePickerSaver.saveFile(
fileData: imageData,
fileName: 'image.png',
title: 'Resmi Kaydet',
description: 'Resmi Galeriye Kaydet',
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Image Picker')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_imageData == null ? Text('Resim Seçilmedi.') : Image.memory(_imageData, height: 200),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _getImage(ImageSource.gallery),
child: Text('Galeriden Seç'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => _getImage(ImageSource.camera),
child: Text('Yeni Resim Çek'),
),
],
),
);
}
}
Bu kod, kullanıcının galeriden veya kameradan bir resim seçmesine izin verir ve seçilen resmi bir Image widget’ı kullanarak gösterir. Ayrıca, seçilen resmi Uint8List nesnesi olarak kaydeder ve image_picker_saver plugin’i aracılığıyla kaydeder.
Sonuç
Flutter ile kullanıcıdan resim seçtirme oldukça basit ve kolaydır. ImagePicker ve image_picker_saver pluginleri, bu işlemi gerçekleştirmek için kullanabileceğiniz iki popüler seçenektir. Bu yazıda, bu iki plugini kullanarak kullanıcıdan resim seçme işlemini nasıl gerçekleştireceğinizi öğrendiniz. Umarız bu yazı, Flutter uygulamalarınızda kullanıcılarınızın resim seçme ihtiyaçlarını karşılamak için yararlı olmuştur.
Evet kullanıcıya telefonundan resim seçtirme bu şekilde yapılmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.
