stack with Carousel causes the app to crash - flutter

Question

when using the stack with carousel it work for a which but when navigating or scrolling the app suddenly freeze and crashes by showing the carousel package code. and i have also used listview biulder.
this code is just of carousel and stack
class Carousels extends StatelessWidget {
const Carousels({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
child: Carousel(
autoplay: false,
dotSize: 4.0,
dotSpacing: 15.0,
dotColor: Colors.lightBlueAccent,
indicatorBgPadding: 5.0,
dotBgColor: Color.fromARGB(255, 100, 99, 100).withOpacity(0.5),
images: const [
AssetImage('assets/finallogo.png'),
AssetImage('assets/rr.png'),
],
),
),
Positioned(
top: 0,
right: 5,
child: Icon(
Icons.favorite,
color: Colors.red,
),
),
Positioned(
child: Icon(
Icons.star_rate_sharp,
color: Colors.white,
),
)
],
);
}
}

Answer 1

add Sizedbox like below
class Carousels extends StatelessWidget {
const Carousels({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Stack(
children: [
SizedBox(
height:300
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
child: Carousel(
autoplay: false,
dotSize: 4.0,
dotSpacing: 15.0,
dotColor: Colors.lightBlueAccent,
indicatorBgPadding: 5.0,
dotBgColor: Color.fromARGB(255, 100, 99, 100).withOpacity(0.5),
images: const [
AssetImage('assets/finallogo.png'),
AssetImage('assets/rr.png'),
],
),
),
),
Positioned(
top: 0,
right: 5,
child: Icon(
Icons.favorite,
color: Colors.red,
),
),
Positioned(
child: Icon(
Icons.star_rate_sharp,
color: Colors.white,
),
)
],
);
}
}

Answer 2

You can use carousel_slider package: carousel_slider: ^4.2.1
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static List<String> categories = [
'Soft Drinks',
'Smoothies',
'Water',
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: CarouselSlider(
options: CarouselOptions(
aspectRatio: 1.5,
viewportFraction: 0.9,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
autoPlay: true
),
items: categories
.map((category) => HeroCarouselCard(category: category))
.toList(),
),
);
}
}
class HeroCarouselCard extends StatelessWidget {
final String? category;
const HeroCarouselCard({Key? key, this.category})
: super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 5.0),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: <Widget>[
Image.network(
'https://images.unsplash.com/photo-1631631480669-535cc43f2327?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmFja2dyb3VuZCUyMGltYWdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80',
fit: BoxFit.cover,
width: 1000.0),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 0, 0)
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Text(
category!,
style: TextStyle(
color: Colors.white
),
),
),
),
],
)),
);
}
}