Incorrect use of ParentDataWidget for CarouselSlider - flutter

I have used CarouselSlider for my other projects but the first time I could not find the reason why it gives that warning. Here is a simplified code part. I did not use any flexible or expanded widget in Stack or its parent. Mostly answers about that but there has to be a point that I am missing. Here is the link of dependency. Do you have any suggestions?
return Scaffold(
body: Column(
children: [
SizedBox(
height: (MediaQuery.of(context).size.height -
70.h -
MediaQuery.of(context).viewPadding.top) *
0.35,
child: slider()),
])
);
Stack slider() {
return Stack(
children: [
CarouselSlider(
options: CarouselOptions(
autoPlayInterval: const Duration(seconds: 2),
autoPlay: true,
// aspectRatio: 2.3,
height: (MediaQuery.of(context).size.height -
70.h -
MediaQuery.of(context).viewPadding.top) *
0.35,
viewportFraction: 0.8,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.scale,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}),
items: images
.map(
(item) => Center(child: item),
)
.toList(),
),
Positioned(
child: Column(
children: [
SizedBox(
height: (MediaQuery.of(context).size.height -
70.h -
MediaQuery.of(context).viewPadding.top) *
0.3),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: images.asMap().entries.map((entry) {
return Container(
width: 8.w,
height: 8.h,
margin:
EdgeInsets.symmetric(vertical: 8.w, horizontal: 4.h),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: ColorSelect.color
.withOpacity(_current == entry.key ? 1 : 0.4)),
);
}).toList(),
),
],
),
)
],
);
}

Related

How i can set custom animation between slide in CarouselSlider flutter

I have created an image slider using CarouselSlider, I want to set animation when the page change but when the page change it will not reflect to the dot indicator
slider and dot position
here is the full code of my slider
final RxInt _current = 0.obs;
PageController pageViewController = PageController();
final CarouselController _controller = CarouselController();
#override
void initState() {
super.initState();
WidgetsBinding.instance!.addPostFrameCallback((_) {
for (var imageUrl in images) {
precacheImage(NetworkImage(imageUrl), context);
}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Slider demo')),
body: Obx(
() => Stack(
children: [
Positioned(
bottom: 40.0,
left: 0.0,
right: 0.0,
child: Padding(
padding: const EdgeInsets.only(top: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedSmoothIndicator(
activeIndex: _current.value,
count: images.length,
effect: ExpandingDotsEffect(
radius: 10,
dotWidth: 10,
dotHeight: 10,
activeDotColor: Colors.green,
expansionFactor: 4,
dotColor: Colors.green.withOpacity(0.17),
), // your preferred effect
onDotClicked: (index) {
pageViewController.animateToPage(
index,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 50),
child: Expanded(
child: Container(
child: CarouselSlider.builder(
itemCount: images.length,
carouselController: _controller,
options: CarouselOptions(
autoPlay: true,
aspectRatio: 14 / 8.5,
viewportFraction: 0.8,
enlargeCenterPage: true,
autoPlayAnimationDuration: const Duration(seconds: 2),
autoPlayInterval: const Duration(seconds: 4),
autoPlayCurve: Curves.easeInOutSine,
onPageChanged: (index, reason) {
_current.value = index;
},
scrollPhysics: const BouncingScrollPhysics(),
),
itemBuilder: (context, index, realIdx) {
return index == _current.value
? ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: [
Image.network(
images[index],
fit: BoxFit.cover,
width: 1000,
height: 170,
)
],
),
)
: Padding(
padding: const EdgeInsets.only(top: 25),
child: Container(
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: [
Image.network(
images[index],
fit: BoxFit.cover,
width: 1000,
height: 172,
)
],
),
),
),
);
},
)),
),
),
],
),
),
);
}

How to add Carousal images in flutter

how to add these images in carousal in flutter
Use this carousel_slider 4.0.0 package from pubdev.
Installation
Add carousel_slider: ^4.0.0 to your pubspec.yaml dependencies. And import it:
import 'package:carousel_slider/carousel_slider.dart';
How to use
Simply create a CarouselSlider widget, and pass the required params:
CarouselSlider(
options: CarouselOptions(height: 400.0),
items: [1,2,3,4,5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.amber
),
child: Text('text $i', style: TextStyle(fontSize: 16.0),)
);
},
);
}).toList(),
)
https://pub.dev/packages/smooth_page_indicator you can use this for dot animation along with https://pub.dev/packages/carousel_slider here is a little example please adjust size accordingly
class Carosel extends StatelessWidget {
List<listScreen> introduction = [
listScreen(image: 'assets/Reading_Plans.png'),
listScreen(image: 'assets/Reading_Plans.png'),
listScreen(image: 'assets/Reading_Plans.png'),
listScreen(image: 'assets/Reading_Plans.png'),
];
set index(value) => _index.value = value;
get index => _index.value;
final _index = 0.obs;
final CarouselController _controller = CarouselController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: MediaQuery.of(context).size.width / 1.5,
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height / 2,
child: CarouselSlider(
carouselController: _controller,
options: CarouselOptions(
enableInfiniteScroll: false,
viewportFraction: 1,
height: MediaQuery.of(context).size.height / 3,
aspectRatio: 1.0,
onPageChanged: (ind, reason) {
index = ind;
}),
items: introduction
.map((listScreen item) => Column(
children: [
SizedBox(
height: kToolbarHeight / 2,
),
Container(
child: Image(
image: AssetImage(item.image),
),
),
SizedBox(
height: 20,
),
// Spacer(),
],
))
.toList(),
),
),
Spacer(),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 35.0,
vertical: 15,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Obx(() {
return index != 3
? Container(
width: 90,
child: AnimatedSmoothIndicator(
activeIndex: index,
count: 4,
effect: ExpandingDotsEffect(
dotHeight: 13,
dotWidth: 13,
activeDotColor: Color(0xff5C5C78),
),
),
: Container();
}),
],
),
),
Spacer(),
],
),
),
),
);
}
}
The other answers are correct and fully functional. You can use
carousel_slider: ^4.0.0
or simply follow the following link to get a complete understanding of code.
https://www.youtube.com/watch?v=JEMx2ax0734&t=279s

Translate other elements on DraggableScrollableSheet top-bottom movement

Hi I have to translate two of my widgets based on the DraggableScrollableSheet drag position (you can think this bottom sheet as in GMaps). The widgets I have to move/animates are:
Text - It needs to translate & scale back-and-forth and in-out respectively following an arc path simultaneously. (See expected video)
Row - It needs to translate a bit and then out. Again back-and-forth.
Trails -
Text widget scaling in-out properly but translating in some weird way. (See actual video)
Row widget is fading in-out fine, but having a hard time translating it.
Expected Vid -
https://drive.google.com/file/d/1wg3q8KJc6zMe3b6mw-LgPN62FxK4dMMj/view?usp=sharing
actual vid -
https://drive.google.com/file/d/1umjDVj6PXqiatF6JVt8EeKTCxU2LyM7E/view?usp=sharing
Code -
final Duration _animationDuration = const Duration(milliseconds: 300);
bool _isNavShown = true;
double yValue = -35.0;
void _applyEffectsOnDrag(double factor) {
print(factor);
if (factor > 0.7) {
_isNavShown = false;
} else {
_isNavShown = true;
}
}
Widget _getNavigationButtons(BuildContext ctx, bool isHidden) {
return Padding(
padding: verticalAndHorizontailPadding,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
...[1, 2, 3]
.map(
(e) => Container(
decoration: CircleStyles.navButton,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: padding
decoration: decoration,
child: Icon(Icons.verified_user),
),
SizedBox(height: AppMediaQuery(ctx).appHeight(2)),
Text('block heading')
],
),
),
)
.toList()
],
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(gradient: Variables.circleGradient),
child: Stack(
children: [
Column(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: AppMediaQuery(context).appHorizontalPadding(4),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
// TODO: Goto home screen
},
child: Container(
alignment: Alignment.center,
width: 32,
height: 32,
decoration: backButtonStyle,
child: const Icon(
Icons.chevron_left,
),
),
),
IconButton(icon: const Icon(Icons.more_horiz), onPressed: null),
],
),
),
TweenAnimationBuilder(
duration: _animationDuration,
curve: Curves.easeInOut,
tween: Tween<double>(begin: 0, end: !_isNavShown ? yValue : 0),
child: Padding(
padding: somePadding,
child: const Align(
alignment: Alignment.centerLeft,
child: const Text('Circles'),
),
),
builder: (_, double dy, Widget ch) {
return Transform.scale(
scale: _isNavShown ? 1 : 0.8,
child: Transform.translate(
offset: Offset(0, dy),
child: ch,
),
);
},
),
AnimatedOpacity(
duration: _animationDuration,
opacity: _isNavShown ? 1 : 0,
child: _getNavigationButtons(context, true),
),
],
),
NotificationListener<DraggableScrollableNotification>(
onNotification: (obj) {
setState(() {
return _applyEffectsOnDrag(obj.extent);
});
},
child: DraggableScrollableSheet(
initialChildSize: 0.6,
minChildSize: 0.6,
maxChildSize: 0.9,
builder: (context, ctrl) {
return Container(
decoration: CircleStyles.sheetBase,
child: ConversationList(ctrl),
);
},
),
),
],
),
),
);
}

Flutter slide with inner arrows

How can I achieve such behavior in Flutter? any widget or plugins example?
See this gif
I tried carousels plugins and viewPagers widgets but couldn't make it work.
here is the sample code I started with.
CarouselSlider(
items: [
Container(child: Text("Complimentary"), width: double.infinity),
Container(child: Text("Complimentary"), width: double.infinity),
Container(child: Text("Complimentary"), width: double.infinity),
Container(child: Text("Complimentary"), width: double.infinity),
Container(child: Text("Complimentary"), width: double.infinity),
],
options: CarouselOptions(
height: 39 * resizeFactor,
autoPlay: false,
enlargeCenterPage: true,
autoPlayInterval: Duration(seconds: 10),
),
),
I made it work by using both Swiper and Row of arrows, with the following code:
Stack(
children: [
Container(
height: 39 * resizeFactor,
child: Swiper(
itemCount: 4,
itemBuilder: (context, index) => getIndexWidget(index), // -> Text widget.
viewportFraction: 0.4,
onIndexChanged: (value) {
setState(() => carouselIndex = value);
},
loop: false,
controller: swiperController,
),
),
Container(
padding: EdgeInsets.symmetric(horizontal: 30 * resizeFactor),
height: 39 * resizeFactor,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
getIndicatorWidget(false), // back arrow icon.
getIndicatorWidget(true), // forward arrow icon.
],
),
),
],
),
Thank you for your contributions.

How to set image size in carousel slider flutter

I am new in flutter. I am using carousel slider package to show image. I want to set my image size. Now I faced the problem with my vertical image have been crop and show part center only. Here is my code:
final List<String> imgList = [
'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
];
final List<Widget> imageSliders = imgList.map((item) => Container(
child: Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: <Widget>[
Image.network(item, fit: BoxFit.cover, width: 1000.0),],
)),),
)).toList();
class CarouselWithIndicatorDemo extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _CarouselWithIndicatorState();
}
}
class _CarouselWithIndicatorState extends State<CarouselWithIndicatorDemo> {
int _current = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Carousel with indicator demo')),
body: Column(
children: [
CarouselSlider(
items: imageSliders,
options: CarouselOptions(
enlargeCenterPage: true,
aspectRatio: 2.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});}), ),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: imgList.map((url) {
int index = imgList.indexOf(url);
return Container(
width: 8.0,height: 8.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,color: _current == index ? Color.fromRGBO(0, 0, 0, 0.9): Color.fromRGBO(0, 0, 0, 0.4),
), );
}).toList(),
), ]
),
);
}
}
Anyone can help me? Thanks in advance
This function can help you while scrolling left to right carousel images
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: parentHeight * .025),
child: CarouselSlider(
height: parentHeight * .45,
enlargeCenterPage: true,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 4),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
scrollDirection: Axis.horizontal,
onPageChanged: (index) {
setState(() {
_current = index;
});
},
items: imageTextList.map((data) {
return Builder(
builder: (BuildContext context) {
return Wrap(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(
horizontal: 8.0, /*vertical: 10.0 */
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Image(
image: new AssetImage(data.imageUrl),
fit: BoxFit.cover,
),
),
),
getNewTextLayout(data, parentHeight, parentWidth),
],
);
},
);
}).toList(),
),
),
],
);