flutterdartflutter-layout
flutter problem : How to create a button like this?
I want to create like this button
But I am creating like this
when I m removing this line then I got error
right: BorderSide(
color: skyBlue,
width: 2.0,),
This is my code
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
setState(() {
tabValue = 'Growth';
});
print(tabValue);
},
child: Padding(
padding: const EdgeInsets.only(
bottom: 10, top: 10),
child: Container(
width:MediaQuery.of(context).size.width/2.24,
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: skyBlue,
width: 2.0,
style: BorderStyle.solid),
top: BorderSide(
color: skyBlue,
width: 2.0,
style: BorderStyle.solid),
bottom: BorderSide(
color: skyBlue,
width: 2.0,
style: BorderStyle.solid),
right: BorderSide(
color: skyBlue,
width: 2.0,),
),
boxShadow: tabValue == 'Growth' ? <BoxShadow>[
BoxShadow(
color: Colors.grey,
blurRadius: 2,
offset: Offset(0.50, 1)
)
]:<BoxShadow>[
BoxShadow(
color: Colors.white,
blurRadius: 0,
offset: Offset(0,0)
)
],
color: tabValue == 'Growth'
? skyBlue
: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5),
),),
padding: EdgeInsets.symmetric(
horizontal: 20, vertical: 15),
child: Text(
"Growth",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: tabValue == 'Growth'
? Colors.white
: skyBlue),
textAlign: TextAlign.center,
)),
),
),
InkWell(
onTap: () {
setState(() {
tabValue = 'Home Loan';
});
print(tabValue);
},
child: Padding(
padding: const EdgeInsets.only(
bottom: 10, top: 10),
child: Container(
width:MediaQuery.of(context).size.width/2.4,
decoration: BoxDecoration(
border: Border.all(
color: green2Color,
width: 2.0,
style: BorderStyle.solid),
boxShadow: tabValue == 'Home Loan' ? <BoxShadow>[
BoxShadow(
color: Colors.grey,
blurRadius: 2,
offset: Offset(0.50, 1)
)
]:<BoxShadow>[
BoxShadow(
color: Colors.white,
blurRadius: 0,
offset: Offset(0,0)
)
],
color: tabValue == 'Home Loan'
? green2Color
: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
),),
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 15),
child: Text(
"Home Loan",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: tabValue == 'Home Loan'
? Colors.white
: green2Color),
textAlign: TextAlign.center,
)),
),
)
],
),
Solution
You can allow set borderRadius only when you define all border side same or not define each one of them, try this:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
setState(() {
tabValue = 'Growth';
});
print(tabValue);
},
child: Container(
margin: EdgeInsets.only(bottom: 10, top: 10),
padding: EdgeInsets.only(top: 2, left: 2, bottom: 2),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5),
),
color: Colors.blue,
),
child: Container(
width: MediaQuery.of(context).size.width / 2.24,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5),
),
boxShadow: tabValue == 'Growth'
? <BoxShadow>[
BoxShadow(
color: Colors.grey,
blurRadius: 2,
offset: Offset(0.50, 1))
]
: <BoxShadow>[
BoxShadow(
color: Colors.white,
blurRadius: 0,
offset: Offset(0, 0))
],
color:
tabValue == 'Growth' ? Colors.blue : Colors.white,
),
padding:
EdgeInsets.symmetric(horizontal: 20, vertical: 15),
child: Text(
"Growth",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: tabValue == 'Growth'
? Colors.white
: Colors.blue),
textAlign: TextAlign.center,
)),
),
),
InkWell(
onTap: () {
setState(() {
tabValue = 'Home Loan';
});
print(tabValue);
},
child: Container(
margin: EdgeInsets.only(bottom: 10, top: 10),
padding: EdgeInsets.only(top: 2, right: 2, bottom: 2),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
),
color: Colors.green,
),
child: Container(
width: MediaQuery.of(context).size.width / 2.4,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5),
),
boxShadow: tabValue == 'Home Loan'
? <BoxShadow>[
BoxShadow(
color: Colors.grey,
blurRadius: 2,
offset: Offset(0.50, 1))
]
: <BoxShadow>[
BoxShadow(
color: Colors.white,
blurRadius: 0,
offset: Offset(0, 0))
],
color: tabValue == 'Home Loan'
? Colors.green
: Colors.white,
),
padding:
EdgeInsets.symmetric(horizontal: 10, vertical: 15),
child: Text(
"Home Loan",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: tabValue == 'Home Loan'
? Colors.white
: Colors.green),
textAlign: TextAlign.center,
)),
),
)
],
)
