Как отобразить всплывающую модальную строку в пользовательском месте на экране. Нажмите кнопку во флаттере.

Question

Я пытаюсь создать пользовательский интерфейс, который имеет плавающую кнопку, на которой я хочу открыть маленькую модальную / смахивающую карту или что-нибудь еще, что служит этой цели. ниже вы увидите несколько цифр и кнопку воспроизведения, теперь я хочу отобразить эту модальную подсказку на скриншоте2, когда вы нажмете эту кнопку воспроизведения.

Не беспокойтесь о картах и ​​других кнопках, которые я просто хочу отобразить тот мод, который имеет 45 км / ч и 2 стрелки.

My Main body:

return Scaffold(
  body: Stack(
    children: <Widget>[
      ...
      Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            alignment: Alignment.centerRight,
            child: RawMaterialButton(
              onPressed: () {
                setInitialLocation();
              },
              child: Image.asset(
                'images/location.png',
                width: 35,
                color: Colors.grey,
              ),
              shape: CircleBorder(),
              elevation: 2.0,
              fillColor: Colors.white,
              padding: EdgeInsets.all(15.0),
            ),
          ),
          //this is custom widget that displays the current speeds and time etc
          BottomNavSpeeds(),
        ],
      ),
      //this container is responsible to display that play button
      Container(
        margin: EdgeInsets.only(bottom: 105),
        alignment: Alignment.bottomRight,
        child: SpeedoMeterFloatingBtn(),
      ),
    ],
  ),
);

код BottomNavSpeed:

return Column(
  children: <Widget>[
        Container(
          padding: EdgeInsets.only(left: 50, right: 50, top: 15),
          height: MediaQuery.of(context).size.height * 0.1,
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Text(
                    '25',
                    style: TextStyle(
                      fontFamily: 'Karla',
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                      color: Color(0xff2e3039),
                    ),
                  ),
                  Text(
                    'km',
                    style: TextStyle(
                      fontFamily: 'Karla',
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
              Column(
                children: <Widget>[
                  Text(
                    '38',
                    style: TextStyle(
                      fontFamily: 'Karla',
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                      color: Color(0xff2e3039),
                    ),
                  ),
                  Text(
                    'min',
                    style: TextStyle(
                      fontFamily: 'Karla',
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
              Column(
                children: <Widget>[
                  Text(
                    '3',
                    style: TextStyle(
                      color: Color(0xffE93F33),
                      fontFamily: 'Karla',
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    'dangers',
                    style: TextStyle(
                      fontFamily: 'Karla',
                      color: Color(0xffE93F33),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        Container(
          color: Colors.white,
          alignment: Alignment.bottomCenter,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Image.asset(
                  'images/select-location-2.png',
                  width: 37,
                ),
              ),
              Container(
                child: Text(
                  '--------------------------------------------------',
                  style: TextStyle(color: Colors.grey, fontFamily: 'Karla'),
                ),
              ),
              Container(
                child: Image.asset(
                  'images/location-2.png',
                  width: 37,
                ),
              ),
            ],
          ),
        ),
    Container(
      alignment: Alignment.center,
      color: Colors.white,
      child: Text(
        'Gagnez ne mettant votre casque',
        style: TextStyle(
            color: Colors.grey[400], fontFamily: 'Karla', fontSize: 15),
      ),
    ),
  ],
);

код для SpeedometerFloatingBtn:

return Container(
  color: Colors.transparent,
  child: SizedBox(
    height: 70,
    width: 70,
    child: FloatingActionButton(
      backgroundColor: Colors.transparent,
      elevation: 0,
      onPressed: () {
        setState(() {
          _icon =
              _icon == Icons.pause ? Icons.play_arrow : Icons.play_arrow;
        });
        if (_icon == Icons.play_arrow) {
          final action = CupertinoNavigationBar(
            middle: SpeedometerBottomNav(),
          );
          showCupertinoModalPopup(
              context: context, builder: (context) => action);
        }
      },
      child: Container(
        height: 70,
        width: 70,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.white, width: 4),
          shape: BoxShape.circle,
          gradient: LinearGradient(
            begin: const Alignment(0.7, -0.5),
            end: const Alignment(0.6, 0.5),
            colors: [
              Color(0xffE93F33),
              Color(0xffE93F33),
            ],
          ),
        ),
        child: Icon(
          _icon,
          size: 40,
        ),
      ),
    ),
  ),
);

Я предоставил все связанный код, хотя я не думаю, что что-то должно быть изменено в SpeedometerFloatingBtn или BottomNavBar, хотя вы все равно можете попробовать любой подходящий способ. Все, что я хочу, это открыть скриншот 2, который имеет эти 2 стрелки и скорость 45 км / ч в точном верху, где другие скорости отображаются на скриншоте 1.