Flutter Stack is not Getting Full Height - flutter

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')
),
))
],
),
);

Related

Two circles touching with lines. How to fit this UI for all type of tabs and screens in flutter?

enter image description here
I need to achieve this programmatically in flutter for all tabs and mobile screens.
Try with following basic code, you can customise as your requirement
Stack(
children: [
Container(
height: 32,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
),Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 32,
width: 32,
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
alignment: Alignment.center,
child: const Icon(Icons.arrow_back_ios, size: 24, color: Colors.tealAccent,)),
Text('Your Text Here'),
Container(
height: 32,
width: 32,
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.tealAccent, width: 2),
),
alignment: Alignment.center,
child: const Icon(Icons.arrow_forward_ios, size: 24, color: Colors.tealAccent,))
],
)
],
)
try this.
Transform.scale(
scale: .5,
child: const SizedBox(
width: 100,
height: 100,
child: FlutterLogo(),
),
),
U gotta do it manually by fixing the Height. i did one for u.
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 60,
width: double.infinity,
child: Stack(
children: [
Positioned(
top: 0,
bottom: 0,
left: 40,
right: 40,
child: Container(
constraints: const BoxConstraints.expand(),
decoration: BoxDecoration(
border: Border.all(color: Colors.cyan, width: 2),
),
child: const Center(child: Text('Hello man')),
),
),
Positioned(
top: 0,
left: 0,
bottom: 0,
width: 80,
child: _icon(Icons.arrow_back_ios_new),
),
Positioned(
top: 0,
right: 0,
width: 80,
bottom: 0,
child: _icon(Icons.arrow_forward_ios),
),
],
),
),
),
);
}
Widget _icon(IconData icon) => Container(
constraints: const BoxConstraints.expand(),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
border: Border.all(color: Colors.cyan, width: 2),
boxShadow: [
BoxShadow(
color: Colors.grey[200]!,
spreadRadius: 1,
blurRadius: 20,
),
BoxShadow(
color: Colors.grey[300]!,
spreadRadius: 1,
blurRadius: 20,
)
],
),
child: Icon(
icon,
color: Colors.cyan,
),
);
}

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]);
}),

Ripple Effect (inkwell) in Containers, positioned with margins in a Stack in Flutter

I'm using the following code in Flutter, hoping to get a ripple effect (InkWell()) in the green and red areas. Yes they are supposed to be buttons, used in car by a copilot while driving on dirt roads.
I can get the ripple effect behind the colored areas by using the Material Class, but not in front of it and it will not respect the bounderies set by the margins of the containers.
Not using types right now, still in early dev stages, any tips on better or shorter code are very welcome
Does anyone have an idea?
context: context,
// barrierColor: Color(0x55888899),
builder: (BuildContext context) {
return Container(
height: 300,
padding: EdgeInsets.only(top: 20),
decoration: BoxDecoration(
color: Color(0xcc232930),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
child: Stack(
children: [
//Background
Container(
decoration: BoxDecoration(
color: Colors.lightBlueAccent,
boxShadow: [
BoxShadow(
color: Colors.black,
offset: new Offset(0.0, 3.0),
blurRadius: 10,
)
],
borderRadius: BorderRadius.circular(40),
),
margin: EdgeInsets.only(left: 15.0, right: 15.0),
padding: EdgeInsets.symmetric(vertical: 18),
height: 245),
Container(
//horizontal line
height: 1,
width: MediaQuery.of(context).size.width / 2 - 15,
color: Colors.white,
margin: EdgeInsets.only(
top: 122, left: MediaQuery.of(context).size.width / 2),
),
Container(
//vertical line
height: 245,
width: 1,
color: Colors.white,
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width / 2),
),
// Big F
Container(
width: (MediaQuery.of(context).size.width / 2) - 15,
margin: EdgeInsets.only(left: 15),
alignment: Alignment(0.0, 0.0),
child: Text(
"F",
style: TextStyle(
color: Colors.white,
fontSize: 180,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
),
),
),
// Accept button
Container(
width: (MediaQuery.of(context).size.width / 2) - 16,
height: 122,
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width / 2 + 1,
//top: 100,
),
alignment: Alignment(0.0, 0.0),
decoration: BoxDecoration(
color: Colors.green,
borderRadius:
BorderRadius.only(topRight: Radius.circular(40)),
),
child: InkWell(
onTap: () {
print("Accepted, adding to ControlCard");
},
splashColor: Colors.lightGreen,
enableFeedback: true,
child: Padding(
padding: const EdgeInsets.all(22.0),
child: Text("Accept",
style: TextStyle(
fontSize: 32,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
)),
),
),
),
// Decline button
Container(
width: (MediaQuery.of(context).size.width / 2) - 16,
height: 122,
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width / 2 + 1,
top: 123,
),
alignment: Alignment(0.0, 0.0),
decoration: BoxDecoration(
color: Colors.red,
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(40)),
),
child: InkWell(
onTap: () {
print("Declined");
},
enableFeedback: true,
child: Padding(
padding: const EdgeInsets.all(22.0),
child: Text("Decline",
style: TextStyle(
fontSize: 32,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
)),
),
),
),
],
),
);
},
);```
You should use the Positioned widget to position the Containers within the Stack. ClipRRect is required to stop the splash from going out of boundaries.
Please see working code below or check it out on Dartpad https://dartpad.dev/d1b2350a64826357a5d417b0f1703334 :
import 'package:flutter/material.dart';
final Color darkBlue = Colors.white;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 300,
padding: EdgeInsets.only(top: 20),
decoration: BoxDecoration(
color: Color(0xcc232930),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40),
topRight: Radius.circular(40),
),
),
child: Stack(
children: [
//Background
Container(
decoration: BoxDecoration(
color: Colors.lightBlueAccent,
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(0.0, 3.0),
blurRadius: 10,
)
],
borderRadius: BorderRadius.circular(40),
),
margin: EdgeInsets.only(left: 15.0, right: 15.0),
padding: EdgeInsets.symmetric(vertical: 18),
height: 245),
Container(
//horizontal line
height: 1,
width: MediaQuery.of(context).size.width / 2 - 15,
color: Colors.white,
margin: EdgeInsets.only(
top: 122, left: MediaQuery.of(context).size.width / 2),
),
Container(
//vertical line
height: 245,
width: 1,
color: Colors.white,
margin:
EdgeInsets.only(left: MediaQuery.of(context).size.width / 2),
),
// Big F
Container(
width: (MediaQuery.of(context).size.width / 2) - 15,
margin: EdgeInsets.only(left: 15),
alignment: Alignment(0.0, 0.0),
child: Text(
"F",
style: TextStyle(
color: Colors.white,
fontSize: 180,
shadows: [
Shadow(
blurRadius: 15, color: Colors.black, offset: Offset(0, 0))
],
),
),
),
// Accept button
Positioned(
left: MediaQuery.of(context).size.width / 2 + 1,
child: ClipRRect(
borderRadius: BorderRadius.only(topRight: Radius.circular(40)),
child: Material(
color: Colors.green,
child: InkWell(
onTap: () {
print("Accepted, adding to ControlCard");
},
splashColor: Colors.lightGreen,
enableFeedback: true,
child: Container(
width: (MediaQuery.of(context).size.width / 2) - 16,
height: 122,
child: Center(
child: Text(
"Accept",
style: TextStyle(
fontSize: 32,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
),
),
),
),
),
),
),
),
// Decline button
Positioned(
left: MediaQuery.of(context).size.width / 2 + 1,
top: 123,
child: ClipRRect(
borderRadius: BorderRadius.only(bottomRight: Radius.circular(40)),
child: Material(
color: Colors.red,
child: InkWell(
onTap: () {
print("Declined");
},
child: Container(
width: (MediaQuery.of(context).size.width / 2) - 16,
height: 122,
child: Center(
child: Text("Decline",
style: TextStyle(
fontSize: 32,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 15,
color: Colors.black,
offset: Offset(0, 0))
],
)),
),
),
),
),
),
),
],
),
);
}
}

Shadows in a rounded rectangle in Flutter

I tried adding a shadow to a rounded container but Flutter adds shadows as if the container is a perpendicular rectangle, which I don't want. I looked up for this problem on Google but couldn't find any appropriate solution, please help me out.
Code for Container
Container(
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.28,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: Color(0xFFF9D276),
borderRadius: BorderRadius.circular(35),
boxShadow: [
BoxShadow(
offset: Offset(0, 4),
color: Color(0xFFF9D276).withOpacity(0.15),
spreadRadius: 4,
blurRadius: 50
)
]
),
)
UPDATE
Answer from #HardikKumar & How I actually want it
You can use from this code for rounded rectangle :)
Container(
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.28,
decoration: BoxDecoration(
color: Colors.green[700],
shape: BoxShape.rectangle,
borderRadius:BorderRadius.all(
Radius.circular(25)
)
),
margin: EdgeInsets.only(right: 8,top: 8),
child: IconButton(
icon: Icon(
Icons.send,
color: Colors.yellow[600],
),
onPressed:() {}
),
)
I'm sorry but I tested your code and the shadow shape appears with the same border as the decoration box
Image
I just edit the color of the shadow to black so i can see it better.
Maybe u want use a button like that , u need to use ButtonTheme to use height and width ,
Final edition:
Use Material , it has elevation property, shapeBorder and BorderRadiusGeometry, u can use an container as parent of Material for the width and height.
Link to Material Widget on Flutter
Problems in the code:
With the blurRadius of 50, you won't see any difference in shadow when you change the spreadRadius or the offset
With the opacity of 0.15, you will barely see any shadow (both in black or white backgound color)
Try this code:
Container(
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.28,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: Color(0xFFF9D276),
borderRadius: BorderRadius.circular(35),
boxShadow: [
BoxShadow(
//offset: Offset(0, 4),
color: Color(0xFFF9D276), //edited
spreadRadius: 4,
blurRadius: 10 //edited
)
),
),
How it looks like:
If you need anything else, just let me know.
As far I get some idea from your first image, you can check the code below.
Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Color(0xff000000),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Color(0x73000000),
blurRadius: 5.0,
spreadRadius: 1,
offset: new Offset(-10.0, 0.0),
),
],
),
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.25,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Container(
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.28,
// padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: Color(0xFFF9D276),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Color(0xff000000),
blurRadius: 0.0,
spreadRadius: -2,
offset: new Offset(2.0, 0.0),
),
],
borderRadius: BorderRadius.circular(35),
),
),
),
),
)
You can try this
Stack(
children: [
Container(
margin: EdgeInsets.only(left: 2, top: 2),
child: Align(
alignment: Alignment.center,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
primary: Colors.red,
backgroundColor: Colors.gray,
fixedSize: const Size(200, 50),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
side: const BorderSide(width: 3.0, color: ColorsConst.gray9),
),
child: const Text("Text"),
onPressed: () => print('Text'),
),
),
),
Container(
margin: EdgeInsets.only(right: 2, bottom: 2),
child: Align(
alignment: Alignment.center,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
primary: Colors.red,
backgroundColor: Colors.gray,
fixedSize: const Size(200, 50),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
side: const BorderSide(width: 3.0, color: ColorsConst.gray9),
),
child: const Text("Text"),
onPressed: () => print('Text'),
),
),
)
]
)

Flutter need to add shadow on image

I need to add shadow in my image. Just on image not the other container i try but its not showing shadow
Here is my code
return Container(
margin: EdgeInsets.only(left: 40),
width: MediaQuery.of(context).size.width * 0.5,
child: ListView.builder(
itemCount: _places.length,
itemBuilder: (ctx, int index) {
return Container(
padding: EdgeInsets.only(top: 50),
child: Column(
children: <Widget>[
Text(_places[index]['name'], style: TextStyle(fontSize: 20),),
Container(
padding: EdgeInsets.only(top: 20),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
width: 200,
child: Image(image: AssetImage('assets/images/500place.jpg')),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 7),
child: Row(
children: <Widget>[
Icon(Icons.favorite_border, size: 20),
Spacer(),
Text(
_places[index]['where'],
),
],
)
),
],
),
);
}),
);
As you see the result of the output screen I need to show the light shadow on image only i added the box shadow in container but its not working on image only
Wrap it with a Card..that will give you the elevation(shadow)..
You can do it like this..
Card(
child: Container(),
elevation: 20.0, // give it according to your requirement
),
For a single shadow line
Card(
child: Container(
width: double.infinity,
height: 1,
),
elevation: 1.0, // give it according to your requirement
)