Problem adding widget to GridView with button and scroll

Question

At first I had a Wrap that by clicking on the "add" button would add a new card to the Wrap. Then I changed the Wrap to GridView so that I could add scrolling. However, now when I press the button nothing shows on the device, but if I change GridView back to a Wrap and hot reload, the cards show up? I'm not sure what's wrong.

Also I can't scroll, I know I'm doing something wrong, but I have no idea what.

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {

  List<Widget> cards = [];

  dynamic addReusableCard (String activity, int goal, double elapsed){
    return cards.add(ReusableCard(activityText: activity, activityLength: goal, activityTimeElapsed: elapsed,));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Text('TIME CARDS',
              style: TextStyle(
                fontSize: 20.0,
                letterSpacing: 5.0,
              ),),
              Text('You\'re awake for a total of 16h',
                  style: TextStyle(
                    fontSize: 16.0,
                    fontStyle: FontStyle.italic,
                  ),),
              Expanded(
                flex: 9,
                child: GridView.count(
                    crossAxisCount: 2,
                    childAspectRatio: (175.0 / 220.0),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                  children: cards
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(18.0),
                child: Align(
                  alignment: Alignment.bottomRight,
                  child: FloatingActionButton(
                    onPressed: (){
                      setState(() {
                        addReusableCard('reading', 2, 0.3);
                      });
                    },
                    backgroundColor: kAccentColor,
                    elevation: 0.0,
                    child: Icon(Icons.add),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Thanks in advance

J. S. · Accepted Answer · 2020-01-06 16:22:50Z

2

For a dynamic list length you should use gridView.builder()

Here is the relevant code:

Expanded(
  flex: 9,
  child: GridView.builder(
    itemCount: cards.length,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2
    ),
    itemBuilder: (BuildContext context, int index) {
      return cards[index];
    }
  )
),

edited Jan 6, 2020 at 16:22

J. S.

9,6952 gold badges42 silver badges47 bronze badges

answered Jan 6, 2020 at 15:24

Zvi Karp

3,9143 gold badges28 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fay Over a year ago

Thank you! But do you know how I can define the cards width and height in Gridview.builder? I've been looking but can't find a way

Collectives™ on Stack Overflow

Problem adding widget to GridView with button and scroll

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related