将按钮与文本和图标对齐以从右开始

Question

我正在 Android 模拟器上运行的 Flutter 中创建程序的一部分，但我很困惑如何将该按钮的位置从右侧开始对齐，这样当按钮文本从“开始”更改为“时它不会溢出屏幕”标记为完成”。我尝试将

MainAxisAlignment.end

属性添加到行，使用

textAlign

对齐文本，甚至使用卡片背景的可变大小，但似乎都不起作用。我希望获得有关如何实现这一目标的指导。

这是我当前的代码：

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

Answer 1

这是我发现扩展小部件派上用场的地方。

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

或者您可以在文本按钮中使用环绕文本。