Create a Stunning Photo Gallery App in Flutter: A Step-by-Step Guide

Building a Photo Gallery App in Flutter: A Step-by-Step Guide

Are you looking to create a stunning photo gallery app in Flutter? Look no further! In this comprehensive guide, we’ll walk you through the process of building a beautiful and functional photo gallery app using the image_editor package in Flutter.

Prerequisites

Before we dive into the tutorial, make sure you have the following:

• Flutter installed on your machine
• Dependencies (imagesizegetter, imageeditor, photoview) added to your project
• A cup of coffee (optional, but highly recommended)

Building the Homepage

The first step is to create a new Flutter project and set up the homepage. We’ll create a simple grid layout to display our images.

“`dart
import ‘package:flutter/material.dart’;

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

class _MyHomePageState extends State {
List _images = [
‘assets/image1.jpg’,
‘assets/image2.jpg’,
‘assets/image3.jpg’,
‘assets/image4.jpg’,
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Photo Gallery’),
),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: images.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
// Navigate to image index
},
child: Image.asset(images[index]),
);
},
),
);
}
}
“`

Creating the Organized Feature

Next, we’ll create a feature to sort our images by size and name. We’ll add four callback functions to sort the images in ascending and descending order.

“`dart
class _MyHomePageState extends State {
// …

void _sortImagesByIncreasingSize() {
setState(() {
_images.sort((a, b) {
return a.length.compareTo(b.length);
});
});
}

void _sortImagesByDecreasingSize() {
setState(() {
_images.sort((a, b) {
return b.length.compareTo(a.length);
});
});
}

void _sortImagesByNameIncreasing() {
setState(() {
_images.sort((a, b) {
return a.compareTo(b);
});
});
}

void _sortImagesByNameDecreasing() {
setState(() {
_images.sort((a, b) {
return b.compareTo(a);
});
});
}

// …
}
“`

Routing to Image Index

Now, let’s navigate to each image when tapped. We’ll create a new file called gallerywidget.dart and add a GalleryWidget class.

“`dart
class GalleryWidget extends StatefulWidget {
@override
_GalleryWidgetState createState() => _GalleryWidgetState();
}

class _GalleryWidgetState extends State {
int _currentIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
body: PhotoViewGallery.builder(
pageController: PageController(initialPage: currentIndex),
itemCount: _images.length,
builder: (context, index) {
return PhotoViewGalleryPageOptions(
imageProvider: AssetImage(images[index]),
);
},
),
);
}
}
“`

Creating a Bottom Navigation Bar

Finally, let’s add a bottom navigation bar to navigate to the edit page.

“`dart
class _MyHomePageState extends State {
// …

int _currentIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
// …
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.edit), label: ‘Edit’),
],
),
);
}
}
“`

Creating an Edit Feature

Let’s create an edit feature using the image_editor package. We’ll add two editing features: rotation and flipping.

“`dart
class EditScreen extends StatefulWidget {
@override
_EditScreenState createState() => _EditScreenState();
}

class _EditScreenState extends State {
File _image;

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: image != null
? Image.file(image)
: Text(‘No image selected’),
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
final pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
setState(() {
if (pickedFile != null) {
image = File(pickedFile.path);
} else {
print(‘No image selected.’);
}
});
},
tooltip: ‘Pick an image’,
child: Icon(Icons.addaphoto),
),
bottomNavigationBar: BottomAppBar(
child: Row(
children: [
IconButton(
icon: Icon(Icons.rotateleft),
onPressed: () async {
final editedImage = await ImageEditor.editImage(
image: _image,
editOption: EditOption(
rotation: 90,
),
);
setState(() {
_image = editedImage;
});
},
),
IconButton(
icon: Icon(Icons.flip),
onPressed: () async {
final editedImage = await ImageEditor.editImage(
image: _image,
editOption: EditOption(
flip: true,
),
);
setState(() {
_image = editedImage;
});
},
),
],
),
),
);
}
}
“`

That’s it! You now have a complete photo gallery app with editing features.