List Images in Flutter Mobile Application

This post will guide you through the process of listing images in a Flutter mobile application using different approaches.

List Images in Flutter Mobile Application

Getting Started

In mobile app development, displaying a list of images is a fundamental requirement in many use cases, from product galleries and social media feeds to news apps and image portfolios. Flutter, with its rich widget library and powerful rendering engine, provides elegant ways to display images from assets, the internet, or the device’s local storage.

Display Asset Images In Fullter App

Displaying asset images in Flutter programming is straightforward. Just add your image files, declare them in pubspec.yaml, and use the Image.asset() widget. With this simple process, you can enhance the UI of your Flutter apps with static images.

Here are the list of steps and code to display assets image in flutter mobile app

Create an assets directory in your project root if one doesn't already exist:

 your_project/  
 └── assets/  
   └── images/  
     └── logo.png

Move your images into the assets/images/ directory.
Declare Assets in pubspec.yaml, Make sure to maintain correct indentation in pubspec.yaml (use 2 spaces).
```
 flutter:  
  assets:  
   - assets/images/logo.png  
```

Flutter Promgramming To Display Asset Images

 import 'package:flutter/material.dart';  
 void main() => runApp(MyApp());  
 class MyApp extends StatelessWidget {  
  //const MyApp({super.key});  
  final List<String> imagePaths = [  
   '/MAKEUP1.jpg',  
   '/MAKEUP2.jpg',  
   '/MAKEUP3.jpg',  
   '/MAKEUP4.jpg',  
   '/MAKEUP5.jpg',  
  ];  
  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
   return MaterialApp(  
    title: 'My First Fullter Mobile app',  
    theme: ThemeData(  
     colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),  
    ),  
    home: Scaffold(  
     appBar: AppBar(title: Text('Image List')),  
     body: ListView.builder(  
      itemCount: imagePaths.length,  
      itemBuilder: (context, index) {  
       return Card(  
        child: Column(  
         children: [  
          Image.asset(imagePaths[index], height: 100, width: 100),  
          SizedBox(height: 8),  
          Text(imagePaths[index].split('/').last),  
         ],  
        ),  
       );  
      },  
      //const MyHomePage(title: 'My First Flutter Mobile App'),  
     ),  
    ),  
   );  
  }  
 }

Display Internet Images (Online Images) in Flutter App

Displaying images from the internet is a common requirement in many mobile applications, especially when working with dynamic content such as product images, user profile pictures, or media feeds.

Flutter provides the Image.network() widget which makes it easy to load and display images from the web.

Flutter Programming

 import 'package:flutter/material.dart';  
 void main() => runApp(const MyApp());  
 class MyApp extends StatelessWidget {  
  const MyApp({super.key});  
  final List<String> imageUrls = const [  
   'https://app.photos/id/1015/400/300',  
   'https://app.photos/id/1025/400/300',  
   'https://app.photos/id/1035/400/300',  
   'https://app.photos/id/1045/400/300',  
  ];  
  @override  
  Widget build(BuildContext context) {  
   return MaterialApp(  
    home: Scaffold(  
     appBar: AppBar(title: const Text('Multiple Images from Internet')),  
     body: ListView.builder(  
      itemCount: imageUrls.length,  
      itemBuilder: (context, index) {  
       return Padding(  
        padding: const EdgeInsets.all(8.0),  
        child: Image.network(imageUrls[index]),  
       );  
      },  
     ),  
    ),  
   );  
  }  
 }

Display Local Storage Image In Fullter App

To display an image from local storage in a Flutter app, you can use the Image.file() widget in combination with the dart:io library.

 import 'dart:io';  
 import 'package:flutter/material.dart';  
 void main() => runApp(const MaterialApp(home: LocalFolderImageViewer()));  
 class LocalFolderImageViewer extends StatefulWidget {  
  const LocalFolderImageViewer({super.key});  
  @override  
  State<LocalFolderImageViewer> createState() => _LocalFolderImageViewerState();  
 }  
 class _LocalFolderImageViewerState extends State<LocalFolderImageViewer> {  
  List<File> imageFiles = [];  
  final String folderPath = '/storage/emulated/0/Download'; // Example folder  
  @override  
  void initState() {  
   super.initState();  
   loadImagesFromFolder();  
  }  
  void loadImagesFromFolder() async {  
   final dir = Directory(folderPath);  
   final files = dir  
     .listSync()  
     .where((f) =>  
       f is File &&  
       (f.path.endsWith('.jpg') ||  
        f.path.endsWith('.png') ||  
        f.path.endsWith('.jpeg')))  
     .map((f) => File(f.path))  
     .toList();  
   setState(() {  
    imageFiles = files;  
   });  
  }  
  @override  
  Widget build(BuildContext context) {  
   return Scaffold(  
    appBar: AppBar(title: const Text('Local Folder Images')),  
    body: imageFiles.isEmpty  
      ? const Center(child: Text('No images found.'))  
      : GridView.builder(  
        padding: const EdgeInsets.all(8),  
        itemCount: imageFiles.length,  
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(  
         crossAxisCount: 2,  
         crossAxisSpacing: 8,  
         mainAxisSpacing: 8,  
        ),  
        itemBuilder: (context, index) {  
         return Image.file(  
          imageFiles[index],  
          fit: BoxFit.cover,  
         );  
        },  
       ),  
   );  
  }  
 }

Note:- You may face permission issue, hence you need to add required permissions and if you

Summary

Listing images in a Flutter app can be as simple or complex as your project demands. Whether you're working with local assets, fetching from the internet, or accessing device storage, Flutter offers intuitive tools to make the process smooth. For better performance and UX, always consider caching and lazy loading when dealing with a large number of images.

Thanks

List Images in Flutter Mobile Application