Reputation: 563
I'm trying to draw a Dialog/Popup that will show when user taps on a marker in google map.
The problem is that the Text-Fields doesn't align in the Dialog. You can see it below in the image:
So, I wonder how I could align the text so each new text begins at a line vertically.
And here is my code for it:
child: Material(
color: Colors.transparent,
child: ScaleTransition(
scale: scaleAnimation,
child: Container(
decoration: ShapeDecoration(
color: Colors.blueGrey[900],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0))),
child: Padding(
padding: const EdgeInsets.fromLTRB(40, 20, 40, 15),
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text(
'Stackoverflow Restaurant',
style: new TextStyle(
fontSize: 20.0,
color: textColorPopup,
fontWeight: FontWeight.bold),
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Text(
'Open hours',
style: new TextStyle(
fontSize: fontSizeWeekDays, color: textColorPopup),
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'MON',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'TUE',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'WEN',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'THU',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'FRI',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'SAT',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 30),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'SUN',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
SizedBox(
width: 30.0,
),
Text(
'15.00 - 03.00',
style: new TextStyle(
fontSize: fontSizeOpenHours,
color: textColorPopup),
),
],
),
),
RaisedButton(
padding: EdgeInsets.fromLTRB(60, 0, 60, 0),
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
onPressed: _dismissAlertDialog,
child: Text(
'CLOSE',
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontStyle: FontStyle.normal),
),
),
],
),
),
),
),
),
),
Upvotes: 0
Views: 110
Reputation: 19
use mainAxisAlignment: MainAxisAlignment.spaceBetween on each Row and the Days will align left and the Times will align right.
Upvotes: 2