[英]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.我有 2 个容器,我需要将 1 个容器从中底部和其他容器从中间顶部进行圆形,这样它将在 2 个容器之间创建一个圆圈,因此我可以在此处添加文本。 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,
),
],
),
),
You can round a container by using a BoxDecoration
and applying a BoxShape.circle
to it:您可以通过使用
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),
),
)
),
),
],
)
);
}
you can use Stack Widget to place widgets您可以使用 Stack Widget 来放置小部件
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希望它会有所帮助
As told before the solution may be the Stack Widget.如前所述,解决方案可能是 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")),
),
],
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.