juiceppe
juiceppe

Reputation: 31

Add card widget after pressing a button

I am trying to dynamically add a card in a row in my app after pressing a button. I tried different things but nothing seems to work properly, right now I reached this point:

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

This is the method that I call to add a new card and it is called in the following 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();

This is the card I'd like to add after pressing on the button:

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),
            )
          ],
        ),
      ),
    );
  }
}

Also, how can I render this widget in the exact place I want it to be?

Upvotes: 1

Views: 617

Answers (1)

juiceppe
juiceppe

Reputation: 31

Solution:

  1. Created a new variable:
 bool addWidget = false;
  1. created a new widget:

  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. Set the value of addWidget to 'true' when pressing on a button

  2. Added a simple if statement where the condition is addWidget:

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

Upvotes: 1

Related Questions