Blog

In this tutorial we will see how to create gallery apps in android. A gallery app is responsible for displaying an array of pictures. Such pictures can be obtained from online or locally from the assets or even picked from the device.

Let us look at some examples.

Example 1: Hello World Gallery App

In this example we create a gallery app. The source of our images is the assets. Meaning that we work with local images hence no special permissions or libraries are needed.

Step 1: Create Project

The first step is to create your flutter project.

Step 2: Add Dependencies

We do not need any external packages for this example.

Step 3: Add Images

Because we are working with local images, we need to add some images in the assets folder. The assets will thus be our local source of our images. So go ahead and add some images to the assets.

Once you've added the images, we need to register these images in the pubspec.yaml file, as follows:

  assets:
    - assets/wallpaper-1.jpeg
    - assets/wallpaper-2.jpeg
    - assets/wallpaper-3.jpeg

Step 4: Write Code

Next is to add imports in your main.dart file. We have only one import to make:

import 'package:flutter/material.dart';

All flutter apps have the main() function as the entry point of the app. Thus we need to initialize and run our MyApp() here:

void main() => runApp(MyApp());

We will then build a Stateless widget called MyApp by extending the StatelessWidget class:

class MyApp extends StatelessWidget {

We then override the build() function and pass it a Context object:

  @override
  Widget build(BuildContext context) {

We will return a MaterialApp object. Pass in the title, themeData and home as parameters:

    return MaterialApp(
      title: 'Gallery Demo',
      theme: ThemeData(primarySwatch: Colors.lightGreen),
      home: DisplayPage(),
    );
  }
}

Extend another stateless widget called the DisplayPage:

class DisplayPage extends StatelessWidget {

Then initialize an list of strings and pass it the image references. Remember we are referencing our images from the assets folder:

  final List<String> images = [
    "assets/wallpaper-1.jpeg",
    "assets/wallpaper-2.jpeg",
    "assets/wallpaper-3.jpeg",
  ];

Then override the build function

 @override
  Widget build(BuildContext context) {

And return a Scaffold object. In the Scaffold pass in the body and build a PageView inside:

    return Scaffold(
      body: Center(
          child: SizedBox.fromSize(
        size: Size.fromHeight(550.0),
        child: PageView.builder(
          controller: PageController(viewportFraction: 0.8),
          itemCount: images.length,
          itemBuilder: (BuildContext context, int index) {
            return new Padding(
              padding: EdgeInsets.symmetric(
                vertical: 16.0,
                horizontal: 8.0,
              ),
              child: Material(
                elevation: 5.0,
                borderRadius: BorderRadius.circular(8.0),
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    Image.asset(
                      images[index],
                      fit: BoxFit.cover,
                    ),
                    DecoratedBox(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: FractionalOffset.bottomCenter,
                          end: FractionalOffset.topCenter,
                          colors: [
                            Color(0x00000000).withOpacity(0.9),
                            Color(0xff000000).withOpacity(0.01),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            );
          },
        ),
      )),
    );
  }
}

Here is the full code:

main.dart

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gallery Demo',
      theme: ThemeData(primarySwatch: Colors.lightGreen),
      home: DisplayPage(),
    );
  }
}
class DisplayPage extends StatelessWidget {
  final List<String> images = [
    "assets/wallpaper-1.jpeg",
    "assets/wallpaper-2.jpeg",
    "assets/wallpaper-3.jpeg",
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: SizedBox.fromSize(
        size: Size.fromHeight(550.0),
        child: PageView.builder(
          controller: PageController(viewportFraction: 0.8),
          itemCount: images.length,
          itemBuilder: (BuildContext context, int index) {
            return new Padding(
              padding: EdgeInsets.symmetric(
                vertical: 16.0,
                horizontal: 8.0,
              ),
              child: Material(
                elevation: 5.0,
                borderRadius: BorderRadius.circular(8.0),
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    Image.asset(
                      images[index],
                      fit: BoxFit.cover,
                    ),
                    DecoratedBox(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: FractionalOffset.bottomCenter,
                          end: FractionalOffset.topCenter,
                          colors: [
                            Color(0x00000000).withOpacity(0.9),
                            Color(0xff000000).withOpacity(0.01),
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            );
          },
        ),
      )),
    );
  }
}

Run

Copy the code into your project or download the code in the reference links below.

Reference

Find the reference links below:

Number	Link
1.	Download code
2.	Follow code author