Centering Container widget with and without border

Question

In my app, I need four Containers, the first row does not have borders(I removed the borders by giving the same color as of Container). The second row has borders like this (tested on real device): -

However, if you see closely, it seems as if the first row's blue container is slightly expanded towards the red container, making it look like as if the first row is not equally expanded but if you zoom enough you will actually see that blue container is overlapping the red one, refer to the image below : -

How to center both the container or make it look like it has center alignment?

Please feel free to suggest different ways to get the desired output.

Code I used : -

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              for (int i = 0; i < 2; i++) ...[
                Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.red,
                      border: Border(
                        bottom: BorderSide(
                            width: i == 1 ? 1 : 0,
                            color: i == 1 ? Colors.black : Colors.red),
                        left: BorderSide(
                            width: i == 0 ? 0 : 1,
                            color: i == 0 ? Colors.red  : Colors.black),
                        top: BorderSide(
                            width: i == 0 ? 0 : 1,
                            color: i == 0 ? Colors.red : Colors.black),
                        right: BorderSide(
                            width: i == 0 ? 0 : 0.5,
                            color: i == 0 ? Colors.red : Colors.black),
                      )),
                ),
              ]
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              for (int i = 0; i < 2; i++) ...[
                Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      border: Border(
                        bottom: BorderSide(
                            width: i == 1 ? 1 : 0,
                            color: i == 1 ? Colors.black : Colors.blue),
                        left: BorderSide(
                            width: i == 0 ? 0 : 0.5,
                            color: i == 0 ? Colors.blue : Colors.black),
                        top: BorderSide(
                            width: i == 0 ? 0 : 1,
                            color: i == 0 ? Colors.blue : Colors.black),
                        right: BorderSide(
                            width: i == 0 ? 0 : 1,
                            color: i == 0 ? Colors.blue : Colors.black),
                      )),
                ),
              ]
            ],
          ),
        ],
      ),
    ));
  }
}

Answer 1

In cases where border width is 0, you can set the color to Colors.transparent.

Try this:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Row(

        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              for (int i = 0; i < 2; i++) ...[
                Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.red,
                      border: Border(
                        bottom: BorderSide(
                            width: i == 1 ? 1 : 0,
                            color: i == 1 ? Colors.black : Colors.transparent),
                        left: BorderSide(
                            width: i == 0 ? 0 : 1,
                            color: i == 0 ? Colors.transparent  : Colors.black),
                        top: BorderSide(
                            width: i == 0 ? 0 : 1,
                            color: i == 0 ? Colors.transparent : Colors.black),
                        right: BorderSide(
                            width: i == 0 ? 0 : 0.5,
                            color: i == 0 ? Colors.transparent : Colors.black),
                      )),
                ),
              ]
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              for (int i = 0; i < 2; i++) ...[
                Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      border: Border(
                        bottom: BorderSide(
                            width: i == 1 ? 1 : 0,
                            color: i == 1 ? Colors.black : Colors.transparent),
                        left: BorderSide(
                            width: i == 0 ? 0 : 0.5,
                            color: i == 0 ? Colors.transparent : Colors.black),
                        top: BorderSide(
                            width: i == 0 ? 0 : 1,
                            color: i == 0 ? Colors.transparent : Colors.black),
                        right: BorderSide(
                            width: i == 0 ? 0 : 1,
                            color: i == 0 ? Colors.transparent : Colors.black),
                      )),
                ),
              ]
            ],
          ),
        ],
      ),
    ));
  }
}