Rusben Wladiskoz
Rusben Wladiskoz

Reputation: 563

How to align TextFields e.g. Text() in a column?

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.

Look at the time, and day-leadings

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

Answers (1)

Witnauer
Witnauer

Reputation: 19

use mainAxisAlignment: MainAxisAlignment.spaceBetween on each Row and the Days will align left and the Times will align right.

Upvotes: 2

Related Questions