Блог

у меня есть макет, над которым я работаю, но я очень новичок в flutter, что я хотел бы сделать, это
иметь макет как таковой:

но то, что мне удалось сделать до сих пор, это

код того, что мне удалось сделать, находится здесь:

 body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
                flex: 3,
                child: Container(
                  padding: EdgeInsets.all(20.0),
                  color: Colors.cyan,
                  child: Row(
                    children: <Widget>[
                      Checkbox(
                        value: false,
                        onChanged: (bool? value) {
                          setState(() {
                            print(value!);
                          });
                        }, //onChanged
                      ),
                      Text("Enable 1"),
                      new Flexible(
                        child: new TextField(
                          decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'username',
                          ),
                        ), //textfield
                      ), //flexible
                      new Flexible(
                        child: new TextField(
                          obscureText: true,
                          decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'password',
                          ),
                        ), //textfield
                      ), //flexible
                    ],
                  ),
                ) //Container
                ), //Expanded

            Expanded(
              flex: 1,
              child: Container(
                child: ElevatedButton.icon(
                  icon: Icon(
                    Icons.save_alt,
                    color: Colors.green,
                    size: 24.0,
                  ),
                  label: Text('Save'),
                  onPressed: () {
                    print('pressed');
                  },
                  style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all<Color>(Colors.greenAccent),
                  ),
                ),
              ),
            )
          ]
)//end of body,
 

я понятия не имею, как достичь желаемого результата, любая помощь будет признательна

Вы должны использовать a Column вместо Row .

Затем a Row для текста и checkbox для выравнивания.

Вот пример:

 Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
                flex: 3,
                child: Container(
                  padding: EdgeInsets.all(20.0),
                  color: Colors.cyan,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Checkbox(
                            value: false,
                            onChanged: (bool value) {
                              setState(() {
                                print(value);
                              });
                            }, //onChanged
                          ),
                          Text("Enable 1"),
                        ],
                      ),
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 16.0),
                        child: new TextField(
                          decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'username',
                          ),
                        ),
                      ), //flexible
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 16.0),
                        child: new TextField(
                          obscureText: true,
                          decoration: InputDecoration(
                            border: OutlineInputBorder(),
                            labelText: 'password',
                          ),
                        ),
                      ), //flexible
                    ],
                  ),
                ) //Container
                ), //Expanded

            Expanded(
              flex: 1,
              child: Container(
                child: ElevatedButton.icon(
                  icon: Icon(
                    Icons.save_alt,
                    color: Colors.green,
                    size: 24.0,
                  ),
                  label: Text('Save'),
                  onPressed: () {
                    print('pressed');
                  },
                  style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all<Color>(Colors.greenAccent),
                  ),
                ),
              ),
            )
          ])