我是编程新手,我正尝试在我的flutter应用程序中做到这一点:
https://i.stack.imgur.com/heYno.jpg(向上移动该圆圈,使该区域溢出)
而不是将其封闭在其中。
我试图将其堆叠并溢出,但是我无法将其全部组合在一起在这里工作,也许是因为我使用了扩展的flex布局?我非常感谢您。
也欢迎其他给我这种布局的方法 这是用户界面代码:
return Scaffold( // PRINCIPAL UI
backgroundColor: Color.fromARGB(255, 0, 115, 80),
body: Center(
child: Material(
color: Color.fromARGB(255, 0, 115, 80),
child: Column(
children: <Widget>[
Expanded(flex: 10, //bar top
child: Row(
),
),
Expanded(flex: 100, // pageview
child: Container(
width: screen.width,
height: screen.height/1.20,
child: PageView(
children: <Widget>[
pregunta(),
pregunta(),
pregunta()
],
),
),
),
Expanded(flex: 8, //bar bottom
child: Stack(
children: <Widget>[
Container( // <<<< need that to move up over the green zone
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey,
),
),
],
)
),
]
),
),
),
);
____________________________
// this is the rest of used widget code in case you need //
____________________________
Widget pregunta (){
return Padding(
padding: EdgeInsets.all(0),
child: Container(
width: screen.width,
height: screen.height/1.20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.elliptical(800,100))
),
child: Column(
children: <Widget>[
space(3),
Expanded(flex: 4,
child: Container(
color: Colors.grey[400],
width: screen.width/1.05,
)
),
Expanded(flex: 18,
child: Container(
padding: EdgeInsets.fromLTRB(10, 5, 10, 0),
width: screen.width/1.05,
height: screen.height,
color: Colors.grey,
child: Text(
"thanks thanks dude i love your doin'",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
)
),
Expanded(flex: 4,
child: Container(
color: Colors.grey[400],
width: screen.width/1.05,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
color: Colors.yellow,
child: Row(
children: <Widget>[
Image.asset(
"images/libro.png",
color: Colors.grey[600],
height: 22,
),
Text(
"hey hou thanks dude",
style: TextStyle(
fontSize: 12,
color: Colors.grey[600],
),
),
],
),
)
],
),
)
),
space(2),
Expanded(flex: 50,
child: Container(
width: screen.width/1.05,
height: screen.height,
color: Colors.grey[700],
child: ListView(
children: <Widget>[
MaterialButton(
padding: EdgeInsets.fromLTRB(10, 0, 10, 20),
height: hei/20,
child: Container(
width: screen.width,
color: Colors.red,
child: Text(
"love much love",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
),
textAlign: TextAlign.start,
),
),
),
MaterialButton(
padding: EdgeInsets.fromLTRB(10, 0, 10, 20),
height: hei/20,
child: Container(
width: screen.width,
color: Colors.red,
child: Text(
"love much love",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
),
textAlign: TextAlign.start,
),
),
),
MaterialButton(
padding: EdgeInsets.fromLTRB(10, 0, 10, 20),
height: hei/20,
child: Container(
width: screen.width,
color: Colors.red,
child: Text(
"love much love",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
),
textAlign: TextAlign.start,
),
),
),
MaterialButton(
padding: EdgeInsets.fromLTRB(10, 0, 10, 20),
height: hei/20,
child: Container(
width: screen.width,
color: Colors.red,
child: Text(
"love much love",
style: TextStyle(
fontSize: 15.0,
color: Colors.white,
),
textAlign: TextAlign.start,
),
),
),
],
),
)
),
space(3)
],
),
)
);
};
Widget space (int flex){
return Expanded(flex: flex,
child: Container(
)
);
}