как представить два текстовых поля подряд

Question

Итак, я пытаюсь создать такой макет. Где у меня есть 2 текстовых поля по горизонтали, но после их обертывания в строку. Однако при перезагрузке текстовое поле не отображается:

Однако через этот код при перезагрузке ничего из этого не появляется:

Column(
                    children: <Widget>[
                      SizedBox(height: 10.0),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          TextField(
                            decoration: InputDecoration(
                                labelText: 'Name',
                                labelStyle: TextStyle(
                                    color: Colors.grey[400]
                                )
                            ),
                          ),
                          SizedBox(width: 10.0),
                          TextField(
                            decoration: InputDecoration(
                                labelText: 'Name',
                                labelStyle: TextStyle(
                                    color: Colors.grey[400]
                                )
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 10.0),
                      TextField(
                        decoration: InputDecoration(
                            labelText: 'Email/Mobile Number',
                            labelStyle: TextStyle(
                              color: Colors.grey[400],
                            )
                        ),
                      ),
                      SizedBox(height: 10.0),
                      TextField(
                        decoration: InputDecoration(
                            labelText: 'Password',
                            labelStyle: TextStyle(
                              color: Colors.grey[400],
                            )
                        ),
                      ),
                    ],
                  )

Answer 1

Вы должны использовать виджет Expanded. Замените свой Row виджет следующим:

  Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Expanded(
                              // optional flex property if flex is 1 because the default flex is 1
                              flex: 1,
                              child: TextField(
                                decoration: InputDecoration(
                                    labelText: 'Name',
                                    labelStyle: TextStyle(
                                        color: Colors.grey[400]
                                    )
                                ),
                              ),
                            ),
                            SizedBox(width: 10.0),
                            Expanded(
                              // optional flex property if flex is 1 because the default flex is 1
                              flex: 1,
                              child: TextField(
                                decoration: InputDecoration(
                                    labelText: 'Name',
                                    labelStyle: TextStyle(
                                        color: Colors.grey[400]
                                    )
                                ),
                              ),
                            ),
                          ],
                        ),

Answer 2

Виджеты TextField в вашем Row не имеют указанной ширины, поэтому Flutter не знает, сколько горизонтального пространства должны занимать текстовые поля.

Чтобы исправить это, оберните оба ваших текстовых поля в Expanded виджет. Expanded изменяет размер текстовых полей в соответствии с доступной шириной в строке.