Card overlapping raised button in flutter

问题:

friends, I am thinking to make this type of view but I can't able to set the button overlapping like the given image I am using stack widget which is containing the text fields and the buttons as given image please check and help me out I also tried to use the center widgets as well but the view is coming as required in it also i had used the positioned widget but its getting button bottom of the screen like this but i need as the above image

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

回答1:

this is just one the many ways you can achieve the expected result. In this case, i assume you know the height of the background. Again, there are many ways to achieve what you want. There is nothing wrong with your code, you just have to get an understanding of how 'things' work in 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: () {},
          ),
        )
      ]
    )
  ],
);

回答2:

Here you can find your solution code below.

    import 'package:flutter/material.dart';

    void main() => runApp(MyApp());

    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.jpeg',
             fit: BoxFit.fitWidth,
           ),
           new Center(

          child: new Container(
            height: 370.0,

            child: Container(

              height:250.0,
              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: Colors.red),
                      ),
                    ),
                  ),
                  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)),
                          ],
                        ),
                      ),
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(left: 120.0)),

                ],

              ),

              ),


            ),
            padding: EdgeInsets.only(bottom: 30),

          ),

        ),
        new Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(top: 310.0)),
            RaisedButton(
              onPressed: () {
                print('Login Pressed');
              },
              color: Colors.green,
              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)),
            ),
          ],
        )
         )
        ],
       );
     },
    )));
   }
  }

回答3:

@ibhavikmakwana propsed a better solution to your question. The other answers all depend on the size of the background and are not screen independent. They both create an invisible object above the button (either by adding a Container or a Padding).

I was having that question too and did not find your question first.

His simple solution is to wrap the button in a Positioned widget and give it a bottom of 0 or < 0.

Positioned(
  child: FlatButton(
        color: Colors.red,
        child: Text("Press Me"),
        onPressed: () {},
      ),
  right: 0,
  left: 0,
  bottom: 0,
)

I found out that the "bottom" attribute set to 0 will offset the widget by exactly 0.5*height of the widget.