icon above center showModalBottom Flutter

userVrCe1 0
Viewed 25

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

enter image description here

flutter-showmodalbottomsheet icons flutter
1 Answers

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
  ),
)
TripleNine0
Related