Comments (7)
You can take a look at the example file. The slider accept a list of widget, and you can display whatever you want in the widget.
If you don't know how to achieve this, just take a look at this:
new Padding(
padding: new EdgeInsets.symmetric(vertical: 15.0),
child: new CarouselSlider(
items: map<Widget>(imgList, (index, i) {
return new Container(
margin: new EdgeInsets.all(5.0),
child: new ClipRRect(
borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
child: new Stack(
children: <Widget>[
new CachedNetworkImage(
imageUrl: i,
fit: BoxFit.cover,
width: 1000.0,
placeholder: placeholder,
),
new Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: new Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
colors: [Color.fromARGB(200, 0, 0, 0), Color.fromARGB(0, 0, 0, 0)],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
)
),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
child: new Text('No. $index image',
style: new TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
)
)
),
],
)
)
);
}).toList(),
autoPlay: false,
viewportFraction: 0.9,
aspectRatio: 2.0,
)
),
from flutter_carousel_slider.
What kind of fading effect do you want? Can you post a screenshot or a video? Slider pagination is possible, I'll add this feature in next release.
from flutter_carousel_slider.
@serenader2014 any news on when the fade effect would be supported? This is one of our requirements and we do not want to use another plugin because we already implemented yours on our other pages
from flutter_carousel_slider.
@serenader2014 Thank you for the reply... What I was trying to achieve was text outside the image below it. Anyways, thanks for the help. I got a lot of idea from the above code.
from flutter_carousel_slider.
You're welcome. I'm closing this issue if you don't have other question.
from flutter_carousel_slider.
I solved the above problem. But, is there any way to add the fade effect? And also what about slider pagination
from flutter_carousel_slider.
@serenader2014 Thank you for the reply... What I was trying to achieve was text outside the image below it. Anyways, thanks for the help. I got a lot of idea from the above code.
Do you find a solution for how to show a caption over the slider?
I would like to show a caption at the center bottom of slider,
And my half of caption be inside of slider and half of caption be outside of slider.
from flutter_carousel_slider.
Related Issues (20)
- Items with width > of screen size and horizontal scroll?
- Support carousel m3
- Resetting the status when the parent widget status is reinitialized HOT 1
- Error: A method declaration needs an explicit list of parameters. Try adding a parameter list to the method declaration. Widget getGestureWrapper(Widget child) {
- No built-in indicator
- flutter 3.10 not building with carousel_slider HOT 1
- Different width for items
- Crash with timer
- Critical: 'package:flutter/src/rendering/sliver_fixed_extent_list.dart': Failed assertion: line 270 pos 12: 'firstIndex == 0 || childScrollOffset(firstChild!)! - scrollOffset <= precisionErrorTolerance': is not true. HOT 4
- padEnds: false has warning Exception HOT 2
- Index changing even though dragging hasn't finished yet HOT 1
- Neighbor image is a copy of Current image HOT 1
- carousel slider swipe issue HOT 1
- Expose `_state?.pageController?.position.activity?.isScrolling` on `CarouselController`
- How to update specific item without redrawing or updating other items
- image title
- Error: The getter 'EventStreamProviders' isn't defined for the class 'WebSocket'.
- Indicator not updating value when viewPortFraction property is set (value near the half of Screen Width)
- Touch slider HOT 4
- 'enableInfiniteScroll: false' doesn't work when setState is used in onPageChanged HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flutter_carousel_slider.