Assuming that I have an ordinary container. How can I add a widget, for example, a Button to the border of my Container?
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(),
)
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)
]);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.