Unexpected Line between Containers Flutter

Question

Many Times in flutter I Found a Line between two Containers in flutter. Code example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              color: Colors.red,
              width: double.infinity,
              child: Column(
                children: [
                  Container(
                    height: 150,
                    child: const Center(
                      child: Text('cdccd'),
                    ),
                  ),
                  Container(
                    height: 20,
                    color: Colors.red,
                  ),
                  buildSeperator()
                ],
              ),
            ),
            Container(
              height: 300,
              width: double.infinity,
              child: Text('cdcdcd'),
            ),
          ],
        ),
      ),
    );
  }

  ///Build Seperator
  Widget buildSeperator() {
    return Stack(
      children: [
        Container(
          height: 24,
          color: Colors.red,
        ),
        Container(
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(50),
              topRight: Radius.circular(50),
            ),
            color: Colors.white,
          ),
          height: 24,
          width: double.infinity,
        ),
      ],
    );
  }
}

Reference Image:

If It's a Flutter Issue: Flutter Team Request you to Resolve it.

Answer 1

Work Around but not final Solution, Add Another Container Above the Container with a border with a higher height.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Color(0xFF842247),
    title: Text(widget.title),
  ),
  body: SingleChildScrollView(
    child: Column(
      children: [
        Container(
          color: const Color(0xFF842247),
          height: 56,
        ),
        Container(
          color: const Color(0xFF842247),
          width: double.infinity,
          child: Column(
            children: [
              Container(
                height: 24,
                child: const Center(
                  child: Text('cdccd'),
                ),
              ),
              buildSeperator()
            ],
          ),
        ),
        Container(
          height: 300,
          // width: double.infinity,
          child: Text('cdcdcd'),
        ),
      ],
    ),
  ),
);
}


  ///Build Seperator
  Widget buildSeperator() {
return Stack(
  clipBehavior: Clip.none,
  children: [
    Container(
      height: 24,
      color: const Color(0xFF842247),
    ),
    Container(
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(50),
          topRight: Radius.circular(50),
        ),
        color: Colors.white,
      ),
      height: 24,
      width: double.infinity,
    ),
  ],
);
}
}