Horizontal viewport was given unbounded height - Flutter

Question

I'm a newbie in App development and encountering an error while rendering the Horizontal Card scroll.

howItWorks.dart

class HowItWorksCards extends StatefulWidget {
  HowItWorksCards();
  @override
  _HowItWorksCardsState createState() => _HowItWorksCardsState();
}

class _HowItWorksCardsState extends State<HowItWorksCards> {
  int _currentPage = 0;
  PageController _pageController = PageController(viewportFraction: 0.8, keepPage: true);

  List<Widget> _pages = [
    SliderPage(
        index: 1,
        title: "Title1",
        info:"Summary",
        image: "assets/images/howItWorks/1.png"),
    SliderPage(
        index: 1,
        title: "Title1",
        info:"Summary",
        image: "assets/images/howItWorks/1.png"),
    SliderPage(
        index: 1,
        title: "Title1",
        info:"Summary",
        image: "assets/images/howItWorks/1.png"),
  ];

  _onchanged(int index) {
    setState(() {
      _currentPage = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          flex: 5,
          child: PageView.builder(  // this throws the exception.
            controller: _pageController,
            // physics: BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            itemCount: _pages.length,
            onPageChanged: _onchanged,
            itemBuilder: (context, int index) {
              return _pages[index];
            },
          ),
        ),
        Flexible(   //  this works absolutely fine when the above Flexible widget is commented.
          flex: 4,
          child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: List<Widget>.generate(
                _pages.length,
                    (int index) {
                  return AnimatedContainer(
                      duration: Duration(milliseconds: 300),
                      height: 5,
                      width: (index == _currentPage) ? 30 : 10,
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: (index == _currentPage)
                              ? AppTheme.globalTheme.primaryColor
                              : AppTheme.globalTheme.primaryColor
                              .withOpacity(0.5)));
                },
              )),
        ),
      ],
    );
  }
}

slider.dart

class SliderPage extends StatelessWidget {
  final String image;
  final int index;
  final String title;
  final String info;

  SliderPage(
      {@required this.image,
        @required this.info,
        @required this.title,
        @required this.index});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 20,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.all(5.0),
              height: 175,
              child: Image.asset(
                image,
                fit: BoxFit.fitHeight,
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 5),
                    child: Text(this.title,
                        style: getFontStyle(
                            bold: true,
                            color: Color(0xFF3C3C43),
                            fontSize: 18,
                            fontStyle: FontStyles.SFProDisplay),
                        textAlign: TextAlign.center),
                  ),
                ],
              ),
            ),
            Container(
              padding:
              const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5),
              child: Text(
                this.info,
                style: getFontStyle(
                    color: Color(0xFF3C3C43),
                    fontSize: 16,
                    fontStyle: FontStyles.SFProDisplay),
                textAlign: TextAlign.center,
              ),
            ),
          ]),
    );
  }
}

main.dart

void main() => runApp(MaterialApp(home: AmazonOrdersInvoiceOnboarding()));

class AmazonOrdersInvoiceOnboarding extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GoBackAppBar(
        customBackGroundColor: Color(0x1affb500),
        title: "",
      ),
      body: ListView(
        shrinkWrap: true,
        children: [
          
          HowItWorksCards(),
          
        ],
      ),
    );
  }
}

I'm getting some exceptions.

1. Horizontal viewport was given unbounded height. - Have already used Flexible. Not sure why I'm still getting this exception.

2. RenderBox was not laid out: RenderViewport#c29be NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

I found a lot of related questions on SO, but to no avail.

Answer 1

This error happen when we use infinite sized widget inside one-another, here you are using Column inside ListView, both take infinite height, if you wrap Column fixed sized widget it will solve the problem,

And I strongly suggest you to watch this video by flutter https://www.youtube.com/watch?v=jckqXR5CrPI

on howItWorks.dart

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          flex: 5,
          child: Container(
            height: 250,
            child: PageView.builder(
              // this throws the exception.
              controller: _pageController,
              // physics: BouncingScrollPhysics(),
              scrollDirection: Axis.horizontal,
              itemCount: _pages.length,
              onPageChanged: _onchanged,
              itemBuilder: (context, int index) {
                return _pages[index];
              },
            ),
          ),
        ),
        Flexible(
          //  this works absolutely fine when the above Flexible widget is commented.
          flex: 4,
          child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: List<Widget>.generate(
                _pages.length,
                (int index) {
                  return AnimatedContainer(
                      duration: Duration(milliseconds: 300),
                      height: 5,
                      width: (index == _currentPage) ? 30 : 10,
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: Colors.amber)
                      //  (index == _currentPage)
                      //     ? AppTheme.globalTheme.primaryColor
                      //     : AppTheme.globalTheme.primaryColor
                      //     .withOpacity(0.5))
                      );
                },
              )),
        ),
      ],
    );
  }