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(),
),
Related
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 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,
)
],
),
),
),
);
},
)),
),
),
],
),
),
);
}
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,
),
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((){})
}
I have a carousel, two iconButtons in a Positioned Layout, gridView and 2 other positioned layouts All Inside A Stack Layout.
The onPressed() functions on the iconButtons specifically or on any of the elements general do not get triggered. I figured out that the issue is because of the Parent Stack Layout because when place them outside of it the onPressed works.
I need the Stack Layout for the design so im wondering if there is an alternative for it.
Here's an example of the code:
child: Stack(
children: <Widget>[
Container(
child: Column(
children: <Widget>[
carouselSlider = CarouselSlider(
height: 270.0,
initialPage: 0,
viewportFraction: 1.0,
aspectRatio: 1.0,
enlargeCenterPage: false,
autoPlay: true,
reverse: false,
enableInfiniteScroll: true,
autoPlayInterval: Duration(seconds: 2),
autoPlayAnimationDuration:
Duration(milliseconds: 2000),
pauseAutoPlayOnTouch: Duration(seconds: 10),
scrollDirection: Axis.horizontal,
onPageChanged: (index) {
setState(() {
current = index;
});
},
items: carouselImages.map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
child: GestureDetector(
// behavior:
// HitTestBehavior.translucent,
child: Image.asset(
i,
fit: BoxFit.cover,
),
onTap: () {
// Navigator.push<Widget>(
// context,
// MaterialPageRoute(
// builder: (context) => ImageScreen(i),
// ),
// );
}));
},
);
}).toList(),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:
map<Widget>(carouselImages, (index, url) {
return Container(
width: 10.0,
height: 10.0,
margin: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: current == index
? Color.fromRGBO(221, 40, 42, 0.7)
: Colors.white,
),
);
}),
),
],
),
),
Positioned(
right: 5,
top: 10,
child: IconButton(
icon: Icon(Icons.menu),
color: Color.fromRGBO(221, 40, 42, 0.7),
iconSize: 20.0,
onPressed: () {
print('Clicked');
scaffolddKey.currentState.openDrawer();
},
),
),
The solution is to wrap all of your widgets that are not supposed to receive tap events in IgnorePointer widget.
If your CarouselSlider is not supposed to receive tap events then wrap it and all other widgets that are not supposed to receive tap events in IgnorePointer widget.