Как точно изменить расположение кнопки FloatingAction?

Question

Я только что реализовал пакет unicorndial 1.1.5 (https://pub.dev/documentation/unicorndial/latest/) в своем приложении, и он работает как удовольствие. Он используется только для отображения ключа к различным типам зданий, которые будут получены через слой KML. Единственная проблема, которую я имею, состоит в том, что родительская кнопка (кнопка FloatingAction) находится под моей нижней панелью. Мне нужно переместить его на указанное c количество пикселей, чтобы оно отображалось прямо над полосой.

Я установил ключ с помощью этого

// Map Key
    var childButtons = List<UnicornButton>();

    childButtons.add(
      UnicornButton(
          hasLabel: true,
          labelText: "Campus Buildings",
          labelHasShadow: true,
          labelShadowColor: Theme.UniColour.mapKey[50],
          currentButton: FloatingActionButton(
            heroTag: "Campus Buildings",
            mini: true,
            backgroundColor: Theme.UniColour.mapKey[50],
            child: Icon(Icons.train, color: Theme.UniColour.mapKey[50]),
            onPressed: () {},
          )),
    );

    childButtons.add(
      UnicornButton(
          hasLabel: true,
          labelText: "University Residences",
          labelHasShadow: true,
          labelShadowColor: Theme.UniColour.mapKey[100],
          currentButton: FloatingActionButton(
            heroTag: "University Residences",
            mini: true,
            backgroundColor: Theme.UniColour.mapKey[100],
            child: Icon(Icons.airplanemode_active,
                color: Theme.UniColour.mapKey[100]),
            onPressed: () {},
          )),
    );

Вот где Я реализую код

home: Scaffold(
        body: SafeArea(
          minimum: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 60.0),
          child: Stack(
            children: <Widget>[
              _userLocation == null
                  ? showProgressIndicator()
                  : showMap(context),
              IconOptions(),
            ],
          ),
        ),
        floatingActionButton: UnicornDialer(
            backgroundColor: Color.fromRGBO(0, 0, 0, 0.6),
            animationDuration: 360,
            parentButtonBackground: Theme.UniColour.primary[900],
            orientation: UnicornOrientation.VERTICAL,
            parentButton: Icon(Icons.vpn_key),
            childButtons: childButtons),
            floatingActionButtonLocation: FloatingActionButtonLocation.miniStartTop,
        drawer: MapDrawer(),
      ),

Я думал, что попробую

FloatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, но это имеет установленные значения, такие как endDocked и centerFloat, поэтому он не делает то, что я нужно.

Кто-нибудь знает, как переместить кнопку с плавающим действием на определенное количество пикселей вверх по экрану, чтобы моя нижняя панель не скрывала это?

Вы можете просто увидеть кнопку под Cog настройки нижней панели.

Я включил скриншот для вас, чтобы увидеть.

Answer 1

Просто оберните вашу кнопку стеком и позиционированным виджетом, чтобы вы могли контролировать ее положение на экране следующим образом:

      floatingActionButton: Stack(children: <Widget>[Positioned(bottom: 40,right: 40,child: 
UnicornDialer(
        backgroundColor: Color.fromRGBO(0, 0, 0, 0.6),
        animationDuration: 360,
        parentButtonBackground: Theme.UniColour.primary[900],
        orientation: UnicornOrientation.VERTICAL,
        parentButton: Icon(Icons.vpn_key),
        childButtons: childButtons))],), 

Всякий раз, когда я выполняю контроль над положением на экране, я go для стек и позиционированный виджет. Также вы можете установить смещения Positioned на основе MediaQuery.of (context); Таким образом, вы можете расположить его в соответствии с относительным размером устройства