为每个用户添加小部件

Question

我目前正在与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];
                            });
                          },
                        ),
                      ],
                    ),

这是他们在我的应用中的外观：

我要完成的操作是，通过我的添加按钮（设备旁边的+），我只能为想要添加此卡的用户添加卡，而不会为其他用户显示。

Answer 1

您可以将数据存储在“共享首选项”（本地）中或FireStore中-由您选择。可以实现所需的功能。默认情况下，一个用户添加的卡片不会显示给其他用户。

如果用户更改设备，FireStore（或类似工具）将很有用。将从服务器检索设置，从而提供无缝的用户体验，因为用户无需再次设置卡。在这种情况下，每次用户登录时都将检索卡设置，并根据您的小部件布局显示卡；没有列表视图。

如果使用共享首选项，那么您要做的就是在注销事件上删除用户的数据。因此，新用户将不会获得较早用户设置的首选项。如果您将数据与用户ID一起存储，则可以实现必要的功能，例如数据可能看起来像::>

{
    "[email protected]":[
                        "card1":"Front door",
                        "card2":"Back door"
                      ],
    "[email protected]":[
                        "card1":"Front door",
                        "card2":"Back door",
                        "card3":"Bedroom"
                      ]
}