Hello, I want to ask. How to change button position. I want to change the position of the button left to bottom right. I have used the Align widget (Alignment.bottomRight) but the position of the button still doesn't change. Do I need to use another widget to solve my problem? Where did I go wrong? Please help.

This is my code:

Container(
                          width: double.infinity,
                          margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                          padding: EdgeInsets.symmetric(
                              horizontal: 190, vertical: 20),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.transparent,
                              width: 1.0,
                            ),
                          ),
                          child: Wrap(
                            direction: Axis.vertical,
                            alignment: WrapAlignment.start,
                            spacing: 20,
                            children: [
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      height: 30,
                                      child: Text(
                                        'Important patient note',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 1020,
                                      child: TextFormField(
                                        textAlign: TextAlign.start,
                                        maxLines: 6,
                                        style: const TextStyle(
                                            color: Colors.black),
                                        controller: importantNotes,
                                        onSaved: (String? value) {
                                          importantNotes.text = value!;
                                        },
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          hintText: 'Important patient note',
                                          hintStyle: TextStyle(
                                            color: Colors.grey,
                                            fontSize: 16,
                                          ),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                              Expanded(
                                child: Align(
                                  alignment: Alignment.bottomRight,
                                  child: ButtonTheme(
                                    minWidth: 100.0,
                                    height: 50.0,
                                    buttonColor: mainColor,
                                    child: FlatButton(
                                      padding:
                                          EdgeInsets.fromLTRB(30, 0, 30, 0),
                                      textColor: Colors.white,
                                      color: mainColor,
                                      child: Text('Save notes'),
                                      onPressed: () =>
                                          _savePatientImportantNotes(),
                                    ),
                                  ),
                                ),
                              )
                            ],
                          ),
                        )

CodePudding user response：

Set Wrap crossAxisAlignment to:

Container(
                          width: double.infinity,
                          margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                          padding: EdgeInsets.symmetric(
                              horizontal: 190, vertical: 20),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.transparent,
                              width: 1.0,
                            ),
                          ),
                          child: Wrap(
                            direction: Axis.vertical,
                            alignment: WrapAlignment.start,
                            crossAxisAlignment: WrapCrossAlignment.end, // just add this
                            spacing: 20,
                            children: [
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                      height: 30,
                                      child: Text(
                                        'Important patient note',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 16),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 1020,
                                      child: TextFormField(
                                        textAlign: TextAlign.start,
                                        maxLines: 6,
                                        style: const TextStyle(
                                            color: Colors.black),
                                        controller: importantNotes,
                                        onSaved: (String? value) {
                                          importantNotes.text = value!;
                                        },
                                        decoration: const InputDecoration(
                                          border: OutlineInputBorder(),
                                          hintText: 'Important patient note',
                                          hintStyle: TextStyle(
                                            color: Colors.grey,
                                            fontSize: 16,
                                          ),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                              Expanded(
                                child: Align(
                                  alignment: Alignment.bottomRight,
                                  child: ButtonTheme(
                                    minWidth: 100.0,
                                    height: 50.0,
                                    buttonColor: mainColor,
                                    child: FlatButton(
                                      padding:
                                          EdgeInsets.fromLTRB(30, 0, 30, 0),
                                      textColor: Colors.white,
                                      color: mainColor,
                                      child: Text('Save notes'),
                                      onPressed: () =>
                                          _savePatientImportantNotes(),
                                    ),
                                  ),
                                ),
                              )
                            ],
                          ),
                        )

CodePudding user response：

As for the UI, follow this widget, Instead of hard-coded value use LayoutBuilder also recommend checking

CodePudding user response：

I think this will help you.

 Center(
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.transparent,
                    width: 1.0,
                  ),
                ),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Text(
                        'Important patient note',
                        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                      ),
                      TextFormField(
                        textAlign: TextAlign.start,
                        maxLines: 6,
                        style: const TextStyle(color: Colors.black),
                        controller: importantNotes,
                        onSaved: (String? value) {
                          importantNotes.text = value!;
                        },
                        decoration: const InputDecoration(
                          border: OutlineInputBorder(),
                          hintText: 'Important patient note',
                          hintStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 16,
                          ),
                        ),
                      ),
                      ElevatedButton(
                          onPressed: () {
                            // Do something what your want
                          },
                          child: const Text('Submit'))
                    ]),
              ),
            ),