ModalBarrier Widget
Project Preview
- Interested in seeing the live demo? Click here to explore.
- Want to view the source code? Visit the project on GitHub.
Code Snippet
import 'package:flutter/material.dart';
class ModalBarrierWidget extends StatefulWidget {
const ModalBarrierWidget({super.key});
@override
State<ModalBarrierWidget> createState() => _ModalBarrierWidgetState();
}
class _ModalBarrierWidgetState extends State<ModalBarrierWidget> {
bool activated = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("ModalBarrier Widget"),
),
body: Stack(
children: [
Center(
child: ElevatedButton(
onPressed: () {
setState(() {
activated = !activated;
});
},
child: const Text('Reactivate'),
),
),
if (activated)
Opacity(
opacity: 0.4,
child: ModalBarrier(
dismissible: true,
// dismissible: false,// neve remove modal barrier
onDismiss: () {
setState(() {
activated = !activated;
// print('yes');
});
},
color: Colors.orangeAccent,
),
)
],
),
);
}
}
/*
* A widget that prevents the user from interacting with widgets
* behind itself. The modal barrier is the scrim that is rendered behind
* each route, which generally prevents the user from interacting with
* the route below the current route, and normally partially obscures such routes.
*
* */