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

How do I align a button to the right corner in Flutter?

enter image description here

OutlinedButton(
      onPressed: () async {},
      child: MaterialButton(
        onPressed: () async {
          updateFavoriteStatus(
            context: context,
            isFavorite: isFavorite,
            product: product,
          );
        },
        height: getProportionateScreenHeight(0.0566),
        color: AppColors.kPrimaryColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(25),
        ),
        child: Consumer<Product>(builder: (context, prod, ch) {
          final isFavorite =
          Provider.of<Favorites>(context, listen: false)
              .isFavoriteOrNot(prod.id);
          final productLikes = prod.likes!;
          return Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              InkWell(
                onTap: tryUpdateFavoriteStatus,
                child: Icon(
                  CupertinoIcons.heart_fill,
                  color: isFavorite
                      ? AppColors.philippineSilver
                      : AppColors.white,
                ),
              ),
              SizedBox(
                width: getProportionateScreenWidth(0.15),
              ),
              Text(
                '$productLikes ',
                style:
                Theme.of(context).textTheme.bodyMedium!.copyWith(
                  color: AppColors.white,
                ),
              ),
            ],
          );
        }),
      ),

I have an issue adding button to right side of the row. I tried using MainAxisAlignment.and alignment: Alignment.right but it didn’t work.

Tags:

2

Answers


  1. 0 
    OutlinedButton(
      onPressed: () async {},
      child: MaterialButton(
        onPressed: () async {},
        height: 40.0,
        color: Colors.amber,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(25),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            InkWell(
              onTap: () {},
              child: const Icon(
                Icons.heart_broken_rounded,
                color: Colors.white,
              ),
            ),
            const SizedBox(
              width: 10,
            ),
            const Text(
              "5",
              style: TextStyle(color: Colors.white),
            )
          ],
        ),
      ),
    ),

    Check this out

    Hope this may help you.

    Login or Signup to reply.
  2. 0 
    Align(
alignment: Alignment(0.9, 0.0),
child: MaterialButton(
    onPressed: () async {},
    height: 40.0,
    color: Colors.amber,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        InkWell(
          onTap: () {},
          child: const Icon(
            Icons.heart_broken_rounded,
            color: Colors.white,
          ),
        ),
        const SizedBox(
          width: 10,
        ),
        const Text(
          "5",
          style: TextStyle(color: Colors.white),
         )
        ],
      ),
    ),
  ),

    Hope this helps you. wrap it will Align.

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

Back To Top
Search