圆形容器上方的其他小部件扑朔迷离

时间:2020-07-15 10:29:20

标签: android-studio flutter dart flutter-layout

我是编程新手,我正尝试在我的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(
          )
      );
    }  

0 个答案:

没有答案