如何在 Flutter 中添加具有不同功能小部件的不同卡片

Question

我的应用程序有 7 个卡片视图，其中 3 个卡片有开关和一个不同颜色的进度条，其他卡片有一个进度条。我正在从不同的飞镖文件中检索数据。如何使用一种格式在一个容器中获取具有不同功能的卡片？

Mainfile.dart

Expanded(
            child: GridView.builder(
                itemCount: Cards.length,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                itemBuilder: (context, index) {
                  return CardWidget(
                    title: Cards[index][0],
                    tag: Cards[index][1],
                    power: Cards[index][2],
                    onChanged: (value) => powerSwitchChanged(value, index),
                  );
                }),
          ),



Cardwidget.dart

class CardWidget extends StatelessWidget {
  // final bluecolor = Color(#d4e5f6);
  final String title;
  final String tag;
  final bool power;
  void Function(bool)? onChanged;

  CardWidget({
    super.key,
    required this.title,
    required this.tag,
    required this.power,
    required this.onChanged
  });
  final finalcolor = Color(0xff7a54ff);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: Card(
        color: power ? finalcolor : Colors.grey,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        child: Padding(
          padding: const EdgeInsets.all(0.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    title,
                    style: TextStyle(color: power ? Colors.white : Colors.black, fontSize: 16),
                  ),
                  Container(
                    padding: EdgeInsets.all(20),
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [Colors.blue.withOpacity(0.7)],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        ),
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(30),
                            bottomLeft: Radius.circular(30),
                            bottomRight: Radius.circular(30)),
                        color: Color.fromRGBO(255, 255, 255, 0.38)),
                    child: CupertinoSwitch(
                     value: power,
                    onChanged: onChanged,
                  )
                  )],
              ),
              Container(
                  alignment: Alignment.topLeft,
                  padding: EdgeInsets.only(left: 10, bottom: 20),
                  child: Text(
                    title,
                    style: TextStyle(fontSize: 27, color: Colors.white),
                  )),
              Container(
                  alignment: Alignment.bottomRight,
                  padding: EdgeInsets.only(left: 10),
                  child: Column(
                    children: [
                      Text(
                        tag,
                        style: TextStyle(fontSize: 18, color: Colors.white),
                      ),
                    ],
                  ))
            ],
          ),
        ),
      ),
    );
  }
}