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 :
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'm having trouble replacing a set of images in the carousel_slider with an action / trigger like onAccept() in my code
I currently using a draggable the slider, and my goal is I want to change the set of images when I'm dragging the image into the dragTarget by onAccept
how can I achieve that? I appreciate for your help
this is the carousel_slider code:
CarouselSlider _pilihanMakanan = CarouselSlider(
items: _listMakanan.map((makanan) {
return Row(children: [
Expanded(
flex: 1,
child: LongPressDraggable<Makanan>(
data: makanan,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 2),
child: Image(
image: AssetImage(makanan.image),
fit: BoxFit.contain,
// width: 50,
),
),
feedback: Tooltip(
message: makanan.nama,
child: Image(
image: AssetImage(makanan.image),
fit: BoxFit.contain,
width: 100,
),
),
childWhenDragging: Container(),
),
),
]);
}).toList(),
options: CarouselOptions(
height: 70,
autoPlay: false,
enlargeCenterPage: true,
enableInfiniteScroll: false,
viewportFraction: 0.15,
),
);
and this is the slider implementation :
Container(
margin: EdgeInsets.fromLTRB(0, 45, 119, 19),
alignment: Alignment.center,
child: DragTarget<Makanan>(
onAccept: (makanan) {
setState(() {
_pokok = makanan.image;
_targetImageUrl = makanan.image;
_totalKalori += makanan.kalori;
_listMakanan = _listLauk; <--- this code seems not working
});
},
builder: (simulation, candidateData, rejectedData) {
return Container(
alignment: Alignment.center,
child: _targetImageUrl != ''
? Image(
image: AssetImage(_targetImageUrl),
width: 50,
)
: Container(
child: Image(
image: AssetImage("assets/images/pokok.png"),
width: 120,
),
),
);
},
)),
this code seems doesn't work as i thought
onAccept: (makanan) {
setState(() {
_listMakanan = _listLauk; });
Thank you for your attention, I really appreciate for your help
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 was trying to add floating button to carouselSlider but when i slide carousel i get that pixelerror any idea to fix it ?
CarouselSlider(
height: 540,
initialPage: 0,
autoPlay: false,
reverse: false,
items: imgList.map((imgUrl) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: Colors.amber,
),
child: Column(
children: <Widget>[
Image.network(
imgUrl,
fit: BoxFit.fitWidth,
),
Padding(
padding: const EdgeInsets.only(top:13.0),
child: FloatingActionButton(
backgroundColor: Colors.red,
child:icon,
onPressed: () {
setState(() {
icon = Icon(Icons.favorite);
You could put your image and FAB in a Stack Widget with a bottom center alignement like this
Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Image.network(
'imgUrl',
fit: BoxFit.fitWidth,
),
FloatingActionButton(
onPressed: () => print,
)
],
),
I'm creating a notification center for my application, and it contains a bit of long strings for the title and the body, and it always causes overflow, I've tried using Expanded widgets, and these following stack over flow questions: Question 1, Question 2 But I cannot apply it to my code, here is what it looks like right now:
I get the text from my firebase cloud firestore, and I'm outputting the texts using a listview.
The title text is this: "Allen Indefenzo has rescinded consent for you to access his/her data"
The body text is this : "He/she has removed all your access and you will no longer be able to view / change his data, to have access again ask for the user to give you his/her special code again."
Here is my code:
Container(
color: Colors.white,
child: StreamBuilder(
stream: db
.collection('users')
.document(userData.userID)
.collection('notifications')
.snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.data.documents.length != 0) {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Row(
children: <Widget>[
Container(
height: 150,
width: 100,
child: Image(
image: NetworkImage(
snapshot.data.documents[index]['dpURL']), fit: BoxFit.contain,
),
),
Column(
children: <Widget>[
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['title']),
),
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['body']),
),
],
),
],
),
);
},
);
}
},
),
),
Any help is appreciated and if you can explain it would be amazing! Thank you so much!
try to wrap your Column inside Expanded,
Container(
child: Row(
children: <Widget>[
Container(
height: 150,
width: 100,
child: Image(
image: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQLBtBU3nUOK7osT41ZsQhP4VBV7fd9euqXvXVKQH0Q7bl4txeD'),
fit: BoxFit.contain,
),
),
Expanded(
child: Column(
children: <Widget>[
Text(
'Reallly looooooooooooooooooooooooooooooong textttttttttttttttttttttttttttttttttttttttttttttttt'),
Text(
'Reallly looooooooooooooooooooooooooooooong textttttttttttttttttttttttttttttttttttttttttttttttt'),
],
),
),
],
),
);
output:
Additionally if you want to limit lines of Text use,
Text(
'Reallly looooooooooooooooooooooooooooooongtextttttttttttttttttttttttttttttttttttttttttttttttt',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
Output:
Just wrap your column inside expanded widget
Expanded(child:
Column(
children: <Widget>[
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['title']),
),
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child:
Text(snapshot.data.documents[index]['body']),
),
],
),
),
Expanded widget is useful when you want to fill all the remaining space when a column or row widget have 2 or more child widgets. so wrapping a child inside an expanded widget will fill up the remaining space accordingly.
return Container(child: Row(
children: <Widget>[
Container(
height: 150,
width: 100,
child: Image(
image: NetworkImage(snapshot.data.documents[index]['dpURL']), fit: BoxFit.contain,
),
),
new Expanded(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TitleText(
text:snapshot.data.documents[index]['title'] ,
maxLine: 5,
),
),
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.8,
child: TitleText(
text:snapshot.data.documents[index]['body']),
),
],
),
),
],
),
);