Flutter how can i round a container from middle - flutter

Question

I have 2 containers I need to round 1 container from mid-bottom and other from mid-top so it will create a circle between 2 containers so I can add Text here. Can anyone please tell how it's possible
body: Container(
child: Column(
children: <Widget>[
SizedBox(height: (MediaQuery.of(context).size.height -
appBar.preferredSize.height - MediaQuery.of(context).padding.top) *
0.05,
),
Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.9,
color: Colors.red,
height: (MediaQuery.of(context).size.height -
appBar.preferredSize.height - MediaQuery.of(context).padding.top) *
0.40,
child: Column(
children: <Widget>[
Text('10%'),
Text('Say goodbye')
],
),
),
),
Container(
height: (MediaQuery.of(context).size.height -
appBar.preferredSize.height - MediaQuery.of(context).padding.top) *
0.1,
child: Text('OR'),
),
Center(
child: Container(
width: MediaQuery.of(context).size.width * 0.9,
height: (MediaQuery.of(context).size.height -
appBar.preferredSize.height - MediaQuery.of(context).padding.top) *
0.40,
color: Colors.blue,
child: Column(
children: <Widget>[
Text('10%'),
Text('Say goodbye')
],
),
),
),
SizedBox(height: (MediaQuery.of(context).size.height -
appBar.preferredSize.height - MediaQuery.of(context).padding.top) *
0.05,
),
],
),
),
Like this

Answer 1

You can round a container by using a BoxDecoration and applying a BoxShape.circle to it:
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
AppBar appBar = AppBar(
title: Text('Demo'),
);
double stackHeight = MediaQuery.of(context).size.height - 105;
double stackWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: appBar,
body: Stack(
children: [
Container(
height: stackHeight * 0.5,
width: stackWidth,
color: Colors.blue,
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: stackHeight * 0.5,
width: stackWidth,
color: Colors.red,
),
),
Align(
alignment: Alignment.center,
child: Container(
width: stackWidth,
height: stackHeight * 0.015,
color: Colors.black,
),
),
Align(
alignment: Alignment.center,
child: Container(
width: stackWidth,
height: stackHeight * 0.15,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
child: Align(
alignment: Alignment.center,
child: Text(
"OR",
style: TextStyle(color: Colors.white),
),
)
),
),
],
)
);
}
This produced the following screen:

Answer 2

you can use Stack Widget to place widgets
here is exactly what you need
body: Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
color: Colors.amber,
child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.48,
color: Colors.blue,
),
Container(
height: MediaQuery.of(context).size.height * 0.04,
color: Colors.black,
),
Container(
height: MediaQuery.of(context).size.height * 0.48,
color: Colors.red,
)
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Center(
child: Container(
height: MediaQuery.of(context).size.height * 0.20,
width: MediaQuery.of(context).size.width * 0.20,
decoration: BoxDecoration(
color: Colors.black, shape: BoxShape.circle),
),
),
],
),
Center(
child: Text(
"QR",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
),
)
],
),
Hope it will help

Answer 3

As told before the solution may be the Stack Widget. Below a possible solution.
You can change the color of the middle part with the same color of the background in order to obtain the desired effect.
Stack(
alignment: Alignment.center,
children: <Widget>[
Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.9,
color: Colors.blue,
height: 200),
Container(
width: MediaQuery.of(context).size.width * 0.9,
height: 20,
color: Colors.black),
Container(
width: MediaQuery.of(context).size.width * 0.9,
color: Colors.red,
height: 200),
]),
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.black,shape: BoxShape.circle),
child: Center(child: Text("or")),
),
],
);