thrown during paint(): 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 544 pos 12: 'child.hasSize': is not true - flutter

I want to build a Carousel Slider that shows Product Images of a List I've made earlier, with an onPressed function that Navigates to another Route that shows the details of the tapped product, My product list is of name List< Productz >.
When I call the Carousel Slider method in my Home_Page Route I need "itemBuilder: (context, index)", so I wrapped it in a ListView.builder and wrapped that into a Container with defined height and width to avoid the error above, but on running the app nothing shows in the place where the Carousel Slider is supposed to be.. Am I doing this right?
My Carousel Slider code:
class CustomCarouselHomePage extends StatefulWidget {
final List<String> Productzz;
final Function press;
final Productz productz;
CustomCarouselHomePage(
{required this.Productzz, required this.press, required this.productz});
#override
_CustomCarouselHomePageState createState() => _CustomCarouselHomePageState();
}
class _CustomCarouselHomePageState extends State<CustomCarouselHomePage> {
int activeIndex = 0;
late final Function press;
late final Productz productz;
setActiveDot(index) {
setState(() {
activeIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Stack(
clipBehavior: Clip.none,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
child: CarouselSlider(
options: CarouselOptions(
autoPlayInterval: Duration(seconds: 4),
autoPlayCurve: Curves.fastLinearToSlowEaseIn,
autoPlayAnimationDuration: Duration(seconds: 2),
viewportFraction: 1.0,
onPageChanged: (index,reason) {
setActiveDot(index);
},
),
items: widget.Productzz.map((productzz) {
return Builder(
builder: (BuildContext context) {
return GestureDetector(
onTap: () => press (),
child: Stack(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
child: Hero(
tag: "${productz.id}",
child: Image.asset(productz.item_image),
),
),
Container(
width: MediaQuery.of(context).size.width,
color: Colors.black.withOpacity(0.2),
),
],
), );
},
);
}).toList(),
),
),
Positioned(
left: 0,
right: 0,
bottom: 10,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: List.generate(widget.Productzz.length, (idx) {
return activeIndex == idx ? ActiveDot() : InactiveDot();
})),
)
],
);
}
}
class ActiveDot extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Container(
width: 25,
height: 8,
decoration: BoxDecoration(
color: white,
borderRadius: BorderRadius.circular(5),
),
),
);
}
}
class InactiveDot extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: grey,
borderRadius: BorderRadius.circular(5),
),
),
);
}
}
My code for when I call the Carousel Slider method in Home_Page Route:
Container(
height:MediaQuery.of(context).size.height,
child: ListView.builder(
itemBuilder: (context, index) => CustomCarouselHomePage(
Productzz: [],
productz: productz[index],
press: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsScreen(
productz: productz[index],
),
)),
),
),),

Related

some part of the positioned widget out of the screen

GridView.builder item:
class CouncileMemberWidget extends StatelessWidget {
const CouncileMemberWidget(
{Key? key, this.image, this.name, this.party, this.onTap})
: super(key: key);
final String? image, name, party;
final VoidCallback? onTap;
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: Adaptive.h(2), bottom: Adaptive.h(2)),
child: InkWell(
onTap: onTap,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
top: Adaptive.h(11),
left: Adaptive.w(2),
right: Adaptive.w(2),
child: Container(
alignment: Alignment.bottomCenter,
height: Adaptive.h(12),
width: Adaptive.w(40),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7),
color: const Color.fromRGBO(1, 118, 136, 1),
),
child: Padding(
padding: EdgeInsets.only(bottom: Adaptive.h(0.3)),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
name!,
style: innerDetailsStyle,
),
],
),
),
),
),
Positioned(
child: Center(
child: Container(
height: Adaptive.h(20),
width: Adaptive.w(37),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(image!), fit: BoxFit.fill)),
),
),
),
],
),
),
);
}
}
GridView.builder code
class CouncilMemberPage extends StatelessWidget {
CouncilMemberPage({Key? key}) : super(key: key);
GlobalKey<ScaffoldState> innerScaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return Scaffold(
key: innerScaffoldKey,
drawer: const DrawerMenuWidget(),
body: ChangeNotifierProvider<CouncilMemberViewModel>(
create: (context) => CouncilMemberViewModel(),
builder: (context, child) => BackGroundWidget(
scaffoldkey: innerScaffoldKey,
pageHeader: "Meclis Üyeleri",
child: FutureBuilder<dynamic>(
future:
Provider.of<CouncilMemberViewModel>(context, listen: false)
.getCouncilMembers(),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<CouncilMemberModel?> list = snapshot.data;
return SizedBox(
height: Adaptive.h(70),
child: GridView.builder(
itemCount: list.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: Adaptive.h(3),
//childAspectRatio: Adaptive.w(15) / Adaptive.h(4.5),
crossAxisCount: 2,
),
itemBuilder: (context, index) {
return CouncileMemberWidget(
image: list[index]!.photo!,
name: list[index]!.title,
party: list[index]!.party,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
CouncilMemberDetailsPage(
name: list[index]!.title,
content: list[index]!.content,
image: list[index]!.photo,
party: list[index]!.party,
)));
},
);
}),
);
} else if (snapshot.hasError) {}
return const Center(child: CircularProgressIndicator());
}
),
),
),
);
}
}
When i list all items in the gridView.builder last item looks overflowed.You can see that in the picture below.Same error happens with the ListView.builder.Why this is happening what should i do solve this overflow.I used FractionalTransaction instead of Positioned but same error occured.

Carousel Slider is repeated almost infinite number of times vertically, instead of once, with no error showing

I'm doing a carousel slider, but it's repeating itself almost an infinite number of times, instead of showing there once in my home page, and there is no error message that I can work with, I can't seem to find why it's doing all that, any help?
Carousel Slider code:
class CarouselSliderPage extends StatefulWidget {
const CarouselSliderPage({Key? key}) : super(key: key);
#override
_CarouselSliderPageState createState() => _CarouselSliderPageState();
}
class _CarouselSliderPageState extends State<CarouselSliderPage> {
int activeIndex = 0;
setActiveDot(index) {
setState(() {
activeIndex = index;
});
}
List imageList = [
"assets/images/mobiles/4.png",
"assets/images/laptops/1.jpg",
"assets/images/mobiles/3.png",
"assets/images/laptops/7.jpg",
"assets/images/mobiles/6.png",
];
#override
Widget build(BuildContext context) {
return Stack(
clipBehavior: Clip.none,
children: [
SizedBox(
height: 10,
),
Container(
width: MediaQuery.of(context).size.width,
child: CarouselSlider(
options: CarouselOptions(
autoPlayInterval: Duration(seconds: 4),
autoPlayCurve: Curves.fastLinearToSlowEaseIn,
autoPlayAnimationDuration: Duration(seconds: 2),
viewportFraction: 1.0,
onPageChanged: (index, reason) {
setActiveDot(index);
},
),
items: imageList
.map(
(item) => Center(
child: Image.asset(
item,
fit: BoxFit.cover,
),
),
)
.toList(),
),
),
Positioned(
left: 0,
right: 0,
bottom: 10,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: List.generate(imageList.length, (idx) {
return activeIndex == idx ? ActiveDot() : InactiveDot();
})),
)
],
);
}
}
class ActiveDot extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Container(
width: 25,
height: 8,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
),
);
}
}
class InactiveDot extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(5),
),
),
);
}
}
The calling of Carousel Slider class:
Container(
height: MediaQuery.of(context).size.height,
child: ListView.builder(
itemBuilder: (context, index) =>
CarouselSliderPage(),
),
),
ListView.builder is a builder that can and will multiple of 'x' widgets it works like a loop unless told otherwise.
You can try adding a parameter into listview.builder that's called itemCount: 1 or in your specific case add 'imageList.length' and it will cap on the amount of images you have on your list.
or simply remove the listview.builder entirely and just call
CarouselSliderPage(),
Example of code below:
Container(
height: MediaQuery.of(context).size.height,
child: ListView.builder(
itemCount: imageList.length,
itemBuilder: (context, index) =>
CarouselSliderPage(),
),
),
But I would use this one below:
Container(
height: MediaQuery.of(context).size.height,
child: CarouselSliderPage(),
),
Just remove the ListView.builder
Container(
height: MediaQuery.of(context).size.height,
child: CarouselSliderPage(),
),

How to Implement a manual carousel slider in Flutter?

I am creating a product image carousel which contains pictures of shoes where the user can change the image to be viewed by selecting a different color.
The user can manually scroll through the images without an issue,however when I try to manually change the displayed carousel image, only the indicator changes, but the image remains on the first image.
class DetailsPage extends StatefulWidget {
final String url;
final String title;
final int index;
DetailsPage({this.url, this.title, this.index});
#override
_DetailsPageState createState() => _DetailsPageState();
}
class _DetailsPageState extends State<DetailsPage> {
List imgList = [
'https://i.dlpng.com/static/png/6838599_preview.png',
'https://www.manelsanchez.pt/uploads/media/images/nike-air-force-max-ii-blue-fury-18.jpg',
'https://www.vippng.com/png/detail/30-302339_nike-women-running-shoes-png-image-transparent-background.png',
];
int _current = 0;
String selected = "grey";
List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}
final CarouselController _buttonCarouselController = CarouselController();
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).canvasColor,
appBar: AppBar(
title: Center(
child: Text(
'Details',
style: TextStyle(
fontFamily: 'OpenSansLight',
fontSize: 26,
color: Theme.of(context).textTheme.headline1.color),
),
),
body: ListView(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
//Carousel Slider
CarouselSlider.builder(
options: CarouselOptions(
carouselController: _buttonCarouselController,
height: 200.0,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
initialPage: 0,
reverse: false,
autoPlay: false,
enableInfiniteScroll: false,
scrollDirection: Axis.horizontal,
onPageChanged: (index, fn) {
setState(() {
_current = index;
});
}),
itemCount: imgList.length,
itemBuilder: (BuildContext context, int index) =>
Builder(builder: (BuildContext context) {
return Image.network(
imgList[index],
fit: BoxFit.contain,
);
}),
),
SizedBox(height: 10),
//Indicator to show current index of images
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(imgList, (index, url) {
return Container(
width: 30.0,
height: 2.0,
margin: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 4.0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
color: _current == index
? Colors.deepPurple
: Colors.grey,
),
);
}),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 30,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Color',
style: TextStyle(
fontFamily: 'OpenSansLight',
fontSize: 24)),
],
),
),
),
Flexible(
fit: FlexFit.loose,
child: Container(
width: width,
height: 120,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: imgList.length,
itemBuilder: (BuildContext context, int index) {
//Color selector from images to manually control the carousel
return GestureDetector(
onTap: () {
setState(() {
selected = imgList[index];
_current = index;
_buttonCarouselController
.animateToPage(_current);
print('I HAVE SELECTED $selected');
});
},
child: ColorTicker(
image: imgList[index],
selected: selected == imgList[index],
),
);
},
),
),
),
],
),
);
Color Ticker Widget
class ColorTicker extends StatelessWidget {
final image;
final bool selected;
ColorTicker({this.image, this.selected});
#override
Widget build(BuildContext context) {
print(selected);
return Container(
margin: EdgeInsets.all(5),
width: 100,
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.scaleDown, image: NetworkImage(image)),
shape: BoxShape.circle,
border: selected
? Border.all(color: Colors.deepPurple, width: 3)
: Border.all(color: Colors.grey[500])),
// color: color.withOpacity(0.7)),
child: selected
? Center(child: Icon(Icons.check, size: 40, color: Colors.deepPurple))
: Container(),
);
}
}
I've tried all I could from the documentation : https://pub.dev/packages/carousel_slider/example
But I kept getting an error
Unhandled Exception: NoSuchMethodError: The getter 'options' was called on null
I am almost embarassed at my mistake.
In the configuration of the slider, I placed the controller in the wrong place.
I put the controller inside the Carousel options instead of under CarouselSlider
CarouselSlider(
carouselController: _buttonCarouselController,
options: CarouselOptions(
... ))
It now works :)

Flutter : Column is not support under DraggableScrollbar

this is a page of TabBarView(). I want to add some text or container(), top of the ListView.builder(). Which is scroll-able with ListView.builder(). But column() isn't supported as child of DraggableScrollbar(). Why isn't it supported it here ?
How can I add Text() or any container(), before starting ListView.builder() widget ?
import 'package:boimarket/booksdescription.dart';
import 'package:boimarket/model/model.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:draggable_scrollbar/draggable_scrollbar.dart';
class StoryBooksCategory extends StatelessWidget {
final ScrollController controller;
const StoryBooksCategory({Key key, #required this.controller})
: super(key: key);
#override
Widget build(BuildContext context) {
var _height = MediaQuery.of(context).size.height;
var _width = MediaQuery.of(context).size.width;
final Color _whiteCream = Color.fromRGBO(250, 245, 228, 1);
final Color _darkBlue = Color.fromRGBO(0, 68, 69, 1);
return Align(
alignment: Alignment.topCenter,
child: Container(
width: _width / 1.1,
child: FutureBuilder(
future: fetchBooks(),
builder: (context, AsyncSnapshot<List<Book>> snapshot) {
if (!snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
LinearProgressIndicator(
backgroundColor: _whiteCream,
),
Text("Loading"),
],
);
} else(snapshot.hasData) {
var storyBooks =
snapshot.data.where((b) => b.category == 1).toList();
storyBooks.sort((a, b) => a.name.compareTo(b.name));
print(storyBooks.length);
return DraggableScrollbar.rrect(
controller: controller,
backgroundColor: _darkBlue,
child: Column(
children: [
Text("I want to add some text here"),
ListView.builder(
controller: controller,
scrollDirection: Axis.vertical,
itemCount: storyBooks.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Route route = MaterialPageRoute(
builder: (context) => BookDescription(
storyBooksValue: storyBooks[index]),
);
Navigator.push(context, route);
},
child: Padding(
padding: const EdgeInsets.only(
left: 10.0, right: 10.0, top: 20.0),
child: Container(
width: _width / 1.1,
height: _height / 4,
decoration: BoxDecoration(
color: _whiteCream,
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 2,
spreadRadius: 2,
offset: Offset(2.0, 2.0),
)
],
),
),
),
),
},
),
],
),
),
},
},
),
),
),
},
}

Flutter show gradient Divider top of ListView

in this sample code which that have ListView and Container i would like to make simple gradient top of ListView when user is scrolling ListView items to right or left,
scrolling items to right should show gradient divider and scrolling to left should hide the divider, all of this visiblity should be have fade effect, could you help me how can i show and hide this gradient divider?
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(SampleShadow());
class SampleShadow extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'sample',
home: ShadowContainer(),
);
}
}
class ShadowContainer extends StatefulWidget {
#override
State<StatefulWidget> createState() => _ShadowContainer();
}
class _ShadowContainer extends State<ShadowContainer> with TickerProviderStateMixin {
final ValueNotifier<bool> showShadow = ValueNotifier<bool>(false);
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
backgroundColor: Colors.indigo.withOpacity(0.7),
appBar: AppBar(),
body: Container(
margin: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 100.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
color: Colors.indigo[400],
borderRadius: BorderRadius.circular(100.0),
),
),
Expanded(
child: Stack(children: <Widget>[
NotificationListener<ScrollNotification>(
onNotification: (scrollState) {
if (scrollState is ScrollEndNotification && scrollState.metrics.pixels >= 100) {
showShadow.value = true;
print('show');
} else {
showShadow.value = false;
print('hide');
}
return false;
},
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.all(10.0),
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
color: Colors.purple[400],
borderRadius: BorderRadius.circular(100.0),
),
);
},
separatorBuilder: (context, index) {
return const Divider();
},
itemCount: 50),
),
ValueListenableBuilder<bool>(
valueListenable: showShadow,
builder: (context, value, child) => value? Container(
width: 10.0,
color: Colors.green,
): Container()),
]),
),
],
),
),
],
),
),
),
);
}
}
this solution work fine, thanks to #CopsOnRoad
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(SampleShadow());
class SampleShadow extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'sample',
home: ShadowContainer(),
);
}
}
class ShadowContainer extends StatefulWidget {
#override
State<StatefulWidget> createState() => _ShadowContainer();
}
class _ShadowContainer extends State<ShadowContainer> with TickerProviderStateMixin {
final ValueNotifier<bool> showShadow = ValueNotifier<bool>(false);
AnimationController _animationController;
Animation<double> _fadeInFadeOut;
ScrollController _scrollController;
#override
void initState() {
super.initState();
_scrollController = ScrollController();
_animationController = AnimationController(vsync: this, duration: kThemeAnimationDuration);
_fadeInFadeOut = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
_animationController.forward();
_scrollController.addListener(() {
if (_scrollController.offset >= 10) {
showShadow.value = true;
} else {
showShadow.value = false;
}
});
}
#override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
backgroundColor: Colors.indigo.withOpacity(0.7),
appBar: AppBar(),
body: Container(
margin: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 100.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
color: Colors.indigo[400],
borderRadius: BorderRadius.circular(100.0),
),
),
Expanded(
child: Stack(children: <Widget>[
ListView.separated(
controller: _scrollController,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.all(10.0),
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
color: Colors.purple[400],
borderRadius: BorderRadius.circular(100.0),
),
);
},
separatorBuilder: (context, index) {
return const Divider();
},
itemCount: 50),
ValueListenableBuilder<bool>(
valueListenable: showShadow,
builder: (context, value, child) {
if (value) {
_animationController.forward();
} else {
_animationController.reverse();
}
return FadeTransition(
opacity: _fadeInFadeOut,
child: Container(
width: 10.0,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [Colors.black.withOpacity(0.5), Colors.transparent])),
),
);
}),
]),
),
],
),
),
],
),
),
),
);
}
}