I want to remove the default padding from an outlined button. This is my code;
SizedBox(
width: 150.0,
child: OutlinedButton(
onPressed: () {
setState(() {
selected = index;
});
},
style: OutlinedButton.styleFrom(
backgroundColor: (selected == index) ? color : Colors.white,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(30),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
),
),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(duration),
Text(dataPlan),
Text(price),
],
),
],
),
),
);
The SizedBox is wrapped in a ListView.
This is the result I get;
I want the paddings at the left and right removed, so I can customize to my preference. Thanks.
Just add minimumSize: Size.zero,padding: EdgeInsets.zero, in OutlinedButton.styleFrom()
SizedBox(
width: 150.0,
height:100,
child: OutlinedButton(
onPressed: () {
},
style: OutlinedButton.styleFrom(
minimumSize: Size.zero,
padding: EdgeInsets.zero,
backgroundColor: Colors.yellow,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(30),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
children: [
Text("duration"),
Text("dataPlan"),
Text("price"),
],
),
],
),
)),
Add in Column this property to reduce size of the widget.
Column(
mainAxisSize: MainAxisSize.min
...
Add the following properties to the button style:
tapTargetSize: MaterialTapTargetSize.shrinkWrap
minimumSize: Size.zero
padding: EdgeInsets.zero
In addition, set the mainAxisSize on the Column and on the row to min:
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(duration),
Text(dataPlan),
Text(price),
],
),
],
),
Related
Hey I tried to build a chat app like this, and I have a hard time to align the time for each message. I want the chat bubble follow the size of the message, and the time is always on the right side of the message bubble.
Here is my current code for the message bubble:
Align(
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: isMe
? BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8))
: BorderRadius.only(
topRight: Radius.circular(8),
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8)),
boxShadow: [
BoxShadow(
offset: Offset(0, 4),
blurRadius: 12,
color: Colors.black.withOpacity(.04))
]),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(
maxWidth: SizeConfig.safeBlockHorizontal * 60,
minWidth: SizeConfig.safeBlockHorizontal * 20,
),
child: Text(message)),
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: SizeConfig.safeBlockHorizontal * 60,
minWidth: SizeConfig.safeBlockHorizontal * 20,
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
sendAtTime,
style: textStyle.copyWith(
fontSize: 10, color: Color(0xff999B9D)),
),
SizedBox(width: SizeConfig.safeBlockHorizontal * 1),
Icon(
Icons.check,
color: Color(0xffee3124),
size: 15,
)
],
),
),
],
),
),
),
try this :
Align(
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
child: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: isMe
? BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8))
: BorderRadius.only(
topRight: Radius.circular(8),
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8)),
boxShadow: [
BoxShadow(
offset: Offset(0, 4),
blurRadius: 12,
color: Colors.black.withOpacity(.04))
]),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(
maxWidth: SizeConfig.safeBlockHorizontal * 60,
minWidth: SizeConfig.safeBlockHorizontal * 20,
),
child: Text(message)),
Row(
mainAxisSize: double.infinity,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
sendAtTime,
style: textStyle.copyWith(
fontSize: 10, color: Color(0xff999B9D)),
),
SizedBox(width: SizeConfig.safeBlockHorizontal * 1),
Icon(
Icons.check,
color: Color(0xffee3124),
size: 15,
)
],
),
],
),
),
),
Try making,
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"sendAtTime",
),
Icon(
Icons.check,
color: Color(0xffee3124),
size: 15,
)
],
),
mainAxisAlignment: MainAxisAlignment.spaceBetween ensures that the children have maximum space between them.
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 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: () {}
),
)
I'm new and my English is pretty bad. Please answer easy to understand...
I already tried using the AspectRatio Widget but it, combined with a Center widget, moved my buttons in the center. Apart from that it worked but the buttons really need to stick to the side. This is my code so far:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'main.dart';
import 'contentData.dart';
import 'package:swipedetector/swipedetector.dart';
AppBrain contentData = AppBrain();
class SwipePage extends StatefulWidget {
SwipePage({Key key, this.title}) : super(key: key);
final String title;
#override
_SwipePage createState() => _SwipePage();
}
class _SwipePage extends State<SwipePage> {
#override
Widget build(BuildContext context) {
return SwipeDetector(
swipeConfiguration: SwipeConfiguration(
horizontalSwipeMaxHeightThreshold: 80.0,
horizontalSwipeMinDisplacement: 30.0,
horizontalSwipeMinVelocity: 150.0),
onSwipeLeft: () {
Navigator.of(context).push(
toInformationPage(),
);
},
child: Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.only(top: 20, bottom: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
AppBrain().getImageAdress(),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0, bottom: 20),
child: Divider(
color: Colors.grey,
height: 20,
thickness: 2,
indent: 120,
endIndent: 120,
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
bottomRight: Radius.circular(50),
),
),
child: MaterialButton(
height: 60,
onPressed: () {},
textColor: red,
child: Icon(
Icons.close,
size: 45,
),
),
),
Container(
width: 120,
),
Container(
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
bottomLeft: Radius.circular(50),
),
),
child: MaterialButton(
height: 60,
onPressed: () {
Navigator.of(context).push(
toInformationPage(),
);
},
textColor: green,
child: Icon(
Icons.check,
size: 45,
),
),
),
],
),
)
],
),
),
),
),
);
}
}
This is what it looks like now:
https://imgur.com/a/2kgpJ6A
This is what it should look like across all aspect-ratios and resolutions (the image should just scale down..):
https://imgur.com/FBNlpDa
Looking at your code you have at least two different problems.
Setting the correct image fit - You can use BoxFit.contain in Image.asset(fit: boxFit.contain, .... ) to make sure it is resized to be contained inside it's parent.
You have a Column and want the first child to take all the available width. Hence you should nest it inside Expanded widget.
ie. structurally something like:
Column(
children: [
Expanded(
// your image goes here which will take as much height as possible.
child: Image.asset('asset', fit: BoxFit.contain),
),
Container(
// your button bar which takes up the rest of the height
child: MaterialButton( ... ),
),
],
);
I left out quite a bit, but i hope you get the gist.
I think I fixed it myself with the help of Herbert, thanks :). I wrapped the Container containing my image in an Expanded widget and set a flex value of 3.
This is my new code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'main.dart';
import 'contentData.dart';
import 'package:swipedetector/swipedetector.dart';
AppBrain contentData = AppBrain();
class SwipePage extends StatefulWidget {
SwipePage({Key key, this.title}) : super(key: key);
final String title;
#override
_SwipePage createState() => _SwipePage();
}
class _SwipePage extends State<SwipePage> {
#override
Widget build(BuildContext context) {
return SwipeDetector(
swipeConfiguration: SwipeConfiguration(
horizontalSwipeMaxHeightThreshold: 80.0,
horizontalSwipeMinDisplacement: 30.0,
horizontalSwipeMinVelocity: 150.0),
onSwipeLeft: () {
Navigator.of(context).push(
toInformationPage(),
);
},
child: Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 4,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(
AppBrain().getImageAdress(),
fit: BoxFit.contain,
),
),
margin: EdgeInsets.fromLTRB(25, 25, 25, 0),
),
),
Padding(
padding: const EdgeInsets.only(
top: 20.0,
),
child: Divider(
color: Colors.grey,
height: 20,
thickness: 2,
indent: 120,
endIndent: 120,
),
),
Padding(
padding: const EdgeInsets.only(bottom: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
bottomRight: Radius.circular(50),
),
),
child: MaterialButton(
height: 60,
onPressed: () {},
textColor: red,
child: Icon(
Icons.close,
size: 45,
),
),
),
Container(
width: 120,
),
Container(
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
bottomLeft: Radius.circular(50),
),
),
child: MaterialButton(
height: 60,
onPressed: () {
Navigator.of(context).push(
toInformationPage(),
);
},
textColor: green,
child: Icon(
Icons.check,
size: 45,
),
),
),
],
),
)
],
),
),
),
);
}
}
You can try using FittedBox widget too.
I want to create a custom card layout or iPad and Tablets
Here's what I code so far
Widget _buildListItem(BuildContext context) {
return new Container(
child: ListView(
children: <Widget>[
Card(
elevation: 2,
child: ClipPath(
child: Container(
height: 70,
decoration: BoxDecoration(
border: Border(
right:
BorderSide(color: Colors.lightGreen, width: 30))),
child: Container(
height: 70,
child: Container(
alignment: Alignment(1.16, 0),
child: Icon(
Icons.arrow_forward_ios,
color: Colors.black,
size: 24.0,
semanticLabel: 'wweqweqwe',
)),
)),
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3))),
),
)
],
));
}
}
I am new in the flutter please help me to build this.
Try this
Container(
height: 60,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white),
child: Container(
child: Row(
children: <Widget>[
Container(
height: 60,
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
bottomLeft: Radius.circular(15),
),
color: Colors.blue),
child: Icon(
Icons.arrow_forward_ios,
color: Colors.black,
size: 24.0,
semanticLabel: 'wweqweqwe',
)),
Expanded(
child: Container(
color: Colors.red,
height: 60,
padding: EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Text('Text One'),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Text Two'),
Text('Text Three'),
],
)
],
),
)),
Container(
height: 60,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
color: Colors.blue),
child: Icon(
Icons.arrow_forward_ios,
color: Colors.black,
size: 24.0,
semanticLabel: 'wweqweqwe',
)),
],
),
))
OUTPUT