Padding and layout of card in flutter - flutter

I am trying to add padding to the text in the card and for some reason, it is not working.
This is my code:
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
height: 170.0,
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.phone),
title: Align(
child: Text('Need immediate help'),
alignment: Alignment(-1.2, 1.0),
),
subtitle: Column(
children: <Widget>[
Align(
child: Text('In an emergency, call 999.'),
alignment: Alignment(-1.2, 0),
),
Align(
child: Text(
"If you're in crisis and need to speak to someone call NHS 111."),
alignment: Alignment(-1.2, 0),
),
],
),
),
ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ButtonTheme(
minWidth: 150.0,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
child: const Text('999'),
onPressed: () => launch("tel://000"),
),
),
ButtonTheme(
minWidth: 150.0,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
child: const Text('111'),
onPressed: () => launch("tel://000"),
),
Currently it looks like this:
I am wanting to add padding around the text so it looks better but using alignment isn't affecting the second subtitle and isn't affecting the padding above or below any of the text. Any help would be appreciated!

Change mainAxisAlignment property of your Column as following and remove the mainAxisSize property
Column(
mainAxisAlignment: MainAxisAlignment.center,
// ...
),
Edit
Adjust your subtitle like this
ListTile(
leading: Icon(Icons.phone),
title: Align(
child: Text('Need immediate help'),
alignment: Alignment(-1.2, 1.0),
),
subtitle: Align(
alignment: Alignment(- 65.0, 1.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('In an emergency, call 999.', textAlign: TextAlign.left,),
Text("If you're in crisis and need to speak to someone call NHS 111.", textAlign: TextAlign.left,),
],
),
),
),

Related

Centering a Row in a Stack

I have a widget that consists of a Row and an Icon in a stack. I want to center them both vertically in the stack (the row in the center, the icon in the right center). I wrap both widgets in an Align widget, but this only is affecting the Icon, not the Row. How can I have the ROw centered vertically?
This is my code
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(searchLanguage == SearchLanguage.english ? word.english : word.korean,
style: Theme.of(context).textTheme.bodyText1),
SizedBox(
width: 8.0,
),
Icon(Icons.arrow_forward),
SizedBox(
width: 8.0,
),
Text(searchLanguage == SearchLanguage.english ? word.korean : word.english,
style: Theme.of(context).textTheme.bodyText1),
],
),
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(Icons.delete),
onPressed: () => deleteCallback(word),
),
)
],
),
),
);
}
This is the outcome
Try using the alignment of the stack instead:
Stack(
alignment: Alignment.topCenter,
Alignment properties works, also remove the unnecessary alignments
Full code:
return Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("One", style: Theme.of(context).textTheme.bodyText1),
SizedBox(
width: 8.0,
),
Icon(Icons.arrow_forward),
SizedBox(
width: 8.0,
),
Text("Two", style: Theme.of(context).textTheme.bodyText1),
],
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(Icons.delete),
onPressed: () {},
),
)
],
),
),
)

Flutter : How to set container size as wrap_content in Column

I want to set Container size dynamic I mean wrap_content how to do in flutter?
In below code Container take full width by default but I want to set width in Container as Text() long as
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
alignment: Alignment.center,
color: Colors.orange[800],
child: Text("Hello How are you"),
),
Container(
margin: EdgeInsets.all(10),
alignment: Alignment.center,
color: Colors.yellow[800],
child: Text("Welcome"),
)
],
);
I get this :
But I Want this output :
The easiest solution is to use Align.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
child: Container(
margin: EdgeInsets.all(10),
color: Colors.orange[800],
child: Text("Hello How are you"),
),
),
Align(
child: Container(
margin: EdgeInsets.all(10),
color: Colors.yellow[800],
child: Text("Welcome"),
),
)
],
)
Wrap your Container with Row
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
alignment: Alignment.center,
color: Colors.orange[800],
child: Text("Hello How are you"),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
alignment: Alignment.center,
color: Colors.yellow[800],
child: Text("Welcome"),
),
],
)
],
),
The shortest solution can be, remove alignment: Alignment.center, from both Container and wrap Column inside a Center like this,
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
color: Colors.orange[800],
child: Text("Hello How are you"),
),
Container(
margin: EdgeInsets.all(10),
color: Colors.yellow[800],
child: Text("Welcome"),
)
],
),
)
Output
Wrap your Container with Row or Column
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: CoreUiUtils.getColorFromHex("#292B2B"),
width: deviceWidth,
child: Column(
children: [
Text("Title "),
Text("Description"),
],
)),
],
)
The best way to wrap your container content is not setting any height to that widget.
Wrap your Container with Row or Column
then set it size min
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.orange,
child: Text(
"Hello"
)
),
],
)

Slidable resizes widget below

I am using Slidable and whenever it is used, the widget below is moved up.
Widget buildItemList(BuildContext context, DocumentSnapshot document) {
return new Container(
child: Card(
elevation: 10.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Slidable(
actionPane: SlidableDrawerActionPane(),
//actionExtentRatio: 0.25,
closeOnScroll: false,
secondaryActions: <Widget>[
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: (){},
)
],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
// Unnecessary code was removed
children: <Widget>[
Container(
padding: const EdgeInsets.only(right: 12.0),
child: Row(
children: <Widget>[
Text('0'),
Text('/'),
Text(document['value'].toString())
],)
)
]
),
),
),
);
}
It does not matter where i put Slidable, it always resizes the widget.
Someone able to help?
Thank you!
This will fix the issue
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(
height: double.maxFinite,
width: double.maxFinite,
padding: const EdgeInsets.only(right: 12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('0'),
Text('/'),
Text('value'.toString())
],
)),
)
],
),
If you don't need extra functionality you can remove the two rows and simply write something like
child: Container(
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 12.0),
child: Text('0/${document['value'].toString()}'),
),

Flutter text gets a overflow on right side

I Have a card with an icon on the left Column and two texts on the Right Column, the right side first text gets an overflow.
Hoe can I make the right text come to the downside on reaching the right limit.
home: Scaffold(
body: SafeArea(
child: Container(
height: 60,
child: Card(
child: Row(
children: <Widget>[
Column(children: <Widget>[Padding(
padding: const EdgeInsets.all(10.0),
child: Icon(Icons.access_alarm),
)]),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'This is the text one This is the textThis is the textThis is the textThis is the text',
)],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('This is the second text'),
],
)
],),
],
),
),
),
),
),
);```
Because Row and Column do not have a static width, it will expand to overflow the screen. To prevent that, wrap your the children with Expanded widget.
Scaffold(
body: Container(
height: 60,
child: Card(
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Icon(Icons.access_alarm),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'This is the text one This is the textThis is the textThis is the textThis is the text',
),
Text('This is the second text'),
],
),
),
],
),
),
),
),
I did some modifications to your code, since there were some unnecessary widgets.

How to fix overflowed issue in Dialog?

I added Dialog, But overflowed on bottow. How to fix like this issue?
return showDialog
return showDialog(
// barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return Dialog(
//this right here
child: Theme(
data: ThemeData().copyWith(
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(),
), ),
Container in child
child: Container(
color: Colors.blueGrey[100],
height: MediaQuery.of(context).size.height / 2.5,
width: MediaQuery.of(context).size.width / 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
first Row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Text(AppTranslations.of(context).text("minimum_length")),),
Text(": 6")
],),
others rows same like first row
Padding for gray color Allowed text
Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Row(
children: <Widget>[
Expanded(
child: Text(
AppTranslations.of(context).text("allowed_character"),
style: TextStyle(color: Colors.grey[700]),
), ),],),),),
OK button
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Expanded(child:
FlatButton(
child: Text(
AppTranslations.of(context).text("ok"),
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () => Navigator.of(context).pop(),
),),],)],),),),), );
For the horizontal overflow add a Expanded parent widget for your Text.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text(AppTranslations.of(context).text("minimum_length")),
),
Text(": 6")
],
),
And for the vertical overflow add SingleChildScrollView parent for your Column
Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView( child : Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[ ...
Wrap your Dialog child element, that is the Container Widget with SingleChildScrollView.
child: SingleChildScrollView(
child: Container(
color: Colors.blueGrey[100],
height: MediaQuery.of(context).size.height / 2.5,
width: MediaQuery.of(context).size.width / 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
....
....
],
),
),
),
),