'RenderBox Error with CarouselSlider and ListView: RenderRepaintBoundary#83bf7 NEEDS-LAYOUT NEEDS-PAINT

I am trying to get a result like the image attached below. However, when the welcome.dart file is executed, the following error appears. If I return the carousel and listview independently, there is no error.

I wanna get this screen

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

class Welcome extends StatefulWidget {
  const Welcome({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _WelcomeState createState() => _WelcomeState();
}

class _WelcomeState extends State<Welcome> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height * 1;

return Scaffold(
  backgroundColor: const Color(0xffdfe1e8),
  body: ListView(
      padding: EdgeInsets.only(top: screenHeight * 0.15),
      children: [
        SizedBox(
          height: screenHeight * 0.6,
          child: Image.asset('assets/bg/splash.png'),
        ),
      ]),
  persistentFooterButtons: <Widget>[
    Stack(
      children: [
        SizedBox(
            height: 300,
            child: Column(
              children: [
                ListView(
                  children: [
                    CarouselSlider(
                      items: const [
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                        Text(
                            'Tad asdfnwei asedftdoi vasdfazsdd asdfasd asdfasd sdfsfd  asdfasf a sadfdsfdsfad adfadfa adsfadfef  adsfadsfaf asdfafe4rfsdfvsdaf  afe4f adsfafaaf'),
                      ],

                      //Slider Container properties
                      options: CarouselOptions(
                        height: 180.0,
                        // enlargeCenterPage: true,
                        autoPlay: true,
                        aspectRatio: 2 / 1,
                        autoPlayCurve: Curves.linear,
                        enableInfiniteScroll: false,
                        autoPlayAnimationDuration:
                            Duration(milliseconds: 800),
                        viewportFraction: 1,
                        scrollDirection: Axis.horizontal,
                      ),
                    ),
                  ],
                ),
                Row(
                   children: [
                     OutlinedButton(
                         onPressed: () {}, child: const Text('Skip')),
                     OutlinedButton(
                         onPressed: () {}, child: const Text('Next')),
                   ],
                ),
              ],
            )),
          ],
        )
      ],
    );
  }
}

This is Error

Error screenshot

As someone new to Flutter, I'm going crazy because I can't figure out why. I've googled a lot, but there doesn't seem to be a solution that works for my situation. thank you.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source