Flutter

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 !

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.

Skorumuz:
Oy Vermek İçin Tıklayın
[Toplam: 0 Ortalama: 0]

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu