按下按钮后添加卡片小部件

时间:2020-10-20 18:08:07

标签: flutter dart

我试图在按下按钮后在我的应用程序中连续动态添加卡。 我尝试了不同的方法,但似乎什么都无法正常工作,现在我到达了这一点:

    cardList = [];
    setState(() {
      cardList.add(new DynamicCard());
    });
  }

这是我调用的用于添加新卡的方法,并在以下AlertDialog中调用该方法:

return    Alert(
        context: context,
        title: "Add activity",
        content: Column(
          children: <Widget>[
            DropdownButton(
              hint: Text('Select your activity'),
              icon: Icon(Icons.arrow_drop_down),
              value: selectedActivity,
              onChanged: (value){
                setState(() {
                  value = selectedActivity;
                  print(value);               
                });
              },
              //value: selectedActivity,
              items: activityList.map((value) {
                return DropdownMenuItem(
                  value: value, 
                  child: Text(value));
              }).toList() 
              ),
            TextField(
              decoration: InputDecoration(
                labelText: 'Where',
              ),
            ),
          ],
        ),
        buttons: [
          DialogButton(
            onPressed: () {
              addCard();
              Navigator.pop(context);
              },
            child: Text(
              "Add Activity",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          )
        ]).show();

这是我按下按钮后想要添加的卡片:

import 'package:flutter/material.dart';
import 'package:wildnature/widgets/sizeConfig.dart';

class DynamicCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 250,
      width: 350,
      child: Card(
        elevation: 6,
        clipBehavior: Clip.antiAlias,
        child: Column(
          children: [
            ListTile(
              title: Text('Last Activity:'),
            ),
            Padding(
                padding: EdgeInsets.all(8.0),
                child: Text(
                  'Test123',
                  style:
                      TextStyle(fontSize: 5 * SizeConfig.blockSizeHorizontal),
                )),
            Container(
              width: 200,
              height: 160,
              child: Image.asset('assets/camping.png', fit: BoxFit.fill),
            )
          ],
        ),
      ),
    );
  }
}

此外,如何在所需的确切位置渲染此小部件?

1 个答案:

答案 0 :(得分:1)

解决方案:

  1. 创建了一个新变量:
 bool addWidget = false;
  1. 创建了一个新的小部件:

  Widget createActivityCard(String activy, String activityDesc){
    return SizedBox(
      height: 250,
      width: 350,
      child: Card(
        elevation: 6,
        clipBehavior: Clip.antiAlias,
        child: Column(
          children: [
            ListTile(
              title: Text(activy),
            ),
            Padding(
                padding: EdgeInsets.all(8.0),
                child: Text(
                  activityDesc,
                  style:
                      TextStyle(fontSize: 5 * SizeConfig.blockSizeHorizontal),
                )),
            Container(
              width: 200,
              height: 160,
              child: Image.asset('assets/camping.png', fit: BoxFit.fill),
            )
          ],
        ),
      ),
    );
  }
  1. 在按下按钮时将addWidget的值设置为“ true”

  2. 添加了一个简单的if语句,条件是addWidget:

if(addWidget)
                    Container(
                     child: createActivityCard('Added by user', 'WE DID IT'))
   ```