how to implement slider in overlay?? flutter, dart - flutter

Question

Hi im new to flutter and making a drawing app. I making a Icon button that show overlay implemented Slider widget.
this is my code and Im using a Provider package.
main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home:
ChangeNotifierProvider(
create: (context) => DrawingProvider(),
child: BlankPage()),
),
);
}
// Main Page
class BlankPage extends StatefulWidget {
const BlankPage({Key? key}) : super(key: key);
#override
State<BlankPage> createState() => _BlankPageState();
}
class _BlankPageState extends State<BlankPage> {
#override
Widget build(BuildContext context) {
var p = Provider.of<DrawingProvider>(context);
return GestureDetector(
child: Scaffold(
appBar: AppBar(title: Text('Workbook Test')),
body: Column(
children: [
Container(
width: double.infinity,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
penWidget(p: p),
highlighterWidget(p: p),
erasePenWidget(p: p),
SliderOverlayWidget(),
.
.
.
// ... Slider Overlay Widget I tried to make
class SliderOverlayWidget extends StatefulWidget {
const SliderOverlayWidget({
Key? key,
}) : super(key: key);
#override
State<SliderOverlayWidget> createState() => _SliderOverlayWidgetState();
}
class _SliderOverlayWidgetState extends State<SliderOverlayWidget> {
OverlayEntry? entry;
#override
void initState() {
super.initState();
WidgetsBinding.instance!.addPostFrameCallback((_) => showOverlay() );
}
#override
Widget build(BuildContext context) {
return Container(
width: 60,
child: FittedBox(
fit: BoxFit.fitWidth,
child: GestureDetector(
onTap: () {
showOverlay();
},
child: Icon(
Icons.horizontal_rule_rounded,
color: Colors.black54,
),
),
),
);
}
void showOverlay() {
final overlay = Overlay.of(context)!;
entry = OverlayEntry(builder: (context) => buildSliderOverlay(),);
overlay.insert(entry!);
}
}
StatefulWidget buildSliderOverlay() {
return StatefulBuilder(
builder: (context, setState) {
var p = Provider.of<DrawingProvider>(context);
return Container(
width: 100,
child: Row(
children: [
Slider(value: p.penSize, onChanged: (size) {
p.changePenSize = size;
},
min: 3,
max: 15,)
],
),
);
},
);
}
DrawingProvider.dart
class DrawingProvider extends ChangeNotifier {
// pen size
double _penSize = 3;
double get penSize => _penSize;
set changePenSize(double size) {
_penSize = penSize;
notifyListeners();
}
when I run the App, errors are like
Erros
Error: Could not find the correct Provider<DrawingProvider> above this StatefulBuilder Widget
This happens because you used a `BuildContext` that does not include the provider
of your choice. There are a few common scenarios:
- You added a new provider in your `main.dart` and performed a hot-reload.
To fix, perform a hot-restart.
- The provider you are trying to read is in a different route.
Providers are "scoped". So if you insert of provider inside a route, then
other routes will not be able to access that provider.
- You used a `BuildContext` that is an ancestor of the provider you are trying to read.
Make sure that StatefulBuilder is under your MultiProvider/Provider<DrawingProvider>.
This usually happens when you are creating a provider and trying to read it immediately.
For example, instead of:
```
Widget build(BuildContext context) {
return Provider<Example>(
create: (_) => Example(),
// Will throw a ProviderNotFoundError, because `context` is associated
// to the widget that is the parent of `Provider<Example>`
child: Text(context.watch<Example>().toString()),
);
}
```
consider using `builder` like so:
```
Widget build(BuildContext context) {
return Provider<Example>(
create: (_) => Example(),
// we use `builder` to obtain a new `BuildContext` that has access to the provider
builder: (context, child) {
// No longer throws
return Text(context.watch<Example>().toString());
}
);
}
```
If none of these solutions work, consider asking for help on StackOverflow:
Thank you
I referenced this
https://www.youtube.com/watch?v=OOEyJ0ct0Sg
How to show Slider dialog widget in flutter