卡重叠凸起的按钮在颤动

Question

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

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

这只是实现预期结果的众多方法之一。在这种情况下，我假设您知道背景的高度。同样，有很多方法可以实现您想要的。您的代码没有任何问题，您只需要了解 'things' 在 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: () {},
          ),
        )
      ]
    )
  ],
);

Answer 2

您可以在下面找到您的解决方案代码。

    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 3

@ibhavikmakwana 为您的问题提出了更好的解决方案。其他答案都取决于背景的大小，并且与屏幕无关。他们都在按钮上方创建了一个不可见的对象（通过添加容器或填充）。

我有并没有先找到你的问题。

他的简单解决方案是将按钮包裹在一个 Positioned 小部件中，并将其底部设置为 0 或 < 0。

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

我发现 "bottom" 属性设置为 0 会使小部件偏移 0.5*小部件的高度。

卡重叠凸起的按钮在颤动

Card overlapping raised button in flutter

dart

flutter

flutter-layout