How can I remove the visible border between two containers in a column?

Question

does anyone know how to solve it so that there is no border between two elements in a column in the website? Thanks for any advice

Image

Code Here

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

  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return Scaffold(
          body: Column(
            children: [
              Container(color: HexColor("#111340"), height: 5.h, child: Row(children: [],),),
              Container(color: HexColor("#111340"), height: 95.h,)
            ],
          )
        );
      }
    );
  }
}

I'm a newbie, so I apologize for any mistakes in the post

L. Gangemi · Answer

I don't think there's any error in the code you posted, the little space between the elements should not be there.

Here's your code running, there's no space between the containers: https://zapp.run/edit/flutter-z8206198306?entry=lib/main.dart&file=lib/main.dart

I think the problem could be related to the extension you are using for providing height, or to the Sizer widget.

If you want to handle responsiveness, I suggest to look at this package: https://pub.dev/packages/layout

Soufiane Saadouni · Answer

Use Flexible

Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    children: [
      Flexible(
        child: Container(
          color: Colors.red,
        ),
      ),
      Flexible(
        flex: 4,
        child: Container(
          color: Colors.green,
        ),
      ),
    ],
  ),
);}

How can I remove the visible border between two containers in a column?

2 Answers