Reputation: 47
In the picture above I have a piece of gray at the left of my row but I want the white to go all the way to the left. How would I do this?
I am trying to get to something like this
This is the relevant code
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: Colors.grey,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: MaterialButton(
onPressed: () {},
child: Container(
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: Colors.white,
),
child: Center(
child: Text(
'Test 1',
style: TextStyle(
color: Color(0xFF3d3636),
),
),
),
),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
color: Colors.grey,
),
child: Center(
child: Text(
'test 2',
),
),
),
),
),
],
),
),
Thanks for any help.
Upvotes: 0
Views: 75
Reputation: 3073
int active = 0;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
color: Colors.black),
padding: const EdgeInsets.all(10),
child: Row(children: [
Expanded(
child: TextButton(
onPressed: () {
setState(() {
active = 0;
});
},
style: TextButton.styleFrom(
backgroundColor:
active == 0 ? Colors.white : Colors.black54,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
)),
child: Text('Register',
style: TextStyle(
color: active == 0 ? Colors.black : Colors.white,
)))),
Expanded(
child: TextButton(
onPressed: () {
setState(() {
active = 1;
});
},
style: TextButton.styleFrom(
backgroundColor:
active == 1 ? Colors.white : Colors.black54,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
)),
child: Text('Sign in',
style: TextStyle(
color: active == 1 ? Colors.black : Colors.white,
))))
]));
}
Adjust border radius (s) to your requirement !
Upvotes: 1