Flutter - 针对不同屏幕尺寸的响应式用户界面

Question

我正在尝试找出 flutter 的响应方面。因此，正如您从图像中看到的那样，对于不同屏幕尺寸的 iPhone，事情并不是那么顺利。

我正在使用 Stack 和 FractionallySizedBox 但不确定我所做的是否正确。感谢您的帮助。

此处提供代码 -> https://gist.github.com/GY22/1eefb5e48fdca9d785365cbccbdcb478

import 'package:flutter/material.dart';

class SignIn extends StatelessWidget {
    //textfields + logo
    List<Widget> _buildChildrenForm() {
        return [
            //logo
            Text(
                'THE GUEST LIST',
                style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'futura',
                    fontSize: 60.0
                )
            ),
            //email
            TextField(
                cursorColor: Colors.white,
                cursorWidth: 3.0,
                decoration: InputDecoration(
                    enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(
                                    color: Colors.white
                            )
                    ),
                    labelText: 'EMAIL',
                    labelStyle: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                    ),
                    //hintText: 'DEMO@MAIL.COM',
                    hintStyle: TextStyle(
                        fontSize: 20.0,
                        color: Colors.white,
                    ),
                ),
                style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0
                ),
            ),
            SizedBox(height: 20.0,),
            //password
            TextField(
                cursorColor: Colors.white,
                cursorWidth: 3.0,
                obscureText: true,
                decoration: InputDecoration(
                    enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(
                                    color: Colors.white
                            )
                    ),
                    labelText: 'PASSWORD',
                    labelStyle: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                    ),
                    hintStyle: TextStyle(
                            color: Colors.white
                    ),
                ),
                style: TextStyle(
                    color: Colors.white,
                ),
            ),
            SizedBox(height: 65.0,),
            //submit button
            FlatButton(
                child: Text(
                    'SIGN IN',
                    style: TextStyle(
                            fontSize: 35.0,
                            color: Colors.white
                    ),
                ),
                onPressed: () {},
            ),
            SizedBox(height: 10.0),
            //forget password
            FlatButton(
                child: Text(
                    'FORGOT PASSWORD',
                    style: TextStyle(
                            color: Colors.white,
                            fontSize: 17.0
                    ),
                ),
                onPressed: () {},
            )
        ];
    }

    Widget _formSignIn(BuildContext context) {
        return Padding(
            padding: const EdgeInsets.all(30.0),
            child: Column(
                children: _buildChildrenForm(),
            ),
        );
    }

    @override
    Widget build(BuildContext context) {
        final double screenHeight = MediaQuery.of(context).size.height;
        final double halfScreen = screenHeight / 2;
        final double finalHeight = halfScreen / screenHeight;
        debugPrint(MediaQuery.of(context).size.height.toString());
        //debugPrint(MediaQuery.of(context).size.width.toString());

        return Scaffold(
            body: Stack(
                fit: StackFit.expand,
                children: <Widget>[
                    //bg image
                    FractionallySizedBox(
                        alignment: Alignment.topLeft,
                      child: Container(
                        decoration: BoxDecoration(
                                image: DecorationImage(
                                        image: AssetImage('images/backgroundWithOpacity.png'),
                                        fit: BoxFit.cover
                                )
                        ),
                      ),
                    ),
                    //form
                    FractionallySizedBox(
                        alignment: Alignment.center,
                        heightFactor: 1 - finalHeight,
                        child: ListView(
                            children: <Widget>[
                                _formSignIn(context)
                            ],
                        ),
                    )
                ],
            ),




        );
    }
}

Answer 1

使用 FittedBox 以设备宽度压缩标题。

使用 Align 居中，我们只需要 ListView 来显示键盘外观，通常您想要显示给用户的内容对于 iPhone 5s 来说甚至足够小。

你有多余的代码行，我删除了。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    body: SignIn(),
  )));
}

class SignIn extends StatelessWidget {
  List<Widget> _buildChildrenForm() => [
        //logo
        SizedBox(
          width: double.infinity,
          child: FittedBox(
            fit: BoxFit.fitWidth,
            child: Text('THE GUEST LIST',
                style: TextStyle(
                    color: Colors.white, fontFamily: 'futura', fontSize: 60.0)),
          ),
        ),
        //email
        TextField(
          cursorColor: Colors.white,
          cursorWidth: 3.0,
          decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.white)),
            labelText: 'EMAIL',
            labelStyle: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
            ),
            //hintText: 'DEMO@MAIL.COM',
            hintStyle: TextStyle(
              fontSize: 20.0,
              color: Colors.white,
            ),
          ),
          style: TextStyle(color: Colors.white, fontSize: 20.0),
        ),
        //password
        SizedBox(height: 20),
        TextField(
          cursorColor: Colors.white,
          cursorWidth: 3.0,
          obscureText: true,
          decoration: InputDecoration(
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.white)),
            labelText: 'PASSWORD',
            labelStyle: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
            ),
            hintStyle: TextStyle(color: Colors.white),
          ),
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        //submit button
        SizedBox(height: 65),
        FlatButton(
          child: Text(
            'SIGN IN',
            style: TextStyle(fontSize: 35.0, color: Colors.white),
          ),
          onPressed: () {},
        ),
        SizedBox(height: 10),
        //forget password
        FlatButton(
          child: Text(
            'FORGOT PASSWORD',
            style: TextStyle(color: Colors.white, fontSize: 17.0),
          ),
          onPressed: () {},
        )
      ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          //bg image
          FractionallySizedBox(
            alignment: Alignment.topLeft,
            child: Container(
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage('assets/backgroundWithOpacity.png'),
                      fit: BoxFit.cover)),
            ),
          ),
          //form
          Align(
            alignment: Alignment.center,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 32.0),
              child: ListView(
                shrinkWrap: true,
                children: _buildChildrenForm(),
              ),
            ),
          )
        ],
      ),
    );
  }
}