如何让容器知道今天是哪一天

Question

我想突出显示容器，例如今天是星期一，然后星期一容器应该是橙色的，其余是灰色的。

这是我的代码，我的想法每天都设置为布尔值，然后如果 bool monday 为真，那么星期一颜色将变为橙色，但现在我的问题是我不知道应该把我的判断...我们是否有更聪明的方法来满足我的需求，而不是使用 switch..

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

import 'config.dart';

class Test extends StatefulWidget {
  const Test({Key key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {


    return Material(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 24),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  dateContainer(
                    text: "S",
                  ),
                  dateContainer(text: "M"),
                  dateContainer(text: "T"),
                  dateContainer(text: "W"),
                  dateContainer(text: "T"),
                  dateContainer(text: "F"),
                  dateContainer(text: "S"),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  InkWell dateContainer({String text}) {
    final date = DateTime.now();
    final todayDate = DateFormat('EEEE').format(date);
    bool isToday = false;
    bool Sunday = false;
    bool Monday = false;
    bool Tuesday = false;
    bool Wednesday = false;
    bool Thursday = false;
    bool Friday = false;
    bool Saturday = false;


    switch (todayDate) {
      case 'Sunday':
      setState(() {
        Sunday = true;
      });
        break;
      case 'Monday':
        setState(() {
          Monday = true;
        });
        break;
      case 'Tuesday':
        setState(() {
          Tuesday = true;
        });
        break;
      case 'Wednesday':
        setState(() {
          Wednesday = true;
        });
        break;
      case 'Thursday':
        setState(() {
          Thursday = true;
        });
        break;
      case 'Friday':
        setState(() {
          Sunday = true;
        });
        break;
      case 'Saturday':
        setState(() {
          Saturday = true;
        });
        break;
    }

    return InkWell(
      onTap: () {
        print(text);
      },
      child: Container(
        decoration: BoxDecoration(
            color: isToday ? Colors.orange : Colors.black38,
            borderRadius: BorderRadius.all(Radius.circular(4))),
        height: 36,
        width: 36,
        child: Center(
          child: Text(
            text,
            style: smallTextBoldStyle(textColor: Colors.white),
          ),
        ),
      ),
    );
  }
}

Answer 1

嘿，兄弟，我已经修复了您的代码并使其变得更好 编写代码（干代码）

时，您不需要重复自己那么多

您需要做的就是将每个卡片的值（文本）与日期进行比较。

结果

 import 'package:flutter/material.dart';
    import 'package:intl/intl.dart';
    
    class Test extends StatefulWidget {
      const Test({Key? key}) : super(key: key);
    
      @override
      State<Test> createState() => _TestState();
    }
    
    class _TestState extends State<Test> {
      @override
      Widget build(BuildContext context) {
        return Material(
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 24),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      dateContainer(text: "Sunday"), //Pass the full Day
                      dateContainer(text: "Monday"),
                      dateContainer(text: "Tuesday"),
                      dateContainer(text: "Wednesday"),
                      dateContainer(text: "Thurday"),
                      dateContainer(text: "Friday"),
                      dateContainer(text: "Suturday"),
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      }
    
      InkWell dateContainer({String? text}) {
        final date = DateTime.now();
        final todayDate = DateFormat('EEEE').format(date);

        //Because you already know what each card value is just 
        //check if card text is equal to the date value.
    
        return InkWell(
          onTap: () {
            print(text);
          },
          child: Container(
            decoration: BoxDecoration(
                color: todayDate == text ? Colors.orange : Colors.black38,
                borderRadius: BorderRadius.all(Radius.circular(4))),
            height: 36,
            width: 36,
            child: Center(
              child: Text(
                text!.substring(0, 1),
              ),
            ),
          ),
        );
      }
    }

Answer 2

您可以使用这种方式检查颜色，而不是使用开关：

color: todayDate == 'Monday' ? Colors.orange : Colors.black38,

这是基于您的问题的完整答案代码，不要忘记在您的 pubspec.yaml 中安装包 intl: ^0.17.0，这样您就可以在代码中使用 DateFormat

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Test(),
    );
  }
}

class Test extends StatefulWidget {
  const Test({ Key? key }) : super(key: key);

  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {

  @override
  Widget build(BuildContext context) {
  final date = DateTime.now();
  final todayDate =  DateFormat('EEEE').format(date);
    return Scaffold(
      appBar: AppBar(title: const Text('Test'),),
      body: Container(
        decoration: BoxDecoration(
            color: todayDate == 'Monday' ? Colors.orange : Colors.black38,
            borderRadius: const BorderRadius.all(Radius.circular(4))),
        height: 36,
        width: 36,
        child: const Center(
          child: Text(
            'text',
            style: TextStyle(color: Colors.white)
          ),
        ),
      ),
    );
  }
}