У меня есть несколько элементов, которые нужно отобразить с помощью виджета Wrap()
, который при нажатии должен insert()
наложение (или Opacity()
с AbsorbPointer()
), скрывающее другие элементы / виджеты вокруг него, и я хотел бы, чтобы текущий выбранный виджет для выделения (над наложением или может быть вырезан через наложение).
And the a user taps on any item,
here's the Result what i want to get -
При выборе элемента показывать наложение
Вот как я визуализирую список элементов.
Когда пользователь нажимает на элемент, отображается наложение (а предыдущее закрывается).
ПРИМЕЧАНИЕ. Я использую глобальный ключ, чтобы получить ширину, высоту, положение по оси x и положение по оси Y для каждого элемента при нажатии.
Container(
child: Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
child: Wrap(
direction: Axis.horizontal,
runSpacing: MediaQuery.of(context).size.height * 0.015,
alignment: WrapAlignment.spaceBetween,
runAlignment: WrapAlignment.spaceBetween,
crossAxisAlignment: WrapCrossAlignment.start,
children: infrastructureTypes
.map<Widget>((type) => MkInfrastructureComponent(
type: type,
onTap: (type, config, id) {
if (overlayEntry != null) {
_hideOverlay();
}
_showOverlay(context, type: type, childConfig: config);
},
))
.toList(),
),
),
],
),
),
Показать и скрыть наложение
void _showOverlay(
BuildContext ctx, {
@required InfrastructureType type,
@required WidgetConfig childConfig,
}) {
OverlayState overlayState = Overlay.of(context);
overlayEntry = OverlayEntry(
builder: (ctx) => Positioned(
left: 0 + MediaQuery.of(context).size.width * 0.02,
right: MediaQuery.of(context).size.width * 0.02,
top: childConfig.yPosition + childConfig.height,
height: type.children.length * childConfig.height + _arrowHeight,
child: CustomDropDown(),
));
WidgetsBinding.instance.addPostFrameCallback((_) => overlayState.insert(overlayEntry));
}
void _hideOverlay() {
overlayEntry?.remove();
overlayEntry = null;
}
Мой вопрос в том, как я могу добиться макета пользовательского интерфейса на изображении 2. .
Возможно, вырежьте путь на оверлее для выбранный в данный момент элемент?