flutter - 颤动我如何从中间圆一个容器

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

像这样

标签： flutter

Answer 1

BoxDecoration您可以通过使用 a并对其应用 a来舍入容器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),
                ),
              )
            ),
          ),
        ],
      )
    );
  }

这产生了以下屏幕：