SlideShow and opacity Cards - flutter

Question

I tried to create a slideshow as you can see and it works, but after I added the code to create Cards under my SlideShow, I got this error:
I/flutter (12937): Another exception was thrown: 'package:flutter/src/rendering/object.dart': Failed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.
I/flutter (12937): Another exception was thrown: RenderBox was not laid out: RenderFlex#57317 relayoutBoundary=up1 NEEDS-PAINT
I/flutter (12937): Another exception was thrown: NoSuchMethodError: The method '>' was called on null.
Please Help me to resolve this issue.
import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';
import 'package:flutter/services.dart';
void main() => runApp(new MyApp());
Widget myGridItems (String gridName, String gridImage, int color1, int color2){
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0),
gradient: new LinearGradient(
colors: [
Color(color1),
Color(color2),
],
begin: Alignment.centerLeft,
end: new Alignment(1.0, 1.0),
)
),
child: Stack(
children: <Widget>[
Opacity(
opacity: 0.3,
child: Container(
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(24.0),
image: DecorationImage(
image: AssetImage('assets/s1.jpg'),
fit: BoxFit.fill)
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(child: Text("Job", style: TextStyle(color: Colors.white, fontSize: 16),)),
SizedBox(width: 10.0),
Container(child: Icon(Icons.school, color: Colors.white)),
SizedBox(width: 10.0),
Container(child: Text("Guide", style: TextStyle(color: Colors.white, fontSize: 16),)),
],
),
),
SizedBox(height: 10.0),
Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Text(gridName, style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),),
),
],
)
],
),
);
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown
]);
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Carousel',
home: ImageCarousel(),
);
}
}
class ImageCarousel extends StatefulWidget {
_ImageCarouselState createState() => new _ImageCarouselState();
}
class _ImageCarouselState extends State<ImageCarousel> with SingleTickerProviderStateMixin {
Animation<double> animation;
AnimationController controller;
initState() {
super.initState();
controller = new AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
animation = new Tween(begin: 0.0, end: 18.0).animate(controller)
..addListener(() {
setState(() {
// the state that has changed here is the animation object’s value
});
});
controller.forward();
}
#override
Widget build(BuildContext context) {
double screenHeight = MediaQuery.of(context).size.height;
Widget carousel = new Carousel(
boxFit: BoxFit.cover,
images: [
new AssetImage('assets/s1.jpg'),
new AssetImage('assets/s2.jpg'),
],
animationCurve: Curves.fastOutSlowIn,
animationDuration: Duration(seconds: 1),
);
Widget banner = new Padding(
padding: const EdgeInsets.only(top: 20.0, left: 20.0),
child: new Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
bottomRight: Radius.circular(15.0)),
color: Colors.amber.withOpacity(0.5),
),
padding: const EdgeInsets.all(10.0),
child: new Text(
'Enter to learn, leave to achieve',
style: TextStyle(
fontFamily: 'fira',
fontSize: animation.value, //18.0,
//color: Colors.white,
),
),
),
// ),
// ),
);
return new Scaffold(
appBar: AppBar(
title: Text('Kelden Bilingual Higher Institute of Professional Studies\n'
'Accord N° 18-1020/L/MINSUP/SG/DDES/SD-ESUP/SDA/LMN du 03/12/2018\n'
'Arrêté N° 078/MINEFOP/SG/DFOP/SDGSF/SACD du 13/03/2017', textAlign: TextAlign.center, style: TextStyle(fontSize: 9.5,),),
),
backgroundColor: Colors.blue[200],
body: new Column(
children: <Widget>[
new Container(
padding: const EdgeInsets.fromLTRB(0, 1, 0, 90.0),
height: screenHeight / 2,
child: new ClipRRect(
borderRadius: BorderRadius.circular(0.0),
child: new Stack(
children: [
carousel,
banner,
],
),
),
),
GridView.count(
crossAxisCount: 2,
padding: EdgeInsets.all(16.0),
childAspectRatio: 0.9,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
children: <Widget>[
myGridItems(gridName, gridImage, color1, color2)
],
)
],
),
);
}
dispose() {
controller.dispose();
super.dispose();
}
}

Answer 1

You just need to wrap your GridView with a Flexible so that it plays nice with the Column:
Flexible(
child: GridView.count(
primary: false,
crossAxisCount: 2,
padding: EdgeInsets.all(16.0),
childAspectRatio: 0.9,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
children: <Widget>[
myGridItems(gridName, gridImage, Colors.blue, Colors.yellow)
],
),
)
Change the top of your myGridItems to this:
Widget myGridItems (String gridName, String gridImage, Color color1, Color color2){
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24.0),
gradient: new LinearGradient(
colors: [
color1,
color2,
],
begin: Alignment.centerLeft,
end: new Alignment(1.0, 1.0),
)
Please note that I've changed the myGridItems call to:
myGridItems(gridName, gridImage, Colors.blue, Colors.yellow)