blob: 3ea4ced58ada69237417f243ed2c7689c1999c72 [file] [log] [blame]
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'dart:io';
import 'package:file_selector_platform_interface/file_selector_platform_interface.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
/// Screen that allows the user to select multiple image files using
/// `openFiles`, then displays the selected images in a gallery dialog.
class OpenMultipleImagesPage extends StatelessWidget {
/// Default Constructor
const OpenMultipleImagesPage({super.key});
Future<void> _openImageFile(BuildContext context) async {
const XTypeGroup jpgsTypeGroup = XTypeGroup(
label: 'JPEGs',
extensions: <String>['jpg', 'jpeg'],
uniformTypeIdentifiers: <String>['public.jpeg'],
);
const XTypeGroup pngTypeGroup = XTypeGroup(
label: 'PNGs',
extensions: <String>['png'],
uniformTypeIdentifiers: <String>['public.png'],
);
final List<XFile> files = await FileSelectorPlatform.instance
.openFiles(acceptedTypeGroups: <XTypeGroup>[
jpgsTypeGroup,
pngTypeGroup,
]);
if (files.isEmpty) {
// Operation was canceled by the user.
return;
}
if (context.mounted) {
await showDialog<void>(
context: context,
builder: (BuildContext context) => MultipleImagesDisplay(files),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Open multiple images'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
),
child: const Text('Press to open multiple images (png, jpg)'),
onPressed: () => _openImageFile(context),
),
],
),
),
);
}
}
/// Widget that displays a text file in a dialog.
class MultipleImagesDisplay extends StatelessWidget {
/// Default Constructor.
const MultipleImagesDisplay(this.files, {super.key});
/// The files containing the images.
final List<XFile> files;
@override
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('Gallery'),
// On web the filePath is a blob url
// while on other platforms it is a system path.
content: Center(
child: Row(
children: <Widget>[
...files.map(
(XFile file) => Flexible(
child: kIsWeb
? Image.network(file.path)
: Image.file(File(file.path))),
)
],
),
),
actions: <Widget>[
TextButton(
child: const Text('Close'),
onPressed: () {
Navigator.pop(context);
},
),
],
);
}
}