Tutorial Crop Gambar pada Flutter

Pada artikel yang berjudul Tutorial Crop Gambar pada Flutter, kita akan mencoba untuk mengupload gambar kemudian mengcrop gambar tersebut. Kita akan menggunakan plugin atau package yang bernama image_cropper dan juga kita akan menggunakan Image Picker plugin for Flutter untuk mengambil gambar nya.

Ubah pubspec.yaml menjadi seperti ini

dependencies:
  flutter:
    sdk: flutter
  ....
  image_picker: 0.6.6+4
  image_cropper: 1.2.2

lalu jalan flutter pub get dari terminal.

Instalasi Image Picker

Pada penggunaan package Image picker pada iOS kita harus menambahkankeys di dalam file info.plist. Kita akan menambahkan

  • NSPhotoLibraryUsageDescription : Jelaskan mengapa aplikasi kita perlu mengakses galeri
  • NSCameraUsageDescription : Jelaskan mengapa aplikasi kita perlu mengakses kamera
  • NSMicrophoneUsageDescription : Jelaskan mengapa aplikasi kita perlu mengakses mikropon

jadi kira kira akan seperti ini

<key>NSCameraUsageDescription</key>
<string>Untuk mengambil gambar profil dari kamera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Untuk mengambil suara</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Untuk mengambil gambar profil dari galeri</string>

berikut contoh script dalam penggunaan image picker

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File _image;

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Center(
        child: _image == null
            ? Text('No image selected.')
            : Image.file(_image),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}




Dari contoh diatas kita akan menggunakan kamera sebagai cara untuk mengambil gambar. Jika, anda ingin menggunakan galeri sebagai sumber gambar, ubah fungsi getImage menjadi seperti ini

Future getImage() async {
   var image = await ImagePicker.pickImage(source: ImageSource.gallery);

   setState(() {
     _image = image;
   });
 }

Lalu bagaimana cara kita memberikan kebebasan pada user untuk menentukan memilih kamera atau galeri sebagai sumber foto. Untuk masalah tersebut kita akan menggunakan showModalBottomSheet

shoBottomSheets(){
  showModalBottomSheet(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(25.0))),
      backgroundColor: Colors.white,
      context: context,
      isScrollControlled: true,
      builder: (context) => Padding(
        padding: const EdgeInsets.symmetric(horizontal:18 ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.camera_alt),
              title: Text("Pilih gambar dari kamera"),
              onTap: () {
                setState(() {
                  getImage(ImageSource.camera);
                  Navigator.pop(context);
                });
              },
            ),
            ListTile(
              leading: Icon(Icons.image),
              title: Text("Pilih gambar dari Galeri"),
              onTap: () {
                getImage(ImageSource.gallery);
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ));

}

jadi onPressed pada FloatingActionButton kita menjalankan fungsi di atas. Lalu ubah juga fungsigetImage menjadi seperti ini

Future getImage(_source) async {
  var image = await ImagePicker.pickImage(source: _source);
  setState(() {
    _image = image;
  });
}

hasil nya akan seperti ini

Instalasi Image Picker

Crop Gambar pada Flutter

Setelah kita mengambil gambar, langkah selanjutnya adalah meng Crop Gambar. Pada penggunaan image_cropper pada android kita harus mendaftarkan activity dari UCropActivity di dalam AndroidManifest.xml

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

Karena kita akan langsung meng crop gambar setelah gambar terpilih. Salin fungsi dibawah ini

Future<Null> _cropImage() async {
  File croppedFile = await ImageCropper.cropImage(
      sourcePath: _image.path,
      aspectRatioPresets: Platform.isAndroid
          ? [
        CropAspectRatioPreset.square,
        CropAspectRatioPreset.ratio3x2,
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.ratio4x3,
        CropAspectRatioPreset.ratio16x9
      ]
          : [
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.square,
        CropAspectRatioPreset.ratio3x2,
        CropAspectRatioPreset.ratio4x3,
        CropAspectRatioPreset.ratio5x3,
        CropAspectRatioPreset.ratio5x4,
        CropAspectRatioPreset.ratio7x5,
        CropAspectRatioPreset.ratio16x9
      ],
      androidUiSettings: AndroidUiSettings(
          toolbarTitle: 'Cropper',
          toolbarColor: Colors.deepOrange,
          toolbarWidgetColor: Colors.white,
          initAspectRatio: CropAspectRatioPreset.original,
          lockAspectRatio: false),
      iosUiSettings: IOSUiSettings(
        title: 'Cropper',
      ));
  if (croppedFile != null) {
    setState(() {
      _image = croppedFile;
    });
  }
}

Ada beberapa parameter yang bisa kita tambahkan, silahkan cek di sini https://pub.dev/packages/image_cropper#customization

kemudian kita akan mengubah fungsi getImage untuk memanggil fungsi diatas, jadi akan menjadi seperti ini

Future getImage(_source) async {
  var image = await ImagePicker.pickImage(source: _source);
  setState(() {
    _image = image;
    _cropImage();
  });
}

Sekarang kita selesai dalam membahas Tutorial Crop Gambar pada Flutter.  Berikut hasil dari arikel kita kali ini

 

Sekian artikel berjudul Tutorial Crop Gambar pada Flutter, semoga bermanfaat

Tinggalkan Balasan

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!

%d blogger menyukai ini: