icon above center showModalBottom Flutter

Question

How do I make the icon in showModalBottom above the middle, like the picture above, I made it using a container and set the position to positioned but it was cut off when I set the top to negative, like the following picture

You can use Stack with positioned top with the negative value to achieve this kind of layout. — Faizan Darwesh, Sep 11 '22 at 19:08

score 0 · Answer 1 · answered Sep 11 '22 at 11:55

Instead of using Positioned you can actually use Transform.translate to shift the Container. Consider that you use half the height of the container as y-Offset and multiply it with -1.

Example:

Transform.translate(
  offset: const Offset(0,-50), // <- use half the height of the container
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(50),
      color: Colors.white,
      border: Border.all(
        color: const Color.fromRGBO(251, 202, 191, 1),
        width: 4
      )
    ),
    width: 100,
    height: 100, // Container has height 100
  ),
)

icon above center showModalBottom Flutter

1 Answers1