bbs-go-site

我目前正在使用Flutter，ESP32和Firestore进行家庭自动化项目。我正在尝试完成一个按钮，该按钮将为该用户添加另一张卡片。我的项目有3个主卡，这些卡在按下时会有所不同，但是它们具有相同的格式，只是其中的图标和文本可能会更改。我正在尝试创建一个“添加”按钮，该按钮将添加一张卡，仅用于想要添加卡的用户。因此，假设我们有2个用户。如果用户1要在其主页上添加卡片，则用户2将不会看到该卡片，因为他不想添加卡片。我抬起头来，我认为这可以通过sharedpreferences来完成，或者在firestore中为用户存储一些时间的数据，如果可能的话，与sharedpreferences一起做会更好。我想使用listview.builder可以完成按钮的添加，但是listview的布局不会与我想要的相同。这是我创建卡片的方式：

class CustomCard extends StatelessWidget {
final bool isActive;
final String text;
final String activeLabel;
final String inActiveLabel;
final IconData iconData;
final VoidCallback onTap;

const CustomCard({
this.isActive,
this.text,
this.iconData,
this.onTap,
this.activeLabel,
this.inActiveLabel,
});

@override
Widget build(BuildContext context) {
return InkWell(
  onTap: onTap,
  child: Container(
    height: 110,
    width: 110,
    child: Card(
      color: isActive ? Colors.white : Colors.grey[800],
      semanticContainer: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      margin: new EdgeInsets.all(0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Row(
            children: <Widget>[
              Padding(
                //padding: EdgeInsets.only(left: 4,top: 7, right: 0, bottom: 10),
                padding: activeLabel == 'Locked' ? EdgeInsets.only(left: 4,top: 9, right: 0, bottom: 20) : EdgeInsets.only(left: 4,top: 9, right: 30, bottom: 20),
                child: Icon(
                  iconData,
                  color: isActive ? Colors.black : Colors.white,
                  size: 35,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 5, right: 0, bottom: 20, left: 5),
                //padding: text == "Lock" ? EdgeInsets.only(top: 0, right: 20, bottom: 20, left: 10) : EdgeInsets.only(top: 0, right: 0, bottom: 0, left: 10),
                child: new Text(
                  isActive ? activeLabel : inActiveLabel,
                  textAlign: TextAlign.left,
                  style: TextStyle(
                      color: isActive ? Colors.black : Colors.white,
                      fontSize: 14,
                  ),
                ),
              ),
            ],
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: Padding(
              padding: EdgeInsets.only(top: 5, left: 5),
              child: Text(
                text,
                style: TextStyle(
                    color: isActive ? Colors.black : Colors.white,
                    fontSize: 15),
              ),
            ),
          ),
        ],
      ),
    ),
   ),
  );
 }
 }

这就是我在主函数中调用它们的方式：

Wrap(
                      direction: Axis.horizontal,
                      spacing: -5,
                      runSpacing: 15,
                      children: <Widget>[
                        CustomCard(
                          activeLabel: 'Locked',
                          inActiveLabel: 'Unlocked',
                          iconData: cardsValue[0] ? OMIcons.lock : OMIcons.lockOpen,
                          //iconData: OMIcons.lock,
                          text: 'Front\nDoor Lock',
                          isActive: userData.led1,
                          onTap: () {
                            setState(() {
                              //cardsValue[0] = !cardsValue[0];
                              Firestore.instance.collection('dadosusuarios').document(user.uid).updateData({
                                'led1': cardsValue[0] = !cardsValue[0],
                              });
                            });
                          },
                        ),
                        SizedBox(width: 30.0),
                        CustomCard(
                          activeLabel: 'On',
                          inActiveLabel: 'Off',
                          iconData: Icons.lightbulb_outline,
                          text: 'Lâmpada 2 Schuma',
                          isActive: userData.led2,
                          onTap: () {
                            setState(() {
                              Firestore.instance.collection('dadosusuarios').document(user.uid).updateData({
                                'led2': cardsValue[1] = !cardsValue[1],
                              });
                            });
                          },
                        ),
                        SizedBox(width: 30.0),
                        CustomCard(
                          activeLabel: 'On',
                          inActiveLabel: 'Off',
                          iconData: Icons.check,
                          text: 'Lâmpada 3 Schuma',
                          isActive: userData.led3,
                          onTap: () {
                            setState(() {
                              Firestore.instance.collection('dadosusuarios').document(user.uid).updateData({
                                'led3': cardsValue[2] = !cardsValue[2],
                              });
                            });
                          },
                        ),
                        CustomCard(
                          activeLabel: 'On',
                          inActiveLabel: 'Off',
                          iconData: Icons.check_box_outline_blank,
                          text: 'Light\nLiving Room',
                          isActive: cardsValue[3],
                          onTap: () {
                            setState(() {
                              cardsValue[3] = !cardsValue[3];
                            });
                          },
                        ),
                      ],
                    ),

This is how they look in my app:

为每个用户添加小部件