I have the following layout:
I want to remove the space between the upper box and the buttons, so both appear to be in the same box.
Code:
Column(
children: [
// RAW CONTENT
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: double.infinity,
maxHeight: MediaQuery.of(context).size.height *
_PREVIEW_MAX_HEIGHT_RATIO),
child: Container(
padding: EdgeInsets.only(
left: MARGIN_LAT,
top: MARGIN_TOP,
right: MARGIN_LAT),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black38),
borderRadius: BorderRadius.only(
topLeft: _ROUND_BORDER,
topRight: _ROUND_BORDER)),
child: Center(child: Text(_displayValue))),
),
),
// CONTENT BUTTONS
Container(
padding: EdgeInsets.only(
left: MARGIN_LAT, top: 0, right: MARGIN_LAT),
child: Row(
children: [
Expanded(
child: RaisedButton(
padding: EdgeInsets.zero,
child: Text(_static.translate(
context, 'result_contentButton_raw')),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: _ROUND_BORDER)),
onPressed: () {}),
),
Expanded(
child: RaisedButton(
padding: EdgeInsets.zero,
child: Text(_static.translate(context,
'result_contentButton_displayValue')),
shape: ContinuousRectangleBorder(),
onPressed: () {}),
),
Expanded(
child: RaisedButton(
padding: EdgeInsets.zero,
child: Text(_static.translate(
context, 'result_contentButton_copy')),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: _ROUND_BORDER)),
onPressed: () {}),
)
],
),
),
],
),
Is there any way to do this? Thanks.
The margin you notice is because of the default value for materialTapTargetSize on RaisedButton Widget.
To remove it, change it to MaterialTapTargetSize.shrinkWrap as follows:
Expanded(
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: EdgeInsets.zero,
child: Text("This is an other text"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: _ROUND_BORDER
)
),
onPressed: () {}
),
)
Related
I am trying to build a layout with basically 2 parts which one is scrollable and not the other. I have a button on the not scrollable one but it is not clickable
Here is the code
Scaffold(
body: Stack(
children: [
Container(
height: double.infinity,
decoration:
const BoxDecoration(color: AppColors.secondaryBackground),
child: const SafeArea(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: ReturnButton(),
),
),
),
SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 150.0),
child: Container(
width: double.infinity,
decoration: const BoxDecoration(
color: AppColors.mainBackground,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25))),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0, vertical: 20.0),
child: Column(children: const []))),
),
)
],
),
);
try using Icon Button Instead, and provide it with the Icon and inPressed callback
IconButton(
iconSize: 72,
icon: const Icon(Icons.arrow_left),
onPressed: () {
// ...
},
),
I want to design like this..
My output
I tried to resize the red box of the send picture like the first picture but I couldn't. How to solve it?
If cannot do like this please give your suggestions.
code
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
shadowColor: Colors.white,
color: HexColor('#FFFBFB').withOpacity(0.5),
child: SizedBox(
height: height * 0.35,
width: width * 0.94,
child: Padding(
padding: const EdgeInsets.only(
top: 0, bottom: 0, right: 0, left: 0),
child: Column(
children: <Widget>[
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2.0),
),
shadowColor: Colors.red,
color: HexColor('##D70040').withOpacity(0.9),
child: SizedBox(
height: height * 0.05,
width: (MediaQuery.of(context).size.width),
)),
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: const EdgeInsets.only(
top: 5, right: 10, left: 10),
child: Column(
children: <Widget>[],
),
),
),
),
],
),
),
),
),
Here is something I managed to achieve:
Using this code:
Column(
children: [
Material(
child: SizedBox(
width: 200,
height: 30,
),
color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2).copyWith(
topLeft: Radius.circular(12),
topRight: Radius.circular(12)
)
),
),
Material(
child: SizedBox(
width: 200,
height: 80,
),
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2).copyWith(
bottomLeft: Radius.circular(12),
bottomRight: Radius.circular(12)
)
),
)
],
),
Hope this helps. Of course you'd need to adjust colors and sizes to the ones you need in your project.
I dont know why you are using nested card but i think container is better solution:
Container(
width: 400,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white.withOpacity(0.6),
),
child: Column(
children: [
Container(
width: double.infinity,
height: 60,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
)
],
),
),
result be like:
You can play with values to get what you need
i post two images, first is looking good but when i am scrolling my data then my ui is getting messed up(second image)
I want it to go under the curve parts when I scroll.
HOW TO DO IT
This is my code
return Scaffold(
backgroundColor: appGreenColor,
appBar: new AppBar(
centerTitle: false,
backgroundColor: appGreenColor,
elevation: 0,
title: Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Image.asset(
"lib/Assets/bellazIcon.png",
fit: BoxFit.fill,
height: 40,
width: 78,
),
),
actions: [
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: IconButton(
icon: Image.asset(
"lib/Assets/notification1.png",
height: 22,
width: 22,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NotificationList()));
}),
)
],
),
body: Container(
height: MediaQuery.of(context).size.height - 70,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30), topRight: Radius.circular(30))),
child: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 3),
child: Column(
children: [
locationView(),
imageSlider(),
genderView(),
categories(),
isMan == true
? maleTopBranches.length == 0
? Container()
: topRatedSalons(maleTopBranches)
: topRatedSalons(femaleTopBranches),
],
),
),
offerImage(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 2.0),
child: Column(
children: [
services(),
nearByAppointment(),
],
),
),
infoImage()
],
),
),
),
);
this image looks fine till i am not scrolling
but when i scrolling image my data comes onto that curve
This answer work for me
adding : clipBehavior: Clip.hardEdge
Container(
clipBehavior: Clip.hardEdge,
height: MediaQuery.of(context).size.height - 70,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: ...,
),)
try to add : clipBehavior: Clip.hardEdge
Container(
clipBehavior: Clip.hardEdge,
height: MediaQuery.of(context).size.height - 70,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(30),
topRight: Radius.circular(30))),
child: ...,
),)
I have simple screen that contains of 2 widget and I wrap it using Column, but there is always small space between first widget and second widget. Is there a way to remove space in Column. here is the picture that I would like to remove the space:
and here is the code:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: cardWidth,
height: cardHeight,
child: Card(
// color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...
],
),
),
),
),
),
Container(
width: sizeWidth - 135,
height: noteHeight,
child: Center(
child: Text("hi.."),
),
decoration: BoxDecoration(
color: noteAuth,
border: Border.all(
color: noteAuth,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15))),
)
],
),
Your parent layout color and container color are both same then you use card and give padding and it takes some space.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
color: Colors.red, // here you change your color
// height: cardHeight,
child: Card(
// color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),
),
),
),
),
Container(
width: double.infinity - 135,
// height: noteHeight,
child: Center(
child: Text("hi.."),
),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.green,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15))),
)
],
)
Output:
edit the margin of the Card widget
Container(
width: double.infinity,
color: Colors.red, // here you change your color
// height: cardHeight,
child: Card(
// color: Colors.transparent,
margin: EdgeInsets.all(0), //************* Here ********************
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white70, width: 1),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
],
),
),
),
),
),
mainAxisAlignment: MainAxisAlignment.center
I am working in this app and I have a problem first the pic doesn't take the all size of the clipRRect, then I used the Ink.Image and the BoxFit.fitHeight, it okay but now the pic doesnt take the radius of the clipRRect..
sorry for my weak english, here is the code and screenshoot for the app.
please check the pics its in link.
thanks alot.
Widget foodCard() {
return Padding(
padding: EdgeInsets.all(10.0),
child: Container(
child: FittedBox(
child: Material(
color: Colors.white,
elevation:8.0 ,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
),
child: Row(children: [
Container(
width: 250, height: 250,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0)),
child: Ink.image(
height: 200,
fit: BoxFit.fitHeight,
alignment: Alignment.topLeft,
image: NetworkImage(
"https://images-gmi-pmc.edge-generalmills.com/087d17eb-500e-4b26-abd1-4f9ffa96a2c6.jpg"
)),)
),
Container(
child: Padding(padding: const EdgeInsets.all(8.0),
child: Column(children: [
Text("Recipe 1",
style: TextStyle(color: Colors.black),),
Text("Some data"),
ButtonBar(children: <Widget>[
FlatButton(
child: Text('Like'),
color: Colors.deepPurple,
onPressed: () {},
),
FlatButton(
child: Text('Dislike'),
color: Colors.deepPurple,
onPressed: () {},
),
],)
]),)
)
],)
)
),
));
}
before using fitbox.fithieght
after using it
I want the picture to be like this
copy and paste this Widget.
Padding(
padding: const EdgeInsets.all(16.0),
child: Material(
color: Colors.white,
elevation: 8.0,
shadowColor: Colors.blueGrey,
borderRadius: BorderRadius.all(Radius.circular(20.0)),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
child: FittedBox(
child: Material(
color: Colors.white,
elevation: 8.0,
shadowColor: Colors.blueGrey,
child: Row(
children: [
Container(
width: 250,
height: 250,
child: Ink.image(
height: 200,
fit: BoxFit.fitHeight,
alignment: Alignment.topLeft,
image: NetworkImage(
"https://images-gmi-pmc.edge-generalmills.com/087d17eb-500e-4b26-abd1-4f9ffa96a2c6.jpg"))),
Container(
padding: const EdgeInsets.all(8.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: [
Text(
"Recipe 1",
style: TextStyle(color: Colors.black),
),
Text("Some data"),
ButtonBar(
children: <Widget>[
FlatButton(
child: Text('Like'),
color: Colors.deepPurple,
onPressed: () {},
),
FlatButton(
child: Text('Dislike'),
color: Colors.deepPurple,
onPressed: () {},
),
],
)
]),
))
],
)))),
),
)