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

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: