Flutter – Load Images with image.file
In this article, we will learn how to show file images in Flutter. There is an image widget available in Flutter. In that, you may have to use Image.network, Image.asset, Image.memory. But have you used Image.file? Maybe you have used it. If not then Let’s learn about this. Sometimes we have to show images stored in our device to the Flutter application. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Select an image from the device
So how you will get the file from your device? If you know about this you are good to go if not read this article for getting images from the camera, and gallery of your device. Refer to this How to Select Multiple Images From image_picker in Flutter? From this you have got the file but how you will show it in your app?
Step 3: Show it in the application
Let’s discuss the syntax of the widget. There are two ways to show an image both are using the same widget just minor changes are there
Syntax:
Widget fileImage= Image.file(file_you_want_to _show);
// you can replace file_you_want_to _show by variable name of your file
or
Syntax:
Widget fileImage= Image(image: FileImage(file_you_want_to),);
Both the Syntax is similar in some way. We have selected the images from the device from the previous article. Now just we want to show the image. Here is the code for that.
Dart
GridView.builder( // length of file you have selected itemCount: selectedImages.length, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3), itemBuilder: (BuildContext context, int index) { return Center( // If it is web then you have use Image.network // Image.file will not work child: kIsWeb ? Image.network( selectedImages[index].path, // Height of image selected height: 100, // Width of image selected width: 100, // fit image in its width and height fit: BoxFit.fill, // set the alignment of image alignment: Alignment.center, ) : Image.file(selectedImages[index], // Height of image selected height: 100, // width of image selected width: 100, // fit image in its width and height fit: BoxFit.fill, // set the alignment of image alignment: Alignment.center, )); }, ) |
Property of Image included in code
- height: To give height to the image. It takes double as its value. It gives the image the vertical length
- width: To give width to the image. It also takes double as its value. It gives the image of the horizontal length
- fit: This property is used to fit the image according to our needs.
- color: This is used to give color to your image.
- alignment: To align the image
Note: This will only apply to android and ios for the web you have to use image.network
Full Source Code
Dart
import 'dart:io' ; import 'package:flutter/foundation.dart' ; import 'package:flutter/material.dart' ; import 'package:image_picker/image_picker.dart' ; void main() { runApp( const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(primaryColor: Colors.green), home: const MultipleImageSelector(), debugShowCheckedModeBanner: false , ); } } class MultipleImageSelector extends StatefulWidget { const MultipleImageSelector({super.key}); @override State<MultipleImageSelector> createState() => _MultipleImageSelectorState(); } class _MultipleImageSelectorState extends State<MultipleImageSelector> { List<File> selectedImages = []; final picker = ImagePicker(); @override Widget build(BuildContext context) { // display image selected from gallery return Scaffold( appBar: AppBar( title: const Text( 'File image select' ), backgroundColor: Colors.green, actions: const [], ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const SizedBox( height: 20, ), ElevatedButton( style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Colors.green)), child: const Text( 'Select File Image' ), onPressed: () { getImages(); }, ), const Padding( padding: EdgeInsets.symmetric(vertical: 18.0), child: Text( "GFG" , textScaleFactor: 3, style: TextStyle(color: Colors.green), ), ), Expanded( child: SizedBox( width: 300.0, child: selectedImages.isEmpty ? const Center(child: Text( 'Sorry nothing selected!!' )) : GridView.builder( itemCount: selectedImages .length, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3), itemBuilder: (BuildContext context, int index) { return Center( child: kIsWeb ? Image.network( selectedImages[index].path, height: 100, width: 100, fit: BoxFit .fill, alignment: Alignment .center, ) : Image.file( selectedImages[index], height: 100, width: 100, fit: BoxFit .fill, alignment: Alignment .center, )); }, ), ), ), ], ), ), ); } Future getImages() async { final pickedFile = await picker.pickMultiImage( requestFullMetadata: true , imageQuality: 100, maxHeight: 1000, maxWidth: 1000); List<XFile> xfilePick = pickedFile; setState( () { if (xfilePick.isNotEmpty) { for (var i = 0; i < xfilePick.length; i++) { selectedImages.add(File(xfilePick[i].path)); } } else { ScaffoldMessenger.of(context).showSnackBar( // is this context <<< const SnackBar(content: Text( 'Nothing is selected' ))); } }, ); } } |
Output:
Here you can see the video of how we have selected the image and shown in the application.