How to set spaces between items on a Row are equals?

April 14, 2023

I add Row with children inside [IconButton, Container-> Text, IconButton], but the space between first icon and the container not equal to the space between the container and second icon..

Row(
                       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        IconButton(
                            onPressed: () {},
                            icon: Icon(
                              Icons.arrow_circle_left_rounded,
                              size: 55,
                              color: AppColor.purpleColor,
                            )),
                        Container(
                          width: 80,
                          decoration: BoxDecoration(
                              color: AppColor.purpleColor,
                              shape: BoxShape.circle),
                          child: Center(
                              child: Text('33',
                                  style: GoogleFonts.lateef(
                                    textStyle: TextStyle(
                                        color: AppColor.whiteColor,
                                        fontSize: 38),
                                  ))),
                        ),
                        IconButton(
                            onPressed: () {},
                            icon: Icon(
                              Icons.arrow_circle_right_rounded,
                              size: 55,
                              color: AppColor.purpleColor,
                            )),
                      ],
                    ),

I tried using mainAxisAlignment: MainAxisAlignment.spaceEvenly,
also I tried Spacer, SizedBox.. the same problem..

I want the spaces are equal..

>Solution :

the problem is not with Row but with IconButton

try like to move the size value from Icon to IconButton

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            IconButton(
                onPressed: () {},
                iconSize: 55,
                icon: const Icon(
                  Icons.arrow_circle_left_rounded,
                  color: Colors.purple,
                )),
            Container(
              width: 80,
              decoration: const BoxDecoration(
                color: Colors.purple,
                shape: BoxShape.circle,
              ),
              child: const Center(
                  child: Text(
                '33',
              )),
            ),
            IconButton(
                onPressed: () {},
                iconSize: 55,
                icon: const Icon(
                  Icons.arrow_circle_right_rounded,
                  size: 55,
                  color: Colors.purple,
                )),
          ],
        ),
      ),
    );
  }
}