Flutter 自定义对齐

要做到这一点，可能有很多方法:

SizedBox()-将这一排的子元素分成3个大小相同的部分:

SizedBox(
            width: double.infinity,
            height: 56,
            child: TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFF00966D),
                ),
                foregroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFFFAFAFA),
                ),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                ),
              ),
              onPressed: () {
                Navigator.popAndPushNamed(context, "signupPhoneVerification");
              },
              child: Row(
                children: [
                  SizedBox(
                    width: MediaQuery.of(context).size.width / 3.3,
                    child: Container(),
                  ),
                  SizedBox(
                      width: MediaQuery.of(context).size.width / 3.3,
                      child: const Text('Sign Up', textAlign: TextAlign.center,)
                  ),
                  SizedBox(
                      width: MediaQuery.of(context).size.width / 3.3,
                      child: const Icon(Icons.star)
                  ),
                ],
              ),
            ),
          ),

MainAxisAlignment.center-在左侧添加一个小部件以平衡它:

SizedBox(
            width: double.infinity,
            height: 56,
            child: TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFF00966D),
                ),
                foregroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFFFAFAFA),
                ),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                ),
              ),
              onPressed: () {
                Navigator.popAndPushNamed(context, "signupPhoneVerification");
              },
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  SizedBox(
                    width: 50
                  ),
                  Text('Sign Up', textAlign: TextAlign.center,),
                  Icon(Icons.star),
                ],
              ),
            ),
          ),

使用Stack:

SizedBox(
            width: double.infinity,
            height: 56,
            child: TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFF00966D),
                ),
                foregroundColor: MaterialStateProperty.all<Color>(
                  const Color(0XFFFAFAFA),
                ),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                ),
              ),
              onPressed: () {
                Navigator.popAndPushNamed(context, "signupPhoneVerification");
              },
              child: Stack(
                alignment: Alignment.center,
                clipBehavior: Clip.none,
                children: const [
                  Text('Sign Up', textAlign: TextAlign.center,),
                  Positioned(
                    right: -50,
                      child: Icon(Icons.star)
                  ),
                ],
              ),
            ),
          ),