Horizontal viewport was given unbounded height

0
votes

I want to view Carousel under Column in 'body:' section but I receive this error: The following assertion was thrown during performResize():

Horizontal viewport was given unbounded height.

Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand. The relevant error-causing widget was:

ListView file:///Users/ahmed/AndroidStudioProjects/flutter_app_service2/lib/screens/home/profile_list.dart:27:21 When the exception was thrown, this was the stack:

0 RenderViewport.performResize. (package:flutter/src/rendering/viewport.dart:1289:15)

1 RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1301:6)

2 RenderObject.layout (package:flutter/src/rendering/object.dart:1746:9)

3 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:110:13)

4 RenderObject.layout (package:flutter/src/rendering/object.dart:1767:7)

... The following RenderObject was being processed when the exception was fired: RenderViewport#d699b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE ... needs compositing ... parentData: (can use size) ... constraints: BoxConstraints(0.0<=w<=414.0, 0.0<=h<=Infinity) ... size: MISSING ... axisDirection: right ... crossAxisDirection: down ... offset: ScrollPositionWithSingleContext#209bd(offset: 0.0, range: null..null, viewport: null, ScrollableState, BouncingScrollPhysics, IdleScrollActivity#ac774, ScrollDirection.idle) ... anchor: 0.0 RenderObject: RenderViewport#d699b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE needs compositing parentData: (can use size) constraints: BoxConstraints(0.0<=w<=414.0, 0.0<=h<=Infinity) size: MISSING axisDirection: right crossAxisDirection: down offset: ScrollPositionWithSingleContext#209bd(offset: 0.0, range: null..null, viewport: null, ScrollableState, BouncingScrollPhysics, IdleScrollActivity#ac774, ScrollDirection.idle) anchor: 0.0 ... center child: RenderSliverPadding#201ae NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE ... parentData: paintOffset=Offset(0.0, 0.0) ... constraints: MISSING ... geometry: null ... padding: EdgeInsets.zero ... textDirection: ltr ... child: RenderSliverList#b683f NEEDS-LAYOUT NEEDS-PAINT ... parentData: paintOffset=Offset(0.0, 0.0) ... constraints: MISSING ... geometry: null ... no children current live

Here is my code in home:

body: Column(
      children: <Widget>[
        ProfileList(),
      ],
    ),

and here is ProfileList which points to ProfileCarousel:

class _ProfileListState extends State<ProfileList> {
@override
Widget build(BuildContext context) {
final profiles = Provider.of<List<Profile>>(context);

profiles.forEach((profile) {
  print(profile.firstName);
  print(profile.lastName);
  print(profile.country);
  print(profile.city);
  print(profile.imgUrl);
});

return ListView.builder(
  scrollDirection: Axis.horizontal,
  itemBuilder: (context, index) {

  },
  itemCount: profiles.length,
);
}
}

here is ProfileCarousel:

class ProfileCarousel extends StatelessWidget {
final Profile profile;
ProfileCarousel({this.profile});
@override
Widget build(BuildContext context) {
return Container(
  margin: EdgeInsets.all(10.0),
  width: 210.0,
  child: Stack(
    alignment: Alignment.topCenter,
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              offset: Offset(0.0, 2.0),
              blurRadius: 6.0,
            ),
          ],
        ),
        child: Stack(
          children: <Widget>[
            Hero(
              tag: profile.imgUrl,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child: Image(
                  height: 180.0,
                  width: 180.0,
                  image: NetworkImage(profile.imgUrl),

                ),
              ),
            ),
            Positioned(
              left: 10.0,
              bottom: 10.0,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    profile.firstName,
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 24.0,
                        letterSpacing: 1.2,
                        color: Colors.white),
                  ),
                  Row(
                    children: <Widget>[
                      Icon(
                        Icons.arrow_upward,
                        size: 10.0,
                        color: Colors.white,
                      ),
                      SizedBox(width: 5.0),
                      Text(
                        profile.city,
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      )
    ],
  ),
);
}
}
2
listviewflutterdartcarousel

2 Answers

1
votes

I managed to find solution for it just by wrapping the ProfileList with SizedBox widget and give it a proper height:

body: Column(
      children: <Widget>[
        SizedBox(height: 500, child: ProfileList()),
      ],
    ),
1
votes

It's simple give area to ProfileList() so it can properly viewed

return Scaffold(
  body: Container(
    width: double.infinity,
    height: double.infinity,
    child: ProfileList(),
  ),
),