How to make horizontal scroll in flutter

Question

Currently I'm displaying my data like this (screenshot) from my backend database but I'm just wondering how can I modify it so that it'll display only one card at a time on the screen and will be able to scroll horizontally.

I have tried changing wrapping with ListView and added scrollDirection: Axis.horizontal, but I'm getting this error for reason.

Any help or suggestion would be really appreciated.

Exception has occurred.
FlutterError (RenderFlex children have non-zero flex but incoming width constraints are unbounded.
When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

detailposts.value.length > 0
? Container(
    child: Expanded(
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          ...detailposts.value
              .asMap()
              .entries
              .map((post) => FAQCard(
                  background: post.key % 2 == 0
                      ? (color.state == 'dark'
                          ? eachPostBgDark
                          : eachPostBg)
                      : (color.state == 'dark'
                          ? eachPostBgLowDark
                          : eachPostBgLow),
                  post: post.value))
              .toList(),
          loadingMore.value
              ? Container(
                  margin: EdgeInsets.only(top: 10, bottom: 20),
                  child: SpinKitRotatingCircle(
                    color: colorPrimary,
                    size: 30.0,
                  ),
                )
              : SizedBox()
        ],
      ),
    ),
  )
: Container(),

sdf

Can you include more about parent widget and some are like FAQCard... not clear here. Can you provide full widget that will reproduce the same error? — Md. Yeasin Sheikh
– Md. Yeasin Sheikh, Commented May 27, 2022 at 18:51

Delwinn · Accepted Answer · 2022-05-27 18:56:39Z

3

Wrap in Container with height set to height of card+15px for shadow and width to MediaQuery.of(context).size.width . child of container be SingleChildScrollView() -> (1**)-> ListView or ListView.builder

If below code gives an error, replace 1** with Row()

? Container(
      height: 250,  ///assumed
      width: MediaQuery.of(context).size.width,  ///width of the screen
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
        child: ListView(
          physics: NeverScrollableScrollPhysics(),
          children: [
            ///your items
          ],
        )
        ),
      ), 
: Container()

answered May 27, 2022 at 18:56

Delwinn

1,0196 silver badges22 bronze badges

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

Comments

Ankit Kumar Maurya · Accepted Answer · 2022-05-27 17:35:49Z

1

If you want to show only one card at a time and also scrollable at the same time, then you should use page view.

answered May 27, 2022 at 17:35

Ankit Kumar Maurya

1,27711 silver badges23 bronze badges

Comments

Alejandro Aviña · Accepted Answer · 2022-05-27 17:37:41Z

0

As the documentation says:

An Expanded widget must be a descendant of a Row, Column, or Flex, and the path from the Expanded widget to its enclosing Row, Column, or Flex must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets)

Expanded has the wrong parent widget, try wrapping that expanded in a Row.

answered May 27, 2022 at 17:37

Alejandro Aviña

861 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to make horizontal scroll in flutter

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related