CODEWITHSUNDEEP
flutter
B. Mercan
B. Mercan

Reputation: 51

Flutter widget positioning

I wonder how to manage to do this kind of widgets. I couldn't figure out how to describe and google it.

in this image how to positioned filter and sorting widgets floats on blue world image and background and aligned for perfect i mean responsive

enter image description here

or in this image expand arrow positioned on the edge of column

enter image description here

Upvotes: 0

Views: 78

Answers (1)

Kentukyyo
Kentukyyo

Reputation: 426

You can use MediaQuery to get the screen size and use Positioned inside the Stack to adjust the location of the buttons, here's an example i just made:

double screenHeight = MediaQuery.of(context).size.height;
double topContainerHeight = screenHeight / 3;
double buttonLocation = topContainerHeight - 40;

return Stack(
  alignment: Alignment.topCenter,
  children: [
    Container(
      color: Colors.red,
    ),
    Container(
      height: topContainerHeight,
      decoration: const BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(20.0),
          bottomRight: Radius.circular(20.0),
        ),
      ),
    ),
    Positioned(
      top: buttonLocation,
      child: Row(
        children: [
          Container(
            height: 80,
            width: 160,
            color: Colors.white,
          ),
          const SizedBox(width: 30.0),
          Container(
            height: 80,
            width: 160,
            color: Colors.white,
          ),
        ],
      ),
    ),
  ],
);

The black container in the top uses 1/3 of the screen height and i know my buttons have an height of 80 so i just remove half of the height of my buttons from 1/3 of the screen to position them in the stack.

Here's how it looks:

Result image

Upvotes: 1

Related Questions