I'm trying to recreate this button:
The button has two different background colors and a Text in each section. The "click" is unique, so it doesn't matter which side the user will click.
I tried this code, but the containers aren't covering the entire area of the button.
EDIT: complete widget tree below
Card(
elevation: 3.0,
shadowColor: Colors.grey.shade50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: Container(
child: Column(
children: [
Text("${data["teams"]}"),
Row(
children: [
Expanded(
child: TextButton(
onPressed: () { },
child: Row(
children: [
Container(
color: Colors.redAccent,
child: Text("1"),
),
Container(color: Colors.white,)
],
),
)
),
Expanded(
child: TextButton(
onPressed: () { },
child: Row(
children: [
Expanded(
child: Container(
color: Colors.redAccent,
child: Text("X"),
),
),
Expanded(
child: Container(color: Colors.white,),
)
],
),
)
),
Expanded(
child: TextButton(
onPressed: () { },
child: Row(
children: [
Expanded(
child: Container(
color: Colors.redAccent,
child: Text("2"),
),
),
Expanded(
child: Container(color: Colors.white,),
)
],
),
)
),
],
)
],
)
)
);
CodePudding user response：
You can wrap row with clickable widget like InkWell, or GestureDetector to get tap event
SizedBox(
height: kToolbarHeight,
width: 200,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: GestureDetector(
onTap: () {},
child: Row(
children: [
Flexible(
flex: 4,
child: Container(
alignment: Alignment.center,
color: Colors.cyanAccent,
child: Text("1"),
),
),
Flexible(
flex: 6,
child: Container(
alignment: Alignment.center,
color: Colors.white,
child: Text("1.24"),
),
)
],
),
),
),
)
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Card(
elevation: 3.0,
shadowColor: Colors.grey.shade50,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: Container(
child: Column(
children: [
Text("{data[]}"),
Row(
children: [
Expanded(
child: TextButton(
onPressed: () {},
child: Row(
children: [
Container(
color: Colors.redAccent,
child: Text("1"),
),
Container(
color: Colors.white,
)
],
),
)),
Expanded(
child: TextButton(
onPressed: () {},
child: Row(
children: [
Expanded(
child: Container(
color: Colors.redAccent,
child: Text("X"),
),
),
Expanded(
child: Container(
color: Colors.white,
),
)
],
),
)),
Expanded(child: myButton()),
],
)
],
)))
],
),
),
);
}
ClipRRect myButton() {
return ClipRRect(
borderRadius: BorderRadius.circular(12),
child: GestureDetector(
onTap: () {},
child: Row(
children: [
Flexible(
flex: 4,
child: Container(
alignment: Alignment.center,
color: Colors.cyanAccent,
child: Text("1"),
),
),
Flexible(
flex: 6,
child: Container(
alignment: Alignment.center,
color: Colors.white,
child: Text("1.24"),
),
)
],
),
),
);
}
CodePudding user response：
You can solve this by adding the property crossAxisAlignment to CrossAxisAlignment.stretch in your row:
Row(
crossAxisAlignment: CrossAxisAlignment.stretch
children: [
Expanded(
child: Container(
color: Colors.redAccent,
child: Text("1"),
),
),
Expanded(
child: Container(color: Colors.white,),
)
]
),