I am trying to enable autoscroll to a cards . it should scroll in a vertical .i want Autoscroll work without any user action.
and autoScroll in 5 second .
this is part pf my code i want to scroll:
Container(
width: 3000,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: CarouselSlider(
options: CarouselOptions(height: 150.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(
borderRadius: BorderRadius.circular(30),
color: greenHex),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(
top: 0, right: 10, left: 0, bottom: 8),
),
],
),
);
},
);
}).toList(),
),
),
),
can anyone help me please ?
You need to enable autoPlay and set autoPlayInterval in Carousel Slider Options.
Example:
CarouselSlider.builder(
options: CarouselOptions(
.
.
.
autoPlay: true,
autoPlayInterval: const Duration(seconds: 4),
enableInfiniteScroll: true,
),
),
try below code hope its help to you. refer documentation here try yo set autoplay true
options: CarouselOptions(
autoPlay: true,
),
Related
i created a carousel containing three different images. the problem is these images are not taking the full length of my current screen. i have tried setting the width in the image and even setting the aspect ratio and viewport in carousel options but the outcome is still the same. help would be very much appreciated. here is the code.
final List<Widget> _images = [
Stack(
children: [
Image.asset('assets/images/image 10.png'),
Padding(
padding: const EdgeInsets.only(left: 55.0, top: 230),
child: Text(
'Luxury \n Fashion \n &Accessories'.toUpperCase(),
style: TextStyle(
fontFamily: 'Bodoni',
fontSize: 40,
fontWeight: FontWeight.w500,
color: Colors.grey.shade700
),
),
),
Padding(
padding: const EdgeInsets.only(top: 400.0),
child: Center(
child:SvgPicture.asset('assets/iconImages/Button.svg'),
),
),
],
),
Image.asset('assets/images/leeloo.jpeg', width: double.infinity,),
Image.asset('assets/images/ayaka.jpeg', width: double.infinity,),
];
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 5,
child: Column(
children: [
Stack(
children: [
CarouselSlider.builder(
options: CarouselOptions(
viewportFraction: 1,
aspectRatio: 16/9,
height: MediaQuery.of(context).size.height*0.78,
autoPlay: false,
initialPage: 0,
enableInfiniteScroll: false,
enlargeCenterPage: true,
onPageChanged: (index, reason){
setState(() {
_activeIndex = index;
});
}
),
itemCount: _images.length,
itemBuilder: (BuildContext context, int index, int realIndex) {
return GestureDetector(
onTap: (){
Navigator.of(context).pushNamedAndRemoveUntil(BlackScreen.routeName, (route) => false);
},
child: Align(
alignment: Alignment.bottomCenter,
child:Container(
child: _images[index]
),
),
);
},
),
Set fit to your image like this:
Image.asset('assets/images/leeloo.jpeg', width: double.infinity,fit: BoxFit.cover),
Please try this
FittedBox(
child: Image.asset('foo.png'),
fit: BoxFit.fill,
)
I want to make this image/Text resizeable when run on a smaller or bigger phone rights now it’s just look like not fitted to the screen. What widgets should I wrap it with?
This is my IphoneS:
And this is my current simulator (Iphone13):
And some of the Code for the CarouselSlider images:
List image1 = [
'assets/images/f1.png',
'assets/images/f2.png',
'assets/images/f3.png',
'assets/images/f4.png',
];
CarouselSlider(
options: CarouselOptions(
height: 200.0,
autoPlay: true,
reverse: false,
enlargeCenterPage: false,
enableInfiniteScroll: false,
scrollDirection: Axis.horizontal,
autoPlayInterval: const Duration(seconds: 6),
autoPlayAnimationDuration:
const Duration(seconds: 3),
),
items: image1
.map(
(item) => Padding(
padding: const EdgeInsets.only(top: 9.0),
child: Card(
margin: const EdgeInsets.only(
top: 10.0,
bottom: 20.0,
),
elevation: 0.0,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10.0),
),
child: GestureDetector(
child: ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(10.0),
),
child: Image.asset(
item,
fit: BoxFit.fill,
),
),
onTap: () {
image1.indexOf(item);
indexMethod(
image1.indexOf(item).toString());
},
),
),
),
)
.toList(),
),
And some of the Code for the Text:
//profile button only
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: CircleAvatar(
radius: 28,
backgroundColor:
const Color(0xff5CE1E6),
child: IconButton(
icon: const Icon(
Icons.person,
size: 35,
color: Colors.black,
),
onPressed: () => Navigator.push(
context,
PageTransition(
type: PageTransitionType
.rightToLeft,
child:
const ProfileScreen())),
),
),
),
const Padding(
padding: EdgeInsets.only(top: 10.0),
child: Text('Profile'),
),
],
),
try this https://pub.dev/packages/flutter_screenutil
A flutter plugin for adapting screen and font size. Let your UI display a reasonable layout on different screen sizes!
tutorial: https://youtu.be/LWteDQes4Kk
An easy and dependency-free way is to use MediaQuery.of(context).size
Examples:
Use MediaQuery.of(context).size.width to get a full width of the device.
Use MediaQuery.of(context).size.height to get the total height of the device.
Use MediaQuery.of(context).size.height * 0.3 to get 30% of the device height.
I have this code but the image is not clickable. And I don’t know how to implement it. So if you know please help. I've been trying for 4hour now.
List of the image
late CarouselSlider carouselSlider;
List imageList = [
'assets/images/F1.png',
'assets/images/F2.png',
'assets/images/F3.png',
'assets/images/F4.png',
'assets/images/F5.png',
];
The CarouselSlider
CarouselSlider(
options: CarouselOptions(
height: 200.0,
autoPlay: true,
reverse: false,
enlargeCenterPage: false,
enableInfiniteScroll: false,
scrollDirection: Axis.horizontal,
autoPlayInterval: const Duration(seconds: 6),
autoPlayAnimationDuration: const Duration(seconds: 3),
),
items: imageList
.map(
(item) => Padding(
padding: const EdgeInsets.only(top: 9.0),
child: Card(
margin: const EdgeInsets.only(
top: 10.0,
bottom: 20.0,
),
elevation: 0.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(10.0),
),
child: Image.asset(item,
fit: BoxFit.fill,
),
),
),
),
)
.toList(),
),
You can use InkWell or GestureDetecture as parent of Padding or Card
Simply wrap the CarouselSlider item with Inkwell or GestureDetector
CarouselSlider(
items: imageList
.map(
(item) => GestureDetector(
onTap() => myFunction(),
child: Container(),
)
.toList(),
),
I am trying to achieve something like this in the video https://youtu.be/tpfP7wlHCxw , when the slider image will change the below text will also change like fat in the video example, and also one container box on the front image only
I tried the carousel_slider and use the stack for box frame that is in the video but frame size and image sizes not adjustable
and the important thing is how can I change the below text on change image and slider should not rotate it will stop if the last image comes
here is my code
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:trainer_app/color.dart';
class FatGet extends StatefulWidget {
#override
_GetAgeState createState() => _GetAgeState();
}
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',
'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];
class _GetAgeState extends State<FatGet> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: background,
body: SafeArea(
child: Column(
children: [
SizedBox(height: 50,),
Center(
child: Stack(
children: [
Container(
height: 5,
width: MediaQuery.of(context).size.height/2,
color: backcolor,
),
Container(
height: 5,
width: MediaQuery.of(context).size.height/2.5,
color: textcolor,
),
],
),
),
SizedBox(height: 50,),
Text('Estimated your current',style: TextStyle(fontFamily: font1,fontSize: 30,fontWeight: FontWeight.w300),),
Text('body Fat Percentage?',style: TextStyle(fontFamily: font1,fontSize: 30,fontWeight: FontWeight.w300),),
SizedBox(height: 100,),
// Image.asset('assets/fat2.png'),
Stack(
children: [
Center(
child: Container(
margin: EdgeInsets.only(bottom: 15),
width: 350,
height: 260,
decoration: BoxDecoration(
border: Border.all(color: textcolor,width: 3, )
),
),
),
Column(
children: [
SizedBox(height: 7,),
CarouselSlider(
options: CarouselOptions(),
items: imgList.map((item) => Container(
child: Padding(
padding: const EdgeInsets.only(left: 5,right: 5),
child: Image.network(item, fit: BoxFit.cover,height: 20,),
),
)).toList(),
),
],
),
],
),
Spacer(),
Container(
margin: EdgeInsets.only(bottom: 30),
width: MediaQuery.of(context).size.width/1.2,
height: 50,
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: RaisedButton(
child: Text('Next',style: TextStyle(color: Colors.white,fontFamily: font1,fontWeight: FontWeight.w400,fontSize: 20),),
onPressed: (){
Navigator.pushNamed(context, "Exercise");
},
color: textcolor,
),
),
)
],
),
),
);
}
}
With onPageChange, you can take the value of a variable and return it from a function you send. I think it will work.
Define each text as companent.
Check the index of images with a variable
Write the function that returns value according to the parameter sent.
Call the function and give the control variable
for slider should not rotate.. see comment 1 in the code
for change the below text on change.. see comment 2
CarouselSlider(
items: items,
options: CarouselOptions(
height: 400,
aspectRatio: 16/9,
viewportFraction: 0.8,
initialPage: 0,
enableInfiniteScroll: false, // (1) Set to false
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
onPageChanged: changeActiveImageText(), // (2) Set up your function here
scrollDirection: Axis.horizontal,
)
)
Function will look something like this
changeActiveImageText(){
// your method of changing the text
setState((){})
}
How can I make something like this, up on the picture with flutter?
I searched through flutter carousel_slider 2.2.1 library,
but it doesn't have features that display two pictures at a time.
Widget _buildReport() {
return CarouselSlider(
options: CarouselOptions(
height: 150.0,
autoPlay: true,
autoPlayInterval: Duration(seconds: 4),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
),
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),
child: Image(
image: AssetImage('assets/dog.jpg'),
fit: BoxFit.cover,
));
},
);
}).toList(),
);
}
You can do it with carousel use Row widget with MainAxisAlignment.spaceBetween and wrap each image with Expanded like this :
Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Image.asset(
"assets/",
fit: BoxFit.cover,
),
),
Expanded(
child: Image.asset(
"assets/",
fit: BoxFit.cover,
),
),
],
),
)
Running apps :