Question 241904 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Align button with text and icon to start from right

I am creating part of a program in Flutter running on an Android emulator but am stumped on how to align this button’s position to start from the right so it doesn’t overflow off the screen when the button text changes from "Start" to "Mark as Complete". I have tried to add the MainAxisAlignment.end property to the Row, aligning the text using textAlign and even using a variable size for the Card background, but none seem to be working. I would appreciate some guidance on how to achieve this.

Here is my current code:

                   TextButton(                                        
                     style: ButtonStyle(                                                
                      shape: 
                           MaterialStateProperty.all<RoundedRectangleBorder> (                        
                              RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24.0),
                        side: const BorderSide(color: Colors.black),
                      )),
                    ),
                    // ignore: avoid_print
                    onPressed: () => print("sdf"),
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Padding(
                          padding: EdgeInsets.fromLTRB(2, 5, 10, 5),
                          child: Icon(
                            Icons.arrow_circle_right_outlined,
                            color: Color.fromRGBO(103, 80, 164, 1),
                            size: 24,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.fromLTRB(0, 5, 10, 5),
                          child: Text(
                            "Start", //"Mark as Complete",
                            style: TextStyle(
                              color: Color.fromRGBO(103, 80, 164, 1),
                              fontSize: 14,
                              letterSpacing: 1.0,
                              fontFamily: "Roboto",
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    My functioning code, if anyone wants to see. Not the most optimal, but hopefully I can come back and optimise it once I'm well-versed in Flutter!

                      Expanded(
                    child: Row(
                      children: [
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.all(16),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                TextButton(
                                  style: ButtonStyle(
                                    shape: MaterialStateProperty.all<
                                            RoundedRectangleBorder>(
                                        RoundedRectangleBorder(
                                      borderRadius:
                                          BorderRadius.circular(24.0),
                                      side: const BorderSide(
                                          color: Colors.black),
                                    )),
                                  ),
                                  // ignore: avoid_print
                                  onPressed: () => print("sdf"),
                                  child: const Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.end,
                                    children: [
                                      Padding(
                                        padding: EdgeInsets.fromLTRB(
                                            0, 5, 10, 5),
                                        child: Icon(
                                          Icons.arrow_circle_right_outlined,
                                          color: Color.fromRGBO(
                                              103, 80, 164, 1),
                                          size: 24,
                                        ),
                                      ),
                                      Padding(
                                        padding: EdgeInsets.fromLTRB(
                                            0, 5, 10, 5),
                                        child: Text(
                                          "Start", //"Mark as Complete",
                                          style: TextStyle(
                                            color: Color.fromRGBO(
                                                103, 80, 164, 1),
                                            fontSize: 14,
                                            letterSpacing: 1.0,
                                            fontFamily: "Roboto",
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),

  2. 0

    This is where I find an Expanded widget comes in handy.

    Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
        Expanded(
          flex: 4, //whatever value you think it should be
          child: TextButton()],
        ),
)

    or you can use a Wrap around the Text in your TextButton.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search