How to make carousel slider on the left side - flutter

i was new on programming and now i was learning by try design to coding from internet. And this the sample i want to create
i was try making that slider using carousel_slider, i can show it but i cant relocate the location of the slider ( carousel slider always on center )
final List<Widget> myData = [
Today_Widget(),
Today_Widget(),
Today_Widget(),
Today_Widget(),
];
#override
Widget build(BuildContext context) {
return CarouselSlider(
options: CarouselOptions(
initialPage: 0,
aspectRatio: 1,
enlargeCenterPage: true,
viewportFraction: 0.65,
enableInfiniteScroll: false,
),
items: myData,
);
return Container(
width: 350,
height: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(8),
),
image: DecorationImage(
image: AssetImage('assets/images/images_mainprofile_1.png'),
fit: BoxFit.cover,
),
boxShadow: [
BoxShadow(
color: blackColor.withOpacity(0.2),
blurRadius: 35,
offset: Offset(0, 8),
)
]),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 93,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: blackColor.withOpacity(0.60),
),
child: Column(
children: [
Row(
children: [
Expanded(
child: Text(
'Ancala Coffe & Bistro',
style: title.copyWith(
fontWeight: semiBold,
fontSize: 14,
color: whiteColor,
),
overflow: TextOverflow.ellipsis,
),
),
Row(
children: [
Container(
width: 20,
height: 20,
decoration: BoxDecoration(
image: DecorationImage(
image:
AssetImage('assets/images/icon_star.png'),
fit: BoxFit.fill),
),
),
Text(
'4.4',
style: title.copyWith(
fontWeight: medium,
color: whiteColor,
),
),
],
),
],
),
Text(
'Cafe bergaya modern industrial di kawasan Batu, mempertemukan modernitas dengan alam. Selain kopi, cafe ini juga menyediakan tanaman hias dan pemandangan yang indah',
style: regularText.copyWith(color: whiteColor),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
],
),
),
],
),
);
i already try using stack then positioned but i was fail, i try using column then cross/main axis alignment but it do nothing too and now i was at limit and stuck on that slider.

You can play with transform.
Container(
width: 350,
height: 350,
transform: Matrix4.translationValues(-350 / 8, 0, 0),
Note the logic is perfect here, the -350/8 is depended on aspect ratio.

Related

5 sized box in flutter and get error button overflow flutter

I have 5 sizedBox and each sizedbox has many widgets,sizedboxes are inside a container inside scaffold, when I run my application, got an message in emulator that :
Column(
children:[
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
],
),
Its one of my sized box
return Scaffold(
// resizeToAvoidBottomInset: false,
appBar: AppBar(
backgroundColor: ColorManager.mainDarkPrimary,
title: const Text(AppStrings.appName),
),
body: Column(
children: [
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(50),
),
color: ColorManager.darkPrimary,
),
child: Stack(
children: [
Positioned(
top: 80,
right: 0,
child: Container(
height: 80,
width: 300,
decoration: BoxDecoration(
color: ColorManager.white,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(50),
bottomLeft: Radius.circular(50),
),
),
),
),
Positioned(
top: 105,
right: 40,
child: Text(
AppStrings.appShorDescription,
style: TextStyle(
fontSize: FontSize.s20, color: ColorManager.darkGrey),
),
),
],
),
),
SizedBox(
height: height * 0.05,
),
Column(
children: [
SizedBox(
height: 110,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
top: 35,
right: 20,
child: Material(
child: Container(
height: 75.0,
width: width * 0.9,
decoration: BoxDecoration(
color: ColorManager.white,
borderRadius: BorderRadius.circular(0.0),
boxShadow: [
BoxShadow(
color: ColorManager.grey,
offset: const Offset(-10.0, 10.0),
blurRadius: 20.0,
spreadRadius: 4.0),
],
),
),
),
),
Positioned(
top: 0,
right: 30,
child: Card(
elevation: 10.0,
shadowColor: ColorManager.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 65,
width: 65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
AppStrings.mozafatiDatesUrl))),
),
),
),
Positioned(
top: 50,
right: 120,
// ignore: sized_box_for_whitespace
child: Container(
height: 60,
width: 160,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
(Text(
AppStrings.mozafatiDatesName,
style: TextStyle(
fontSize: FontSize.s16,
color: ColorManager.darkGrey,
fontWeight: FontWeightManager.bold),
)),
(Text(
AppStrings.mozafatiDatesName,
style: TextStyle(
fontSize: FontSize.s12,
color: ColorManager.darkGrey,
fontWeight: FontWeightManager.bold),
)),
Divider(
color: ColorManager.darkPrimary,
),
],
),
))
],
),
),
button overflow flutter
, a renderFlex overfloed by 146 pixels on the buttom
how can I place 5 sizedbox in scroll
Make your Column scrollable by wrapping it with a SingleChildScrollView:
SingleChildScrollView(
child: Column(
children: [SizedBox(), SizedBox()])
)
return Scaffold(
body: Container(
child: ListView(
shrinkWrap: true,
children: [
SizedBox(),
SizedBox(),
SizedBox(),
],
),
),
);
You can wrap Column with SingleChildScrollView widget
SingleChildScrollView(child:Column(
children:[
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
SizedBox(...
],
),)

Flutter: Gesture detector being used in specific area on sized box

I have something like a tinder card that Id like to be able to detect if a user taps on the left/right area of the card. Its defined by a sized box, but how can i tell a gesture detector to only use a specific part of the given area?
relevant code, you should be able to ignore everything in the stack but i included it in case there was something i was missing:
return Padding(
padding: const EdgeInsets.only(top: 10, left: 20, right: 20),
child: SizedBox(
height: MediaQuery.of(context).size.height / 1.4,
width: MediaQuery.of(context).size.width,
child: GestureDetector(
child: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
state.stingrays[index]!.imageUrls[0])),
borderRadius: BorderRadius.circular(5.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 4,
blurRadius: 4,
offset: Offset(3, 3),
)
]),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 0, 0),
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
),
Positioned(
bottom: 30,
left: 20,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${state.stingrays[index]!.name}, ${state.stingrays[index]!.age}',
style: Theme.of(context)
.textTheme
.headline2!
.copyWith(
color: Colors.white,
),
),
Text(
'${state.stingrays[index]!.jobTitle}',
style: Theme.of(context)
.textTheme
.headline3!
.copyWith(
color: Colors.white,
fontWeight: FontWeight.normal,
),
),
Row(
children: [
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Icon(Icons.info_outline,
size: 25,
color: Theme.of(context).primaryColor),
)
],
)
],
),
),
],
),
),
),
);
Thanks!
I am assuming that the card is placed in the center. Then you can get the coordinates with the following
Add this
onTapDown: (details) {
var position = details.globalPosition;
//Here it's checking if the click position is less than half of screen or more
if (position.dx < MediaQuery.of(context).size.width / 2){
print(" tapped left side");
} else {
print{"tapped right size");
}
},
While Kaushik had a good suggestion, for my case I ended up doing the following:
GestureDetector(
child: LayoutBuilder(builder: (ctx, constraints) {
return Align(
alignment: Alignment.centerRight,
child: Opacity(
opacity: 0.0,
child: Container(
color: Colors.black,
height: constraints.maxHeight,
width: constraints.maxWidth * 0.3,
),
),
);
}), onTap: () {
Provider.of<StingrayBloc>(context, listen: false).add(
IncrementImageUrlIndex(
imageUrlIndex: state.imageUrlIndexes[index],
stingrayIndex: index));
print(state.imageUrlIndexes[index]);
}),

flutter background image carousel

I'm new to flutter and working on developing my flutter coding skills. I want to display 3 background images in a carousel while other texts and button remain same on the screen. in the below code, image carousel is working properly but my Get Started button and other texts not displaying at all. what should I do for correct this issue. appreciate your help on this.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class Test extends StatelessWidget {
#override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
return Scaffold(
body: ListView(
children: [
CarouselSlider(
items: [
//1st Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person1.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
//2nd Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person2.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
//3rd Image of Slider
Container(
color: Colors.black,
child: Stack(
children: [
Positioned.fill(
child: Opacity(
opacity: 0.8,
child: Image.asset('assets/images/person3.png',
fit: BoxFit.cover),
),
),
Container(
color: Color.fromRGBO(5, 65, 196, 0.19),
),
],
),
),
],
//Slider Container properties
options: CarouselOptions(
height: 810.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 16,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 1,
),
),
Padding(
padding: const EdgeInsets.only(left: 40, bottom: 230),
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Meet \nYour Doctor\nHere',
style: TextStyle(
height: 1.2,
fontFamily: 'Dubai',
fontSize: 35,
color: Color(0xffFAFAFA),
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(left: 30, top: 26),
child: Align(
alignment: Alignment.topLeft,
child: Text('DOCTOR',
style: TextStyle(
fontFamily: 'Dubai',
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.w500,
))),
),
Padding(
padding: const EdgeInsets.only(bottom: 60),
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: 320,
height: 65,
child: ElevatedButton(
onPressed: () {},
child: Text(
'Get Started',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.normal),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Color(0xff05ABA3)),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(50.0),
),
))),
)),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
color: Colors.white,
),
height: 5,
width: 120,
))),
],
),
);
}
}
you can set image in background using BoxDecoration in container-
Container(
height: 120.0,
width: 120.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'imagename'),
fit: BoxFit.fill,
),
shape: BoxShape.circle,
),
)
On your Scaffold's body: you are using ListView. You can still find those widgets by scrolling down.
For your case, you like to have text and button widgets over the UI.
You need to replace ListView with Stack on body.
return Scaffold(
body: Stack( // this
children: [
CarouselSlider
More about Stack and ListView.

How to put image on top corner and trim it in flutter?

In my mobile app I am expecting the tennis ball image to be there in right top corner
Image Expected
But currently it looks like this,
Image Current
the code is as below,
Expanded(
flex: 9,
child: Column(
children: [
Container(
height: 66,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
image: AssetImage(
'assets/transperent_tennis_ball_icon_green.png'),
),
),
),
]
),
)
Please advise how can I get this done?
Try below code hope its help to you. You used Stack widget and Positioned Widget for that. just replace my image with your image.
Center(
child: Stack(
children: [
Container(
padding: EdgeInsets.all(20),
height: 100,
width: 200,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Submit Score',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Game Report',
style: TextStyle(
fontSize: 14,
color: Colors.white,
),
),
],
),
),
Positioned(
right: -30,
top: -30,
child: Image.network(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
height: 100,
width: 80,
),
),
],
),
),
Your result screen->
you can use stack
Expanded(
flex: 9,
child: Column(
children: [
Container(
height: 66,
decoration: BoxDecoration(
color: const Color(0xff3e4982),
borderRadius: BorderRadius.circular(12),
),
child: Stack(
children: [
Positioned(
top:-25,
right:-25,
child: Container(
height: 66,
width:66,
decoration: BoxDecoration(
shape:BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage("https://picsum.photos/500/300?random=1"),
),
),
)
)
])
)]
),
),
just use stack widget to achive this design .

how to insert backround image in one row (whole row)

I want to insert background image in one row in flutter
when I insert background image does not take up the entire row, only is displayed in one container
you can see this issue below image (I insert black background image for to be seen better):
Widget getBody() {
var size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: size.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)),
color: Colors.red),
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(
height: 1,
decoration:
BoxDecoration(color: Colors.grey.withOpacity(0.2)),
),
),
SizedBox(
width: 10,
),
Text(
"درصد تخفیف برای 30 عدد",
style: TextStyle(color: Colors.black54),
),
SizedBox(
width: 10,
),
Flexible(
child: Container(
height: 1,
decoration:
BoxDecoration(color: Colors.grey.withOpacity(0.2)),
),
),
],
),
SizedBox(
height: 15,
),
Column(
children: List.generate(nardeban_data.length, (index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/bg.png"),
fit: BoxFit.cover,
),
),
width: (size.width - 40) * 0.68,
child: Row(
children: [
Container(
width: 40,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.blue),
borderRadius:
BorderRadius.circular(40.0)),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text("14",
style: TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.bold,
color: Colors.white)))),
SizedBox(
width: 10,
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
nardeban_data[index]['name'],
style: TextStyle(
fontSize: 14,
color: Colors.black54,
fontWeight: FontWeight.w400),
overflow: TextOverflow.ellipsis,
),
Text(
nardeban_data[index]['takhfif'],
style: TextStyle(
fontSize: 12,
color: Colors.blue,
),
overflow: TextOverflow.ellipsis,
),
],
),
)
],
),
),
Container(
width: (size.width - 90) * 0.32,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.green)),
child: Padding(
padding: const EdgeInsets.only(
right: 10, bottom: 4, left: 10, top: 4),
child: Row(
children: [
SizedBox(
width: 25,
height: 25,
child: TextField(
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: '4%',
border: InputBorder.none,
contentPadding: EdgeInsets.only(
bottom: 8,
top: 3,
),
),
),
)
],
),
),
),
Icon(
Icons.notifications,
size: 22,
color: Colors.blue.withOpacity(0.7),
)
],
),
)
],
),
),
SizedBox(
height: 5,
),
Divider()
],
);
})),
],
),
),
);
}
wrap Row with Container and add decoration in container
like this:
Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/bg.png"),
fit: BoxFit.cover,
),),
child: Row(
........
)
Full code:
Widget getBody() {
var size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: size.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)),
color: Colors.red),
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Container(
height: 1,
decoration:
BoxDecoration(color: Colors.grey.withOpacity(0.2)),
),
),
SizedBox(
width: 10,
),
Text(
"درصد تخفیف برای 30 عدد",
style: TextStyle(color: Colors.black54),
),
SizedBox(
width: 10,
),
Flexible(
child: Container(
height: 1,
decoration:
BoxDecoration(color: Colors.grey.withOpacity(0.2)),
),
),
],
),
SizedBox(
height: 15,
),
Column(
children: List.generate(5, (index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.only(right: 20, left: 20),
child: Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/bg.png"),
fit: BoxFit.cover,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: (size.width - 40) * 0.68,
child: Row(
children: [
Container(
width: 40,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.blue),
borderRadius:
BorderRadius.circular(40.0)),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text("14",
style: TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.bold,
color: Colors.white)))),
SizedBox(
width: 10,
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Name",
style: TextStyle(
fontSize: 14,
color: Colors.black54,
fontWeight: FontWeight.w400),
overflow: TextOverflow.ellipsis,
),
Text(
' nardeban_data',
style: TextStyle(
fontSize: 12,
color: Colors.blue,
),
overflow: TextOverflow.ellipsis,
),
],
),
)
],
),
),
Container(
width: (size.width - 90) * 0.32,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.green)),
child: Padding(
padding: const EdgeInsets.only(
right: 10, bottom: 4, left: 10, top: 4),
child: Row(
children: [
SizedBox(
width: 25,
height: 25,
child: TextField(
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: '4%',
border: InputBorder.none,
contentPadding: EdgeInsets.only(
bottom: 8,
top: 3,
),
),
),
)
],
),
),
),
Icon(
Icons.notifications,
size: 22,
color: Colors.blue.withOpacity(0.7),
)
],
),
)
],
),)
),
SizedBox(
height: 5,
),
Divider()
],
);
})),
],
),
),
);
}
Add this code
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("filename")// or networkImage() or anything,
),),
to the row's container

Categories