Getting rid of small line in-between 2 containers - Flutter/Dart - flutter

Question

There's a small but very noticeable line in between 2 containers whenever I try developing a unique design for the UI. Here's the screenshot:
The goal would be to get rid of this small line while achieving the same UI design. Any help is appreciated!
And here's the code:
Widget build(BuildContext context) {
var safePadding = MediaQuery.of(context).padding.top;
return WillPopScope(
onWillPop: () async => false,
child: Container(
color: Colors.white,
child: SafeArea(
child: Scaffold(
appBar: AppBar(
toolbarHeight: 56,
elevation: 0,
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
actions: [
SizedBox(
width: MediaQuery.of(context).size.width * 1,
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: SizedBox(
width: 40,
height: 40,
child: Material(
shape: const CircleBorder(),
color: Colors.white,
child: InkWell(
customBorder: const CircleBorder(),
splashColor: Colors.grey.withOpacity(0.5),
child: const Icon(Icons.keyboard_arrow_left,
color: Color.fromARGB(255, 25, 61, 94)),
onTap: () {
Future.delayed(
const Duration(milliseconds: 50),
() {
Navigator.of(context).pop();
},
);
},
),
),
),
),
const Text(
'App Bar',
style: TextStyle(
color: Color.fromARGB(255, 25, 61, 94),
fontSize: 20,
fontWeight: FontWeight.w500),
),
],
),
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height:
(MediaQuery.of(context).size.height - 56 - safePadding) *
0.4,
color: const Color.fromARGB(255, 25, 61, 94),
child: Container(
padding: const EdgeInsets.only(bottom: 15),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(75),
topRight: Radius.circular(0),
),
color: Colors.white,
),
),
),
Container(
color: Colors.white,
height:
(MediaQuery.of(context).size.height - 56 - safePadding) *
0.6,
child: Container(
padding: const EdgeInsets.only(right: 30, left: 30),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(75),
),
color: Color.fromARGB(255, 25, 61, 94)),
),
),
],
),
),
),
),
);
}

Answer 1

I've managed to achieve what I've wanted so I'll answer my question here. For some reason flutter always leaves a small space in between Containers and if this small space ruins your UI design, you'll need to change the color of the containers' borders. For my scenario, it was a bit more complex since there were multiple containers stacked on top of each other and the solution can be different depending on the code/scenario.
Here's the new code with the issue fixed:
Widget build(BuildContext context) {
var safePadding = MediaQuery.of(context).padding.top;
return WillPopScope(
onWillPop: () async => false,
child: Container(
color: Colors.white,
child: SafeArea(
child: Scaffold(
appBar: AppBar(
toolbarHeight: 56,
elevation: 0,
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
actions: [
SizedBox(
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: SizedBox(
width: 40,
height: 40,
child: Material(
shape: const CircleBorder(),
color: Colors.white,
child: InkWell(
customBorder: const CircleBorder(),
splashColor: Colors.grey.withOpacity(0.5),
child: const Icon(Icons.keyboard_arrow_left,
color: Color.fromARGB(255, 25, 61, 94)),
onTap: () {
Future.delayed(
const Duration(milliseconds: 50),
() {
Navigator.of(context).pop();
},
);
},
),
),
),
),
const Text(
'App Bar',
style: TextStyle(
color: Color.fromARGB(255, 25, 61, 94),
fontSize: 20,
fontWeight: FontWeight.w500),
),
],
),
),
],
),
body: Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.blue,
border: Border(
bottom: BorderSide(color: Colors.blue, width: 0)),
),
child: Container(
width: MediaQuery.of(context).size.width * 1,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(75),
),
),
height: (MediaQuery.of(context).size.height -
56 -
safePadding) *
0.4,
),
),
Stack(
children: [
Row(
children: [
Container(
width: MediaQuery.of(context).size.width * 0.5,
decoration: BoxDecoration(
color: Colors.blue,
),
height: (MediaQuery.of(context).size.height -
56 -
safePadding) *
0.6,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide(
color: Colors.white, width: 0)),
),
child: Container(
width: MediaQuery.of(context).size.width * 0.5,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(75),
),
),
height: (MediaQuery.of(context).size.height -
56 -
safePadding) *
0.6,
),
),
],
),
Positioned(
child: Center(
child: Container(
padding: EdgeInsets.only(top: 30),
width: MediaQuery.of(context).size.width,
height: (MediaQuery.of(context).size.height -
56 -
safePadding) *
0.6,
child: Text('This is a test',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
)),
),
)),
],
),
],
),
),
),
),
);
}
Result: