CODEWITHSUNDEEP
flutterdart
Adriana Giancarla Pope
Adriana Giancarla Pope

Reputation: 143

How do I get my page to scroll using Flutter?

So I'm working on a tarot app and I can't figure out how to make this page scrollable. I'm currently using the element SingleChildScrollView to wrap my elements. Right now it scrolls down part way and then gets stuck, and it bounces back up and I can't see the rest of my screen down below.

I'm thinking I should probably use a multi child scroll view widget but not sure how to get that to work.

What I'm looking for is to be able to display a list of elements and have them scroll on the page.

I'm sure I'm doing this wrong if someone could me out that would be awesome! :) Thanks in advance for your help and advice

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                child: getSpread(widget.selected),
              ),
              ListView.builder(
                itemCount: widget.selected.length,
                itemBuilder: (context, index) {
                  final int cardNumber = widget.selected[index];
                  final TarotCard tarotCard = tarotMaster.tarotDeck[cardNumber];
                  return TarotCardDetails(tarotCard: tarotCard);
                },
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
              ),
              BottomButton(
                onTap: () {
                  Navigator.pushNamed(context, '/home');
                  print(widget.selected);
                },
                buttonTitle: 'BACK TO HOME',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

Views: 69

Answers (1)

Sachin Bhankhar
Sachin Bhankhar

Reputation: 900

Use physics in ListView.builder() this issue happens because flutter does not know what to scroll because it found two scrollable widget. You can specify a empty ScrollPhysics so flutter will know ListView will not need to be scrolled instead the entire page which is SingleChildScrollView widget items to be scroll 

@override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    child: getSpread(widget.selected),
                  ),
                  ListView.builder(
                    physics: ScrollPhysics(),
                    itemCount: widget.selected.length,
                    itemBuilder: (context, index) {
                      final int cardNumber = widget.selected[index];
                      final TarotCard tarotCard = tarotMaster.tarotDeck[cardNumber];
                      return TarotCardDetails(tarotCard: tarotCard);
                    },
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                  ),
                  BottomButton(
                    onTap: () {
                      Navigator.pushNamed(context, '/home');
                      print(widget.selected);
                    },
                    buttonTitle: 'BACK TO HOME',
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

Hope this will help you.

Upvotes: 1

Related Questions