Below is the builder method that I have created to create my Widgets in flutter app :
Widget _buildParkingAndNagarSection(String title, Color colorBackground,
double marginBox) {
return Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.only(top: 20, left: 20),
width: 153.5.w,
height: 114.h,
decoration: BoxDecoration(
color: colorBackground,
shape: BoxShape.rectangle,
border: Border.all(
color: Color(0xFFF1F1F1),
width: 1.h
),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(ic_bottom_home,
width: 44.w, height: 33.75.h, fit: BoxFit.fill),
SizedBox(
height: 20,
width: 0,
),
Text(
title,
style: TextStyle(
fontFamily: "Poppins",
fontSize: 14.sp,
color: Color(0xFF27303E)),
softWrap: true,
overflow: TextOverflow.fade,
)
],
),
)
],
));
Calling it as below inside Row:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildParkingAndNagarSection(
Localization
.of(context)
.labelSaveParking,
Color(0xFFE7F8FF), 20),
_buildParkingAndNagarSection(
Localization
.of(context)
.labelNavigateNagar,
Color(0xFFFFE7EB), 10),
],
),
But What I have achieved is as below :
You can see there is little more space between Two Boxes. I want them as equal as it is there it's left and right side.
How ? Thanks.
Starting from Flutter 3.27, you can use the spacing
property in the Row
widget to easily add uniform spacing between its children. This eliminates the need for adding multiple SizedBox
widgets manually, making your layout cleaner and more concise.
Here's an example:
Row(
spacing: 10, // <-- Add uniform spacing between children
children: <Widget>[
Icon(Icons.home),
Icon(Icons.star),
Icon(Icons.settings),
],
)
Row spacing
:Row
widget, no extra widgets required.This is the recommended approach if you are using Flutter 3.27 or later. For earlier versions, you would need alternatives like SizedBox
or Spacer
.