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

Flutter custom Alignment

I have a Button:

enter image description here

This is just a simple button with a center aligned text. Now imagine I need to add a widget next to the text in horizontal axis!

Something like this:

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: const Text('Sign Up'),
  ),
),

How can I do this?

Tags:

4

Answers


  1. 0

    Wrap Text widget with a Row widget and add the Widget you want after the Text widget.

    Instead of child: const Text('Sign Up') you could use

    child: Row(
  children: [
    const Text('Sign Up'),
    // your widget...
  ],
)
    Login or Signup to reply.
  2. 0

    Use TextButton like below:

    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 [
        Text('Sign Up'),
        Icon(Icons.abc_rounded),
      ],
    ),
  ),
),
    Login or Signup to reply.
  3. 0

    wrap your button with stack . and feel free to position your widget on it anywhere you want, better than a row way which you will be aware of any overflow .

    Login or Signup to reply.
  4. 0

    There could be many ways to achieve this:-

    With SizedBox() – Dividing the row’s children in 3 same-sized portions:

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

    With MainAxisAlignment.center – Addding a widget on the left to balance it:

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

    With 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)
                  ),
                ],
              ),
            ),
          ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search