Image Gallery in flutter from assets - flutter

Question

I want to load all the images from assets folder in my flutter app Select Picture screen. And when the user selects and image it will take half space in another screen. So it's very similar to the regular edit image functionality in our phone.
This is what I want after the user has selected an image.
I've successfully added all the images to a screen called gallery:
And this is how I did it:
import 'package:flutter/material.dart';
import 'package:flutter_app/src/components/ImageDetails.dart';
List<ImageDetails> _images = [
ImageDetails(
imagePath: 'assets/images/hut.png',
title: 'Hutt',
),
ImageDetails(
imagePath: 'assets/images/scenary.png',
title: 'Scenary',
),
ImageDetails(
imagePath: 'assets/images/menu.png',
title: 'Menu Bar',
),
];
class ImageSelection extends StatefulWidget {
#override
_ImageSelectionState createState() => _ImageSelectionState();
}
class _ImageSelectionState extends State<ImageSelection> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlueAccent,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 40,
),
Text(
'Gallery',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
color: Colors.white,
),
textAlign: TextAlign.center,
),
SizedBox(
height: 40,
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 30,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) {
return RawMaterialButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsPage(
imagePath: _images[index].imagePath,
title: _images[index].title,
index: index,
),
),
);
},
child: Hero(
tag: 'logo$index',
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage(_images[index].imagePath),
fit: BoxFit.cover,
),
),
),
),
);
},
itemCount: _images.length,
),
),
)
],
),
),
);
}
}
class ImageDetails {
final String imagePath;
final String title;
ImageDetails({
#required this.imagePath,
#required this.title,
});
}
But I want to do this dynamically so if I add a new image in assets the application will automatically show the images. And on select the image will take below shown space in the canvas page?

Answer 1

import 'dart:collection';
import 'package:flutter/material.dart';
import 'dart:io';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:flutter_image_gallery/flutter_image_gallery.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
Map<dynamic, dynamic> allImageInfo = new HashMap();
List allImage = new List();
#override
void initState() {
super.initState();
loadImageList();
}
Future<void> loadImageList() async {
Map<dynamic, dynamic> allImageTemp;
allImageTemp = await FlutterImageGallery.getAllImages;
print(" call $allImageTemp.length");
setState(() {
this.allImage = allImageTemp['URIList'] as List;
});
}
#override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: new AppBar(
title: const Text('Image Gallery'),
),
body: _buildGrid(),
),
);
}
Widget _buildGrid() {
return GridView.extent(
maxCrossAxisExtent: 150.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: _buildGridTileList(allImage.length));
}
List<Container> _buildGridTileList(int count) {
return List<Container>.generate(
count,
(int index) => Container(
child: new Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.file(
File(allImage[index].toString()),
width: 96.0,
height: 96.0,
fit: BoxFit.contain,
),
],
)));
}
}
Dont Forget to Import :
dependencies:
flutter_image_gallery: ^1.0.6