How can i use overlay in flutter?

I have a design like this:

When I click that price icon, an overlay and 2 more buttons appear like in the design. I tried to use a modal barrier for it but I couldn't make it. I put a stack on my Layout and when I click the button, it appears a modal barrier but I can't show the highligted buttons. By the way I am using GetX but I need to understand how I can do it.
This is what I tried:

Stack(
      children: [
        ClassicLayout(
          backgroundColor: Colors.white,
          appBarRequirements: ClassicLayoutAppBarRequirements(
            appBarPadding: const EdgeInsets.symmetric(
              vertical: 20,
            ),
            gradientColors: [
              ColorService.notrGray245,
              ColorService.notrGray245,
            ],
            customAppbar: Column(
              children: [
                SizedBox(
                  height: 50,
                  width: Get.width,
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Positioned(
                        left: 0,
                        child: IconButton(
                          onPressed: () {},
                          icon: SvgPicture.asset(SvgIcon.chevronLeft),
                        ),
                      ),
                      Text(
                        Keywords.myAdvertsHistory.translatedValue,
                        style: const TextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: 20,
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: const [
                    // SingleSelectDropdown(
                    //   dropdownRequirements: SingleSelectDropdownRequirements(
                    //     context: context,
                    //     options: [],
                    //     tag: "myAdvertHistoryDate",
                    //     getProperty: (p0) => null,
                    //     getIdProperty: getIdProperty,
                    //   ),
                    // ),
                  ],
                )
              ],
            ),
          ),
          child: ListView.separated(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
            itemBuilder: (context, index) {
              return Column(
                children: [
                  ElevatedButton(
                    onPressed: () {
                      ShowCaseWidget.of(context).startShowCase([keys[index]]);
                    },
                    child: const Text("abc"),
                  ),
                  WorkCard(
                    isMine: true,
                    isPast: true,
                    index: index,
                    // globalKey: keys[index],
                    isDateFinished: index % 2 == 0,
                  ),
                ],
              );
            },
            separatorBuilder: (context, index) {
              return const SizedBox(height: 12);
            },
            itemCount: 5,
          ),
        ),
        Obx(
          () => Visibility(
            visible: controller.isOverlayDisplay.value,
            child: ModalBarrier(
              color: Colors.black.withOpacity(0.6),
            ),
          ),
        ),
      ],
    );

But when I make it I can't highlight the selected card and can't show 2 more buttons like this. How can I do it ? Thanks for responses! Have a great day!

There is a popular package called flutter_speed_dial (https://pub.dev/packages/flutter_speed_dial). It gives absolute control over the customization and hence it is easy to get the desired output

Complete Code : -

import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';
void main() {
runApp(const App());
}
class App extends StatefulWidget {
const App({super.key});
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Test App',
home: SafeArea(
child: Scaffold(
body: Body(),
)));
}
}
class Body extends StatefulWidget {
const Body({Key? key}) : super(key: key);
@override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SpeedDial(
switchLabelPosition: true,
icon: Icons.close,
foregroundColor: Colors.black,
spacing: 5,
buttonSize: const Size(45, 45),
elevation: 0,
overlayOpacity: 0.4,
overlayColor: Colors.black,
backgroundColor: Colors.white,
shape: const RoundedRectangleBorder(
side: BorderSide(width: 0.2),
borderRadius: BorderRadius.all(Radius.circular(10))),
children: [
SpeedDialChild(
labelWidget: Container(
height: 40,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Row(
children: const [
SizedBox(
width: 10,
),
Icon(Icons.check),
SizedBox(
width: 10,
),
Text("First"),
SizedBox(
width: 15,
),
],
),
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
),
SpeedDialChild(
labelWidget: Container(
height: 40,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Row(
children: const [
SizedBox(
width: 10,
),
Icon(Icons.circle_outlined),
SizedBox(
width: 10,
),
Text("Second"),
SizedBox(
width: 15,
),
],
),
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
),
],
child: const Icon(Icons.attach_money_outlined)),
const SizedBox(
width: 5,
),
const Text(
'1600',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600),
)
],
),
)),
);
}
}

Output : -

<img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMjdmNTNhNzJiMTE0ZDljYjE2YmQ1NGQ3MTQzNmEyYzUxYjFhNWY1NiZjdD1n/56pkv2hHMMvI8RJSDS/giphy.gif">