卡片重叠凸起的按钮在颤振

Question

朋友们，我正在考虑制作这种类型的视图但是我无法设置按钮重叠像给定的图像我正在使用堆栈小部件，其中包含文本字段和按钮作为给定图像请检查并帮助我也尝试使用中心小部件，但视图是按照要求在它也使用定位的小部件，但它的获取按钮底部的屏幕像这个但我需要如上图像

MyLayoutDesign

 class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    MyAppState myAppState() => new MyAppState();
    return myAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: new Scaffold(body: new Builder(
      builder: (BuildContext context) {
        return new Stack(
          children: <Widget>[
            new Image.asset(
              'assets/images/bg.png',
              fit: BoxFit.cover,
            ),
            new Center(
              child: new Container(
                child: new Card(
                  color: Colors.white,
                  elevation: 6.0,
                  margin: EdgeInsets.only(right: 15.0, left: 15.0),
                  child: new Wrap(
                    children: <Widget>[
                      Center(
                        child: new Container(
                          margin: EdgeInsets.only(top: 20.0),
                          child: new Text(
                            'Login',
                            style: TextStyle(
                                fontSize: 25.0, color: secondarycolor),
                          ),
                        ),
                      ),
                      new ListTile(
                        leading: const Icon(Icons.person),
                        title: new TextFormField(
                          decoration: new InputDecoration(
                            hintText: 'Please enter email',
                            labelText: 'Enter Your Email address',
                          ),
                          keyboardType: TextInputType.emailAddress,
                        ),
                      ),
                      new ListTile(
                        leading: const Icon(Icons.lock),
                        title: new TextFormField(
                          decoration: new InputDecoration(
                            hintText: 'Please enter password',
                            labelText: 'Enter Your Password',
                          ),
                          keyboardType: TextInputType.emailAddress,
                          obscureText: true,
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 10.0, bottom: 15.0),
                        child: Center(
                          child: Text(
                            "FORGOT PASSWORD",
                            style: TextStyle(
                                decoration: TextDecoration.underline,
                                color: Colors.black,
                                fontSize: 16.0),
                          ),
                        ),
                      ),
                      Center(
                        child: Container(
                          margin: EdgeInsets.only(bottom: 40.0, top: 10.0),
                          child: Text.rich(
                            TextSpan(
                              children: const <TextSpan>[
                                TextSpan(
                                    text: 'NEW USER ? ',
                                    style: TextStyle(
                                        fontSize: 16.0, color: Colors.black)),
                                TextSpan(
                                    text: 'REGISTER',
                                    style: TextStyle(
                                        fontSize: 16.0,
                                        decoration: TextDecoration.underline,
                                        color: Colors.black)),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            new RaisedButton(
              onPressed: () {
                print('Login Pressed');
              },
              color: primarycolor,
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(30.0)),
              child: new Text('Login',
                  style: new TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                      fontWeight: FontWeight.bold)),
            ),
          ],
        );
      },
    )));
  }
}

Answer 1

这只是您实现预期结果的众多方法之一。在这种情况下，我假设您知道背景的高度。同样，有很多方法可以达到你想要的效果。您的代码没有任何问题，您只需要了解Flutter中“事物”的工作原理

Widget demo = Stack(
  children: <Widget>[
    //First thing in the stack is the background
    //For the backgroud i create a column
    Column(
      children: <Widget>[
        //first element in the column is the white background (the Image.asset in your case)
        DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20.0),
            color: Colors.white
          ),
          child: Container(
            width: 300.0,
            height: 400.0,
          )
        ),
        //second item in the column is a transparent space of 20
        Container(
          height: 20.0
        )
      ],
    ),
    //for the button i create another column
    Column(
      children:<Widget>[
        //first element in column is the transparent offset
        Container(
          height: 380.0
        ),
        Center(
          child: FlatButton(
            color: Colors.red,
            child: Text("Press Me"),
            onPressed: () {},
          ),
        )
      ]
    )
  ],
);