Илья Кок
Илья Кок

Reputation: 101

How to arrange widgets in Stack

When expanding the DropdownButton widget, when I want to scroll the dropdown list up or down, then my map in the background is scaled, and the dropdown list and the container with the Авторизация button have a transparency through which I can interact with the map (move, scale). Is it all about the Stack Widget? How to solve this problem?

Dropdown list

dropdown list

dropdown list when you scroll down (map scale changes)

dropdown list when you scroll down (map scale changes)

map_widget.dart

return Stack(
      children: [
        _getMapWidget(),
        Align(
          alignment: Alignment.center,
          child: StreamBuilder<MapState>(
            initialData: _store.getInitialState(),
            stream: _store.getStateStream(),
            builder: (context, snapshot) {
              final state = snapshot.data!;
              if (state is MapStateLoading) {
                return _Loading();
              } else if (state is MapStateContent) {
                return SizedBox.shrink();
              } else if (state is MapStateError) {
                return _Error();
              } else {
                throw Exception('Unhandled state type :$state');
              }
            },
          ),
        ),
        Align(
          alignment: _cultureSelectionAlignment,
          child: Container(
            margin: EdgeInsets.all(12),
            padding: EdgeInsets.fromLTRB(12, 0, 12, 0),
            decoration: BoxDecoration(color: UiKitColors.white),
            child: _cultureWidgetFactory.create(
              (culture) => _store.process(
                MapActionCultureClick(culture),
              ),
            ),
          ),
        ),
      ],
    );

guest_widget.dart

Widget _Body(BuildContext context) => Stack(
        children: [
          _mapWidgetBuilder(context),
          _SignIn(context),
        ],
      );

  Widget _SignIn(BuildContext context) => SafeArea(
        child: Align(
          alignment: Alignment.topCenter,
          child: Container(
            height: _signInContainerHeight,
            width: _signInContainerWidth,
            decoration: _SignInBackground(),
            child: Center(
              child: Column(
                children: [
                  Padding(
                    padding: EdgeInsets.all(6),
                    child: Text(
                      _stringProvider.guestAuthorizationMessage,
                      textAlign: TextAlign.center,
                    ),
                  ),
                  _AuthButton(context),
                ],
              ),
            ),
          ),
        ),
      );

Upvotes: 1

Views: 186

Answers (1)

Pokaboom
Pokaboom

Reputation: 1388

Make use of IgnorePointer widget,

Wrap your map widget with this widget and it has flag called ignoring. when you interacting with dropdownButton just make it true.

Upvotes: 1

Related Questions