How do I align my text in flutter in different rows at a common start point

Question

I hope you guys are doing fine. This is my first project for flutter and I would like to seek some guidance from you guys.

This is my current layout but I would like to align the 3 rows of text label and the star rating

Sorry I have 2 more questions as

How can I space out the space between the first star rating and the text field?

Is there any way to create a bigger text field? I've tried height but it doesn't make the field bigger.

Thank you and hope you guys have a nice day :)

This is my current code:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Form(
            key: _formKey,
            child: Container(
                padding: EdgeInsets.all(30),
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(height: 100),
                      new TextFormField(
                        style: new TextStyle(
                          height: 1.0,
                        ),
                        validator: (value) {
                          if (value.isEmpty) {
                            return 'Field can\'t be empty!';
                          }
                          return null;
                        },
                        onSaved: (value) => _feedback = value,
                        decoration: new InputDecoration(
                            labelText: "Enter Message",
                            fillColor: Colors.white),
                        keyboardType: TextInputType.text,
                      ),
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        // crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            "AACCDDEE",
                            textAlign: TextAlign.center,
                            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
                          ),
                          StarRating(
                            rating: safetyrating,
                            starConfig: StarConfig(
                              size: 30.0,
                            ),
                            onChangeRating: (int rating) {
                              setState(() {
                                this.safetyrating = rating.toDouble();
                              });
                            },
                          )
                        ],
                      ),

                      new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Text(
                            "B",
                            textAlign: TextAlign.center,
                            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
                          ),
                          StarRating(
                            rating: speedrating,
                            starConfig: StarConfig(
                              size: 30.0,
                            ),
                            onChangeRating: (int rating) {
                              setState(() {
                                this.speedrating = rating.toDouble();
                              });
                            },
                          )
                        ],
                      ),

                      new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Text(
                            "AAS",
                            textAlign: TextAlign.center,
                            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20),
                          ),
                          StarRating(
                            rating: enjoymentrating,
                            starConfig: StarConfig(
                              size: 30.0,
                            ),
                            onChangeRating: (int rating) {
                              setState(() {
                                this.enjoymentrating = rating.toDouble();
                              });
                            },
                          )
                        ],
                      ),
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          RaisedButton(
                            child: Text('SUBMIT'),
                            // height: 50.0,
                            // minWidth: 150.0,
                            color: Colors.blueGrey,
                            splashColor: Colors.black,
                            textColor: Colors.black,
                            // child: new Icon(FontAwesomeIcons.signInAlt),
                            onPressed: feedback,
                          ),
                        ],
                      ),
                    ],
                  ),
                ))));
  }

score 0 · Answer 1 · answered Nov 09 '19 at 19:08

In my opinion, the only possible variant is to create the following structure:

Container:
    Row:
        Column with title,
        Column with stars,

And then make the alignment to each column.

EDIT:

Or you can set fixed width to text container or stars container and then set aliignment

Have a nice day too :)

score 0 · Answer 2 · answered Nov 09 '19 at 19:13

For alignment I suggest to use Row with 2 Columns instead of 3 Rows.

Row(
   children: [
      Column(
         children: [
             //TextFormFields
         ]
      ),
      Column(
         children: [
          //StarRating
         ]
      )
    ]
)

About height, if you need multiline, than follow this answer. If no, play with decoration property.

How do I align my text in flutter in different rows at a common start point

2 Answers2