How to make deselect and select button like in the photo above. Here is my code.
Widget buttonRow(String dateTime, bool verticalLine, int buttonNumber) {
return InkWell(
onTap: (){
print('select-deSelect');
},
child: Container(
height: 50,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
buttonNumber == 1 ? SizedBox(height: 10): SizedBox(height: 0),
Text(
dateTime,
textAlign: TextAlign.center,
maxLines: 2,
style: TextStyle(
color: Color(0xFFCC306F),
fontSize: 13,
fontFamily: 'PingFang SC',
fontWeight: FontWeight.w400,
height: 1.38,
letterSpacing: -0.09,
),
),
buttonNumber == 1? SizedBox(height: 15): SizedBox(height: 10),
Container(
width: 63,
height: 3,
decoration: BoxDecoration(color: Color(0xFFF2C547)),
)
],
),
)
);
}
And used
Row(
children: [
Expanded(flex: 1,child: buttonRow('直播中', true, 1)),
Container(color: Colors.black45, height: 50, width: 2,),
Expanded(flex: 1,child: buttonRow("今天n11月24日", true,2)),
Container(color: Colors.black45, height: 50, width: 2,),
Expanded(flex: 1,child: buttonRow("星期一n11月25日", true, 3)),
Container(color: Colors.black45, height: 50, width: 2,),
Expanded(flex: 1,child: buttonRow("星期二n11月26日", true, 4)),
],
),
Can anyone do some correction in my code?
2
Answers
This is after putting the widget into the row.Anyone can help improve the code?
You can use a custom widget for this. I am modifying your current code.
Create a state variable to hold selected index and on tap, change the index inside setState. To show vertical line(selected yellow) you can use if conditional state
if (verticalLine)