I tried with the stack but I couldn't achieve the layout.
3 Answers
try this on.
class Page1 extends StatelessWidget {
final String pageId;
const Page1({Key? key, this.pageId = ""}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("UI"),),
body: Center(
child: Container(
height: 100,
child: Stack(
alignment: Alignment.topCenter,
children: [
Container(
padding: EdgeInsets.all(15),
margin: EdgeInsets.only(top:20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Colors.black)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding:
EdgeInsets.symmetric(vertical: 10, horizontal: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black),
),
child: Text("Right"),
),
Container(
padding:
EdgeInsets.symmetric(vertical: 10, horizontal: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black),
),
child: Text("Wrong"),
)
],
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
height: 40,
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black),
),
child: Text("Choose"),
),
),
],
),
),
),
);
}
}
Try to use below code hope it helpful to you in below code I have used Stack, Container, Positioned Widgets
Container(
height: 100,
margin: EdgeInsets.only(top: 30),
child: Stack(
children: [
Center(
child: Container(
color: Colors.white,
padding: EdgeInsets.all(15),
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Colors.black)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.symmetric(
vertical: 10, horizontal: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black),
),
child: Text("Right"),
),
Container(
padding: EdgeInsets.symmetric(
vertical: 10, horizontal: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black),
),
child: Text("Wrong"),
)
],
),
),
),
Positioned(
top: 0,
right: 0,
left: 0,
child: Center(
child: Container(
padding: EdgeInsets.symmetric(
vertical: 10, horizontal: 30),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black),
),
child: Text("Choose"),
),
),
),
],
),
),
Hey Lucifer Please try out my code.
Just copy and paste this code in your android studio
Container(
height: 100,
margin: EdgeInsets.only(top: 30),
child: Stack(
children: [
Center(
child: Container(
padding: EdgeInsets.all(15),
width: Get.width * 0.8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Colors.black)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black)),
child: Text("Right"),
),
Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black)),
child: Text("Right"),
)
],
),
),
),
Positioned(
top: 0,
right: 0,
left: 0,
child: Center(
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.black)),
child: Text("Choose"),
),
),
),
],
),
)