Flutter 如何在水龍頭上更改容器的顏色？

Question

我正在使用 for 循環來顯示接下來的 5 天和一個月。 當用戶單擊該框並僅打印用戶單擊的日期和月份時，我需要更改顏色示例文本顏色或邊框顏色。

這是我的代碼

 class _BookService3State extends State<BookService3> {
  final _currentDate = DateTime.now();
  final _dayFormatter = DateFormat('d');
  final _monthFormatter = DateFormat('MMM');
  final _dayyFormatter = DateFormat('EEE');

  @override
  Widget build(BuildContext context) {
    final dates = <Widget>[];
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double Height = MediaQuery.of(context).size.height;
    double Width = MediaQuery.of(context).size.width;

    for (int i = 0; i < 5; i++) {
      final date = _currentDate.add(Duration(days: i));
      dates.add(Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: Height * 0.13,
          width: Width * 0.2,
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.all(Radius.circular(15))),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  _monthFormatter.format(date),
                  style: TextStyle(
                      color: Colors.grey,
                      fontFamily: 'UbuntuRegular',
                      fontSize: 18),
                ),
                SizedBox(
                  height: Height * 0.002,
                ),
                Text(_dayFormatter.format(date),
                    style: TextStyle(
                        color: Colors.grey,
                        fontFamily: 'UbuntuRegular',
                        fontWeight: FontWeight.bold,
                        fontSize: 25)),
                SizedBox(
                  height: Height * 0.002,
                ),
                Text(_dayyFormatter.format(date),
                    style: TextStyle(
                        color: Colors.grey,
                        fontFamily: 'UbuntuRegular',
                        fontSize: 18)),
              ],
            ),
          ),
        ),
      ));
    }

    return Scaffold(
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: dates.map((widget) => widget).toList(),
        ),
      ),
    );
  }
}

我需要的是這個

平均用戶可以單擊一個盒子，盒子顏色會改變並打印盒子日期。

Answer 1

您可以使用 InkWell 小部件來完成。 首先，您需要定義一個 currentindex 變量。 之后，InkWell 小部件的 onTap 方法將該索引設置為 currentindex 變量。 然后您可以在定義顏色時檢查當前索引。

它看起來像這樣：

class _BookService3State extends State<BookService3> {
  final _currentDate = DateTime.now();
  final _dayFormatter = DateFormat('d');
  final _monthFormatter = DateFormat('MMM');
  final _dayyFormatter = DateFormat('EEE');

// Define our current index!
  int currentindex = 0;

  @override
  Widget build(BuildContext context) {
    final dates = <Widget>[];
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;

    for (int i = 0; i < 5; i++) {
      final date = _currentDate.add(Duration(days: i));
      dates.add(Padding(
        padding: const EdgeInsets.all(8.0),
        child: InkWell(
          onTap: () {
            setState(() {
              // set current index!
              currentindex = i;
            });
          },
          child: Container(
            height: height * 0.13,
            width: width * 0.2,
            decoration: BoxDecoration(
                color: currentindex == i ? Colors.white : Colors.blue, // Here we checked!
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.all(Radius.circular(15))),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    _monthFormatter.format(date),
                    style: TextStyle(
                        color: Colors.grey,
                        fontFamily: 'UbuntuRegular',
                        fontSize: 18),
                  ),
                  SizedBox(
                    height: height * 0.002,
                  ),
                  Text(_dayFormatter.format(date),
                      style: TextStyle(
                          color: Colors.grey,
                          fontFamily: 'UbuntuRegular',
                          fontWeight: FontWeight.bold,
                          fontSize: 25)),
                  SizedBox(
                    height: height * 0.002,
                  ),
                  Text(_dayyFormatter.format(date),
                      style: TextStyle(
                          color: Colors.grey,
                          fontFamily: 'UbuntuRegular',
                          fontSize: 18)),
                ],
              ),
            ),
          ),
        ),
      ));
    }

    return Scaffold(
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: dates.map((widget) => widget).toList(),
        ),
      ),
    );
  }
}