Как мне разместить FAB между 2 виджетами во Flutter? - PullRequest
0 голосов
/ 24 апреля 2020

Я хочу получить следующий вид:

FAB in between

Как сделать FAB гибко расположенным между этими двумя виджетами? (между изображением верхнего профиля и информацией о нижнем профиле)

Мне удалось создать 2 контейнера, но я не знаю, как расположить FAB на их точной горизонтальной границе.

Мой код (это все дерево виджетов, заключенное в эшафот):

Row(
    children: <Widget>[
        Expanded(
        child: Column(
            children: <Widget>[
            Expanded(
                flex: 4,
                child: Container(
                    decoration: BoxDecoration(color: Colors.grey.shade300),
                ),
            ),
            Expanded(
                flex: 6,
                child: Container(),
            ),
            ],
        ),
        ),
    ],
),

1 Ответ

1 голос
/ 24 апреля 2020

Вы можете использовать виджет Stack & Positioned вместе, чтобы позиционировать FAB согласно вашему требованию.

Stack(
  children:[
   // Add your existing row & it's child here,
   Positioned(
     child: FloatingActionButton(
       onPressed:(){ },
       child: Icon(Icons.camera_alt)
     ),
     right: 5,
     top: MediaQuery.of(context).size.height * .3,
   )
  ],
),

И вывод:

FAB Alignment

Примечание: Возможно, вам придется настроить верхнее значение позиционированного виджета, чтобы точно разместить FAB в вашем случае. Если вы знаете точную высоту этого графического виджета, вы можете установить высоту как высоту - 28.

...