Карта перекрывается поднятой кнопкой в ​​флаттере

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

Здесь вы можете найти код вашего решения ниже.

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

Answer 2

@ ibhavikmakwana предложили лучшее решение вашего вопроса. Все остальные ответы зависят от размера фона и не зависят от экрана. Они оба создают невидимый объект над кнопкой (добавляя контейнер или отступ).

У меня был этот вопрос тоже и я не нашел ваш вопрос первым.

Его простое решение заключается в том, чтобы обернуть кнопку в виджете «Позиционирование» и дать ему нижнюю часть 0 или <0. </p>

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

Я обнаружил, что атрибут "bottom", установленный в 0, сместит виджет ровно на 0,5 * высоты виджета.

Answer 3

это всего лишь один из многих способов достижения ожидаемого результата. В этом случае я предполагаю, что вы знаете высоту фона. Опять же, есть много способов достичь того, что вы хотите. В вашем коде нет ничего плохого, вам просто нужно понять, как «вещи» работают во 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: () {},
          ),
        )
      ]
    )
  ],
);