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,
)
Related
I have a Futurebuilder that works with a ListView.builder that displays on the screen but I wanted to add the carousel_slider package but nothing happens, the Carouselslider is set to auto scroll . I can still so it manually like a list view.
My Code:
There are just 2 elements from the Future on the screen, image and a title image.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import '../../future_carousel.dart';
class CarouselInformation extends StatelessWidget {
CarouselInformation({Key? key}) : super(key: key);
var datasource = const FutureInformation();
getSliderDetailsEvents() async {
List futureEvents = await datasource.getSliderDetails();
return futureEvents;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Sliders')),
body: SingleChildScrollView(
child: Column(
children: [
FutureBuilder(
future: getSliderDetailsEvents(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return const CircularProgressIndicator();
} else {
return Column(
children: [
const Text('Block 1'),
CarouselSlider(
options: CarouselOptions(
aspectRatio: 1.5,
viewportFraction: 1.0,
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
enableInfiniteScroll: false,
initialPage: 2,
autoPlay: true,
),
items: [
SizedBox(
height: 260,
width: 375,
child: Expanded(
child: PageView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.length,
itemBuilder:
(BuildContext context, int index) {
return Container(
margin: const EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(5.0)),
child: Stack(
children: [
Image.network(
snapshot.data[index].image,
fit: BoxFit.cover),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Container(
decoration:
const BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(
200, 0, 0, 0),
Color.fromARGB(
0, 0, 0, 0)
],
begin: Alignment
.bottomCenter,
end: Alignment.topCenter,
),
),
padding: const EdgeInsets
.symmetric(
vertical: 10.0,
horizontal: 20.0),
child: Text(
snapshot.data[index].title,
style: const TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight:
FontWeight.bold,
),
),
),
),
],
),
),
);
},
),
),
),
]),
],
);
}
}),
],
),
),
);
}
}
Result of the code above:
I want to achieve the same effect as the bottom Widget as on this clip but the images on that clip which is working are hardcoded not from a Future.
https://www.screencast.com/t/ouWL8AkSuI
I build a flutter app with ads as a carousel slider as a bottom layer of the stack widget, and I have I list view in the top layer of the stack widget
and when the list is scrolled vertically it overlays the ads on the screen.
now I have a problem with the carousel slider, I can't scroll it manually and I can't click any
how to solve it?
demo code:
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: [
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
),
items: imgList
.map((item) => Center(
child: Image.network(
item,
fit: BoxFit.cover,
)))
.toList(),
),
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.only(top: 210),
itemBuilder: (context, index) => Container(
color: Colors.white,
child: Text(
'ITEM $index',
textAlign: TextAlign.center,
),
))
],
));
It depends on how you want to lay your widgets out.
If you want to keep the ads persistent (not to scroll away with list) then keep the layout like :
Scaffold(
body: Column(
children: [
CarouselSlider(),
Expanded(
child: ListView.builder(),
),
],
),
)
Using positioned widget inside stack you can easily position the widgets.
Maybe this will help you.
Stack(
children: [
Positioned(
top: 0,
bottom: 250,
left: 0,
right: 0,
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (context, index) => Container(
color: Colors.white,
child: Text(
'ITEM $index',
textAlign: TextAlign.center,
),
)),
),
Positioned(
bottom: 8,
right: 0,
left: 0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: CarouselSlider(
items: imgList.map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.symmetric(horizontal: 5.0),
decoration: const BoxDecoration(color: Colors.amber),
child: GestureDetector(
child: Image.network(i, fit: BoxFit.fill),
onTap: () {
print("hey");
}));
},
);
}).toList(),
options: CarouselOptions(),
)),
),
],
)
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
I am using CarouselSlider to slide my containers but issue is its showing lot of padding on the left side.
My code
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
double statusbar = MediaQuery.of(context).padding.top;
final DateTime now = DateTime.now();
final DateFormat formatter = DateFormat('E, MMM d, y');
final String formatted = formatter.format(now);
print(formatted); // something like 2013-04-20
return Scaffold(
backgroundColor: Color(0xFF612c58),
body: Column(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)),
child: Container(
color: Colors.white,
height: height * 0.52,
child: Column(
children: <Widget>[
SizedBox(
height: statusbar * 2,
),
Container(
padding: EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Popular',
style: TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
),
Text("$formatted")
],
),
),
CarouselSlider(
options: CarouselOptions(height: height * 0.39,
enableInfiniteScroll: false,
),
items: [0, 1, 2, 3, 4].map((i) {
return Builder(
builder: (BuildContext context) {
return _popular(i);
},
);
}).toList(),
),
Container(
height: height * 0.006,
width: width * 0.1,
color: Colors.grey,
),
],
),
),
),
SizedBox(height: height * 0.02,),
Container(
padding: EdgeInsets.only(left: 20),
width: double.infinity,child: Text('Recent Stories', style: TextStyle(color: Colors.white, fontSize: 21, fontWeight: FontWeight.bold),))
],
),
);
}
Widget _popular(int index) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
double statusbar = MediaQuery.of(context).padding.top;
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: height * 0.02,),
ClipRRect(
borderRadius: BorderRadius.circular(70.0),
child: Container(
height: height * 0.25,
width: width * 0.7,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/1.png',
),
),
),
),
),
SizedBox(height: height * 0.01,),
Container(
padding: EdgeInsets.only(left: 15),
width: double.infinity,
child: Text(
'Amazing lesson Story',
style: TextStyle(fontWeight: FontWeight.bold),
)),
SizedBox(height: height * 0.01,),
Container(
padding: EdgeInsets.only(left: 15),
width: double.infinity,
child: Text(
'Post By Marco - 10 min',
)),
],
));
}
}
As you can see its showing gap on left side i need to remove this and need to set padding between the slides. I also check the documentation but there is no option showing for padding or i maybe its have any option but i am not able to find it. Can any one please tell how can i just remove the padding and add gap between sldies Thanks :)
CarouselOptions has padEnds attribute which you can set to false to remove the padding from both ends of the list.
Source: a possible duplicate of this question
One option could be adding alignment to the container that wraps your child in the itemBuilder :
#override
Widget build(BuildContext context) {
return CarouselSlider.builder(
carouselController: carouselController,
options: CarouselOptions(
disableCenter: false,
viewportFraction: 0.8,
enlargeCenterPage: false,
height: getProportionateScreenHeight(defaultCarouselHeight),
enableInfiniteScroll: false,
initialPage: 0,
onPageChanged: onPageChanged,
enlargeStrategy: CenterPageEnlargeStrategy.height,
),
itemCount: model.topNewsList.length,
itemBuilder: (context, index, realindex) => Container(
alignment: const Alignment(-1.5, -1.0),
child: CarouselCell(
news: model.topNewsList[index],
onNewsPress: () => Get.to(
() => DetailScreen(),
arguments: model.topNewsList[index],
),
),
),
);
}
as you see, I added the alignment to -1,5 for the left - right, and -1 for the top - bottom, according to this explanation : https://youtu.be/g2E7yl3MwMk
I know this is not the cleanest way to do that, so if anybody else finds another solution, that would be helpful for all :)
try adding these options to CarouselOptions
aspectRatio: 2.0,
disableCenter: true,
viewportFraction: 1,
enlargeCenterPage: false,
If you want to show a small part of a next image on the right try reducing the viewportFraction to 0.95.
You can see all the options that can be passed to the CarouselOptions by ctrl+click on CarouselOptions in VSCODE
I really need your help.
I'm pretty sure that using CustomPaint would be the solution here. but I can't find the source code of Flutter's CustomPaint video.
I'm also aware that I must use drawPath to achieve this. but I can't find any resources on how to convert my SVG to path.
my scenario is this:
I have an image, and I also have my SVG wrapped in Draggable so I can place it anywhere on the image.
I tried using RepaintBoundaries but it doesn't include the SVG even if I try to place it as a parent widget.
I'd appreciate any help.
EDIT :
I am converting specifically, A pdf file to images.
Stack(
children: <Widget>[
Positioned(
child: Text(
imageList.length == 0
? "$currentPage / --"
: "$currentPage / ${imageList.length}",
style: TextStyle(color: Colors.white),
),
top: 10,
right: 10,
),
FutureBuilder(
future: getDocument,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: FadingText(
'Rendering File ...',
style: TextStyle(color: Colors.black, fontSize: 20),
),
);
}
return CarouselSlider.builder(
itemCount: snapshot.data.length,
options: CarouselOptions(
viewportFraction: 1,
autoPlay: false,
aspectRatio: 0.5,
enableInfiniteScroll: false,
onPageChanged: (index, reason) {
setState(() {
currentPage = index + 1;
print(currentPage);
});
}),
itemBuilder: (context, index) {
return Container(
child: Image.memory(snapshot.data[index]),
);
},
);
}),
Positioned(
top: position.dy,
left: position.dx,
child: Center(
child: Container(
padding: EdgeInsets.all(10),
child: Draggable(
child: Container(
width: 120,
height: 70,
child: Center(
child: SvgPicture.asset("assets/signature.svg"),
),
),
childWhenDragging: Container(
width: 120,
height: 70,
child: Center(
child: Opacity(
opacity: 0.2,
child: SvgPicture.asset("assets/signature.svg"),
),
),
),
feedback: Container(
child: Center(
child: SvgPicture.asset("assets/signature.svg"),
),
width: 120,
height: 70,
),
onDraggableCanceled:
(Velocity velocity, Offset offset) {
setState(() => position = offset);
print(
"X Position : ${position.dx} | Y Position : ${position.dy}");
//_capturePng();
showDialog(
barrierDismissible: true,
context: context,
builder: (_) => ViewDocumentDialog(
x: double.parse((position.dx).toStringAsFixed(2)),
y: double.parse((position.dy).toStringAsFixed(2)),
images: encodeImageList,
page: currentPage,
),
);
},
),
),
),
)
],
)),