Флаттер, как я могу округлить контейнер от середины

Question

У меня есть 2 контейнера, мне нужно округлить 1 контейнер от середины снизу, а другой - от середины вверху, чтобы создать круг между 2 контейнерами, чтобы я мог добавить текст сюда. Может кто-нибудь, пожалуйста, расскажите, как это возможно

 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,
        ),
      ],
    ),
  ),

Как это

Answer 1

вы можете использовать Stack Widget для размещения виджетов

это именно то, что вам нужно

 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),
        ),
      )
    ],
  ),

Надеюсь, это поможет

Answer 2

Как уже говорилось, решением может быть виджет стека. Ниже возможное решение. Вы можете изменить цвет средней части на тот же цвет фона, чтобы получить желаемый эффект.

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

Answer 3

Вы можете округлить контейнер, используя BoxDecoration и применив к нему BoxShape.circle:

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),
                ),
              )
            ),
          ),
        ],
      )
    );
  }

Это приведет к следующему экрану: