skip to Main Content

button deselect-select

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


  1. Chosen as BEST ANSWER

    This is after putting the widget into the row.Anyone can help improve the code?

    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)),
              ],
            ),
    

  2. 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)

    class _FyxState extends State<Fyx> {
      Widget buttonRow(String dateTime, bool verticalLine, int buttonNumber) {
        return InkWell(
            onTap: () {
              print('select-deSelect');
              setState(() {
                _selectedIndex = buttonNumber - 1;
              });
            },
            child: Container(
              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),
                  if (verticalLine)
                    Container(
                      width: 63,
                      height: 3,
                      decoration: BoxDecoration(color: Color(0xFFF2C547)),
                    )
                ],
              ),
            ));
      }
    
      int _selectedIndex = 0;
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            children: [
              Row(
                children: [
                  Expanded(flex: 1, child: buttonRow('直播中', _selectedIndex == 0, 1)),
                  Container(color: Colors.black45, height: 50, width: 2),
                  Expanded(flex: 1, child: buttonRow("今天n11月24日", _selectedIndex == 1, 2)),
                  Container(color: Colors.black45, height: 50, width: 2),
                  Expanded(flex: 1, child: buttonRow("星期一n11月25日", _selectedIndex == 2, 3)),
                  Container(color: Colors.black45, height: 50, width: 2),
                  Expanded(flex: 1, child: buttonRow("星期二n11月26日", _selectedIndex == 3, 4)),
                ],
              ),
            ],
          ),
        );
      }
    }
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search