Search code examples
flutterdartflutter-layout

How to change button position?


enter image description here

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(),
                                    ),
                                  ),
                                ),
                              )
                            ],
                          ),
                        )

Solution

  • 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(),
                                        ),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            )