Flutter how can i round a container from middle

问题

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

回答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:

回答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

回答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")),
        ),
      ],
    );

来源：https://stackoverflow.com/questions/61360744/flutter-how-can-i-round-a-container-from-middle