How to get Flutter dialog to disappear? - flutter

Question

I have been trying to figure out how to get my flutter dialog to disappear. I have tried everything and nothing I do will get rid of it until after the method finishes processing.
Background: Make an application that allows a user to select images from their device and then zip that up with a user defined name (received in the AlertDialog that will not go away immediately).
The things I have tried to get the AlertDialog to go away immediately:
Navigator.of(context).pop()
Navigator.pop(context)
Navigator.of(context, rootNavigator: true).pop()
Tried to make sure the method after it was called asynchronously so it would not block
Added imports in pubspec.yaml
path_provider: ^2.0.2
archive: ^3.1.2
file_picker: ^4.0.3
Code Below:
import 'dart:io';
import 'package:archive/archive_io.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const HomePage(title: 'Flutter Demo Home Page'),
);
}
}
class HomePage extends StatefulWidget {
final String title;
const HomePage({required this.title, Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
late final Directory _uploadsDir;
#override
void initState() {
super.initState();
_init();
}
#override
void dispose() async {
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ElevatedButton(
onPressed: () => _importFilesSelected(context),
child: const Text("Select Images"),
),
),
);
}
void _init() async {
Directory dir = await getApplicationDocumentsDirectory();
_uploadsDir = await Directory(join(dir.path, "uploads")).create(recursive: true);
}
void _importFilesSelected(BuildContext context) async {
final BuildContext buildContext = context;
FilePickerResult? result = await FilePicker.platform.pickFiles(
dialogTitle: "Select File(s) to Import",
allowMultiple: true,
type: FileType.custom,
allowedExtensions: ['jpg', 'png'],
onFileLoading: (FilePickerStatus status) {
if (status == FilePickerStatus.picking) {
showDialog(
context: buildContext,
barrierDismissible: false,
builder: (BuildContext context) {
return Dialog(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
CircularProgressIndicator(),
SizedBox(width: 10.0,),
Text("Processing Files..."),
],
),
),
);
},
);
} else {
Navigator.pop(buildContext);
}
},
withData: false
);
_processResult(result, buildContext);
}
void _processResult(FilePickerResult? result, BuildContext buildContext) async {
if (result != null) {
String? zipFilename = await _showGetZipFileNameDialog(buildContext);
print("zipFileName: $zipFilename");
_processImagesIntoZip(result, zipFilename!);
}
}
void _processImagesIntoZip(FilePickerResult result, String zipFilename) async {
String zipPath = join(_uploadsDir.path, zipFilename);
final encoder = ZipFileEncoder();
encoder.create(zipPath);
for (PlatformFile file in result.files) {
encoder.addFile(File(file.path!));
}
}
Future<String?> _showGetZipFileNameDialog(BuildContext context) {
String? zipFilename;
return showDialog<String>(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
title: const Text("Save As"),
content: Form(
key: _formKey,
child: TextFormField(
decoration: const InputDecoration(
labelText: "Save As:",
),
validator: (val) {
return val!.isEmpty ? "Please fill out filename" : null;
},
onSaved: (val) => zipFilename = "${val!}.zip",
),
),
actions: [
TextButton(
child: const Text("Cancel"),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: const Text("OK"),
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// Remove the Dialog from the screen
Navigator.pop(context, zipFilename);
}
},
),
],
);
}
);
}
}

Answer 1

I had similar issue
Was fixed using
Navigator.pop(context);

Answer 2

Navigator.pop(context) is the right answer, so if it is not working it means something is off.
Did you create 2 Navigators? That happens when u accidentably create a new MaterialApp instead of Scaffold, for example.