I need to do something like the image attached
Here is what I've tried:
Container(
height: 300.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitWidth,
alignment: FractionalOffset.center,
image: CachedNetworkImageProvider(image_url),
)
),
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
width: MediaQuery.of(context).size.width * 0.92,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AutoSizeText(
my_text,
style: TextStyle(fontSize: 19),
maxLines: 1,
textAlign: TextAlign.center
)
),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.8),
spreadRadius: 1,
blurRadius: 3,
offset: Offset(1, 1),
),
],
)
)
)
The problems of this code are:
If the image is not high enough, a white bar appears on top of the screen between the app bar and image
The position of the box with the text depends on the height of the container: I need the box is always half inside and half outside the image
You have to use a stack widget for it, but make sure you use BoxFit and as Cover which will fill the entire height of your container.
Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 300.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
alignment: FractionalOffset.center,
image: AssetImage('assets/images/image.jpg'),
)),
),
Container(
margin: EdgeInsets.only(top: 280),
width: MediaQuery.of(context).size.width * 0.92,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("jitesh",
style: TextStyle(fontSize: 19),
maxLines: 1,
textAlign: TextAlign.center)),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.8),
spreadRadius: 1,
blurRadius: 3,
offset: Offset(1, 1),
),
],
),
)
],
),
For more info
https://medium.com/flutterworld/flutter-text-over-image-bb045a129bae
Related
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.
I trying to understand how can I design curves in a container like the below
can anyone help me to design this kind of container? much appreciate it if anyone provides code for this kind of design.
Thank you in advance.
use Stack and boxDecoration, play with margins and size to get best result.
SizedBox(
width: double.infinity,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.grey,
boxShadow: const [
BoxShadow(color: Colors.grey, spreadRadius: 3),
],
),
height: 50,
),
Container(
width: 200,
child: const Center(
child: Text('\$1400'),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: const Color(0xff232fac),
boxShadow: const [
BoxShadow(color: Color(0xff232fac), spreadRadius: 3),
],
),
height: 50,
),
Container(
width: 200,
margin: const EdgeInsets.only(left: 150),
child: const Center(
child: Text('\$1400'),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: const Color(0xff483395),
boxShadow: const [
BoxShadow(color: Colors.white, spreadRadius: 3),
],
),
height: 50,
),
],
),
),
read about Stack
read about boxDecoration
You cab usethe decoration property of the container to add border radius to a container
Container(
height: 25,
width: 100,
decoration: BoxDecoration (
borderRadius : BorderRadius circular(15),
color: Colors.purple
)
)
Use Stack and gradient to implement this
Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Container(
height: 50,
width: double.infinity,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
gradient: LinearGradient(colors: [
Colors.purple,
Colors.grey,
],
stops: [0.5, 0],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("\$1400"),
Text("\$700"),
],
),
),
),
Container(
height: 50,
width: 150,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
color: Colors.green,
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Text("\$700"),
),
),
],
Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Container(
height: 50,
width: double.infinity,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
gradient: LinearGradient(colors: [
Colors.purple,
Colors.grey,
],
stops: [0.5, 0],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text("\$1400"),
Text("\$700"),
],
),
),
),
Container(
height: 50,
width: 150,
decoration: BoxDecoration (
borderRadius : BorderRadius.circular(50),
color: Colors.green,
border: Border.all(color: Colors.white, width: 2)
),
child: Center(
child: Text("\$700"),
),
),
],
You can try something like this:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
final double center = 300;
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(children: [
Positioned(
left: 0,
child: Container(
width: center,
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.indigo, Colors.blue]),
borderRadius: BorderRadius.all(Radius.circular(
MediaQuery.of(context).size.height / 2.0)),
border: Border.all(color: Colors.white, width: 3)),
child: const Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'\$ 1400',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
)),
Positioned(
right: 0,
child: Container(
width: MediaQuery.of(context).size.width - center,
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(
MediaQuery.of(context).size.height / 2.0)),
border: Border.all(color: Colors.white, width: 3)),
child: const Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'\$ 900',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
)),
Positioned(
left: center,
child: FractionalTranslation(
translation: const Offset(-0.5, 0),
child: Container(
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.indigo, Colors.purple]),
borderRadius: BorderRadius.all(Radius.circular(
MediaQuery.of(context).size.height / 2.0)),
border: Border.all(color: Colors.white, width: 3)),
child: const Center(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 8, 20, 8),
child: Text(
'\$ 700',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
),
)),
]),
);
}
}
output:
use decoration property see simple use.
Container(
height: 50,
width: 500,
decoration: BoxDecoration (
borderRadius : BorderRadius circular(40),
color: Colors.red)
child: const Center(
child: Text('\$ 1400'),),
)
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]);
}),
I want to overlay container to 1st one container in Stack. But when doing, it works but when i give to height first one it just take this height and second container just stucks and didn't take full height.
I want this but "THIS IS MY TEXT" container should take full height but it won't?
But when i use fit : StackFit.expand. it does work what i want but first one got behind it.
here's my code
double topHeightPadding = MediaQuery.of(context).padding.top;
double heightForStack = (MediaQuery.of(context).size.height - 90);
return Scaffold(
body: Stack(
fit : StackFit.expand,
children: <Widget>[
Container(
height: topHeightPadding + 120,
decoration: const BoxDecoration(
color: Color(0xFF141D38),
),
child: const Center(
child: Text(
"SOMETEXT.COM",
style: TextStyle(color: Colors.white),
textScaleFactor: 1.4,
)),
),
Positioned(
top: topHeightPadding + 90,
left: 0.1,
right: 0.1,
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: heightForStack,
decoration: const BoxDecoration(
// color: Colors.red,
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35)),
boxShadow: [
BoxShadow(
color: Color(0xE6808080),
spreadRadius: 5,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: const Center(
child: Text('THIS IS MY TEXT')
),
))
],
),
);
Any help would be Appreciated.
Answering Own Question : https://stackoverflow.com/help/self-answer
I just got how to do it by Adding one more container with height double.infinity.
Code:
double topHeightPadding = MediaQuery.of(context).padding.top;
double heightForStack = (MediaQuery.of(context).size.height - 90);
return Scaffold(
body: Stack(
// fit : StackFit.expand,
children: <Widget>[
Container(height: double.infinity,),
Container(
height: topHeightPadding + 120,
decoration: const BoxDecoration(
color: Color(0xFF141D38),
),
child: const Center(
child: Text(
"SOMETEXT.COM",
style: TextStyle(color: Colors.white),
textScaleFactor: 1.4,
)),
),
Positioned(
top: topHeightPadding + 90,
left: 0.1,
right: 0.1,
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: heightForStack,
decoration: const BoxDecoration(
// color: Colors.red,
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35)),
boxShadow: [
BoxShadow(
color: Color(0xE6808080),
spreadRadius: 5,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: const Center(
child: Text('THIS IS MY TEXT')
),
))
],
),
);
When a Stack widget is inside a Column and next to an Expanded widget, the Stack widget's overflowed items are clipped by the Expanded widget (see below). How can this be fixed? Why does the leading widget not have a higher Z-index value than the next widget?
Code:
final imageUrl =
'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80';
final bgUrl = 'https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80';
return Scaffold(
body: Column(
children: [
Stack(
clipBehavior: Clip.none,
children: [
Container(
height: 120,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black87.withOpacity(0.5), spreadRadius: 1, blurRadius: 4)
],
color: Colors.black87,
),
),
Positioned(
bottom: -60,
left: 0,
right: 0,
child: Center(
child: Container(
height: 120,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60.0),
boxShadow: [
BoxShadow(
color: Colors.black87.withOpacity(0.3),
spreadRadius: 1,
blurRadius: 4,
offset: Offset(0, 1))
],
image: DecorationImage(
image: NetworkImage(imageUrl),
fit: BoxFit.cover,
),
),
),
),
)
],
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(bgUrl),
fit: BoxFit.cover
)
),
),
)
],
)
);
}
you need to rearrange your widgets a little bit, put Stack outside the column:
return Scaffold(
body: Stack(children:[
Column(
children: [
Container(
height: 120,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black87.withOpacity(0.5), spreadRadius: 1, blurRadius: 4)
],
color: Colors.black87,
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(bgUrl),
fit: BoxFit.cover
)
),
),
)
],
),
Positioned(
top: 60,
left: 0,
right: 0,
child: Center(
child: Container(
height: 120,
width: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60.0),
boxShadow: [
BoxShadow(
color: Colors.black87.withOpacity(0.3),
spreadRadius: 1,
blurRadius: 4,
offset: Offset(0, 1))
],
image: DecorationImage(
image: NetworkImage(imageUrl),
fit: BoxFit.cover,
),
),
),
),
),
],),
);
}