Hello, everyone!

It's been a month or so since I've written any code, and it's quite the experience trying to get back into the swing of things. After stepping away for a bit due to personal commitments, I've returned to be greeted by what should be a straightforward task: aligning two containers side by side. It's a basic skill, sure, but I've been reminded that taking a break can make even the most familiar tasks seem a little strange at first glance.

But that's the journey of coding, isn't it? Each return is a new adventure, a reacquaintance with the old and a chance to learn anew. Let's get our coding hats back on and tackle this together!

What we're aiming for is a clean and symmetrical design, with two distinct containers — let's refer to them as Box A and Box B, using layout widgets.

Here’s the code snippet that achieves our goal:

Row(
      children: [
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.red
            ),
            child: Text("Box A"),
          ),
        ),
         Expanded(
          child: Container(
            decoration: BoxDecoration(color: Colors.black),
            child: Text("Box B"),
          ),
        ),
      ],
    )

Output:

And just like that, we have our solution. The image above demonstrates the output we expect from this code: two equally spaced containers, aligned horizontally. It's amazing how a few well-placed lines of code can result in a clear and functional design.

I trust this explanation has been helpful. Do incorporate this into your own projects where needed, and may your development journey be both productive and fulfilling.

Best regards and happy coding!

About Me

I am Zaahra, a Google Women Techmakers Ambassador who enjoy mentoring people and writing about technical contents that might help people in their developer journey. I also enjoy building stuffs to solve real life problems.

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra

Cheers,

Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer