Flutter 用按钮创建特殊表

Question

I have a small task, however, I've been trying to reproduce this in Flutter for 2 days, but can't manage it, unfortunately. Would ask you to help me a little. It should be a table with buttons where you can book as a customer at a certain time, but if someone has already booked something in between, you can only book up to the date or after, see the video. And I'm sorry if this is a bit of an unusual question, however, I'm getting desperate Thank you in advance.

PS: It would be important to mention that the design is not as important as the functionality

Video

Answer 1

You can use the Table widget and ElevatedButton within your Table widget like this:

    Table(
      border: TableBorder.all(),
      columnWidths: const <int, TableColumnWidth>{
        0: FixedColumnWidth(96),
        1: FixedColumnWidth(96),
        2: FixedColumnWidth(96),
        3: FixedColumnWidth(96),
        4: FixedColumnWidth(96),
      },
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      children: <TableRow>[
        TableRow(
          children: <Widget>[
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
          ],
        ),
        TableRow(
          decoration: const BoxDecoration(
            color: Colors.grey,
          ),
          children: <Widget>[
            Container(
              height: 64,
              color: Colors.grey[200],
            ),
            SizedBox(
              height: 64,
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.orange,
                ),
                child: const Icon(
                  Icons.check,
                  color: Colors.white,
                ),
              ),
            ),
            SizedBox(
              height: 64,
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.grey[400],
                ),
                child: Icon(
                  Icons.dangerous,
                  color: Colors.grey[600],
                ),
              ),
            ),
            SizedBox(
              height: 64,
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white,
                ),
                child: Container(),
              ),
            ),
            SizedBox(
              height: 64,
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white,
                ),
                child: Container(),
              ),
            ),
          ],
        ),
      ],
    )