Flutter – How to restrict showModalBottomSheet dismissing while tapping outside?

I have two pages and am navigating to the second with showModalBottomSheet. On the second page, I used DraggableScrollableSheet. When the text form field is empty, I must restrict the bottom sheet dismissal while tapping outside. I have restricted the bottom sheet dimissing by swipe down funtionality, I have no idea how to retrict the bottom sheet dismissing while tapping outside. Is there is any possible option?

This is the sample code,

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Draggable scrollable sheet example'),
        backgroundColor: Colors.teal,
      ),
      body: Center(
        child: ElevatedButton(
            child: const Text('Bottom sheet'),
            onPressed: () {
              showModalBottomSheet(
                clipBehavior: Clip.hardEdge,
                context: context,
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(16),
                    topRight: Radius.circular(16),
                  ),
                ),
                backgroundColor: Colors.transparent,
                enableDrag: false,
                isDismissible: true,
                isScrollControlled: true,
                builder: (BuildContext context) => BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
                  child: const DraggablePage(),
                ),
              );
            }),
      ),
    );
  }
}

class DraggablePage extends StatefulWidget {
  const DraggablePage({super.key});

  @override
  State<DraggablePage> createState() => _DraggablePageState();
}

class _DraggablePageState extends State<DraggablePage> {
  DraggableScrollableController draggableScrollableController =
      DraggableScrollableController();
  final TextEditingController _controller = TextEditingController();
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  bool isValidField = true;

  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      maxChildSize: 0.8,
      minChildSize: 0.2,
      controller: draggableScrollableController,
      builder: (BuildContext context, ScrollController scrollController) =>
          Scaffold(
        appBar: AppBar(
          title: isValidField
              ? ScrollConfiguration(
                  behavior: const ScrollBehavior(),
                  child: SingleChildScrollView(
                      controller: scrollController,
                      child: const Text('Draggable scrollable sheet example')),
                )
              : const Text('Draggable scrollable sheet example'),
          backgroundColor: Colors.teal,
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Form(
              key: _formKey,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    controller: _controller,
                    onChanged: (String value) {
                      setState(() {});
                    },
                    validator: (String? value) {
                      
                      if (_controller.text.isEmpty) {
                        isValidField = false;
                        setState(() {});
                        return 'This field cannot be empty';
                      }
                      isValidField = true;
                      setState(() {});
                      return null;
                    },
                    decoration:
                        const InputDecoration(hintText: 'Enter text here'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      if (_formKey.currentState!.validate()) {
                        Navigator.pop(context);
                      }
                    },
                    child: const Text('Back'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}