CODEWITHSUNDEEP
flutterdartflutter-layout
Bình Nguyễn
Bình Nguyễn

Reputation: 91

Flutter - How can I add a widget to the border of a Container?

Assuming that I have an ordinary container. How can I add a widget, for example, a Button to the border of my Container?

Container with a button on border

Upvotes: 3

Views: 1907

Answers (2)

EdwynZN
EdwynZN

Reputation: 5611

You can use a Stack widget to overlap some widgets, then just create first the container (I used a Card just to simulate the elevation and border effect) and after that add the icon, button, etc, by deault it aligns thewidget in the TopLeft corner, I change it to the centerRight, but if you want more control just wrap the widget in an Align or a Positioned widget to move them where you want

class MyWidget extends StatelessWidget {
  final Size size = Size(400, 400);
  @override
  Widget build(BuildContext context) {
    return Stack(alignment: Alignment.centerRight, children: [
      Card(
          margin: const EdgeInsets.all(24.0), //half the size the icon so it looks like in the middle of the border
          elevation: 8,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(8)),
            side: BorderSide(color: Colors.blue, width: 2)
          ),
          color: Colors.grey,
          child: SizedBox.fromSize(
            size: size, child: Center(child: Text('MyText'))
          )
      ),
      Icon(Icons.done, size: 48)
    ]);
  }
}

enter image description here

Upvotes: 2

Henok
Henok

Reputation: 3393

You can use Badges plugin. for example, in your case you can wrap the container with Badge and modify the position parameter which is a BadgePosition to the exact bottom and right values.

Badge(
      position: BadgePosition.bottomRight(bottom: 0,right: 0),//change this to get the right location
      badgeContent: YourWidgetAtTheBorder(),
      child: YourContainer(),
       
    )

Upvotes: 2

Related Questions