How to do like this

image

code

        Row(
              children: [
                SizedBox(width: 33.w),
                Text(
                  StringRes.getStart,
                  style: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: AppColors.backgroundColor,
                    fontSize: 13.sp,
                  ),
                ),
                Spacer(),
                Icon(
                  Icons.arrow_forward,
                  color: AppColors.backgroundColor,
                ),
                SizedBox(
                  width: 3.w,
                ),
              ],
            ),

i get diffrent diffrent spacing in diffrent device like this image 2 image 3

CodePudding user response：

I assume what you are looking for is something like this:

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: const [
      SizedBox(width: 20),
      Text('Get started'),
      SizedBox(
        width: 20,
        child: Icon(Icons.arrow_forward),
      ),
    ],
  ),
),

In this example, the Text widget is centered by having equally large SizedBox widgets on both sides of it and by telling the Row widget to use MainAxisAlignment.spaceBetween. The padding around the Row contents is achieved with the Padding widget, so that it does not interfere with the content alignment.

I hope this helps you.

CodePudding user response：

Use Expanded widget to give maximum available space to a widget. And avoid using SizedBox for Spacing widgets it may throw Overflow error when sufficient width is not available.

Instead using Padding to space widgets.

Hope this solves out your problem:

Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Row(
                  children: const [
                    Expanded(
                      child: Center(
                        child: Text(
                          "Get Started",
                          style: TextStyle(
                            fontWeight: FontWeight.w500,
                            color: Colors.white,
                            fontSize: 13,
                          ),
                        ),
                      ),
                    ),
                    Icon(Icons.arrow_forward, color: Colors.white),
                  ],
                ),
              ),