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')));
}
},
);
}
}