Интерфейс отличается в разных устройствах в флаттер - PullRequest
0 голосов
/ 20 апреля 2020

Сначала я разработал пользовательский интерфейс с использованием флаттера. Я проверил его в своем телефоне Moto g5s, плюс пользовательский интерфейс выглядит хорошо, и я занимаю весь экран, но когда я открываю то же приложение в iPhone 11 pro max, я получаю огромный пустое пространство, но когда я открываю его в iPhone 8, пользовательский интерфейс выглядит хорошо, как в Moto g5s plus. Я хочу знать, как иметь одинаковый пользовательский интерфейс для разных размеров устройства во флаттере?

class Login extends StatefulWidget
{
  @override
  State<StatefulWidget> createState() {
    return LoginState();
  }

}
class LoginState extends State<Login>
{
  String _email,_password;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();


  @override
  void initState()
  {
    super.initState();
  }

  Widget _progressBar(AuthProvider authProvider)
  {
    //print("progress"+authProvider.progressStatus.toString());

        return Visibility(
          maintainSize: true,
          maintainAnimation: true,
          maintainState: true,
          visible: authProvider.progressStatus,
          child: Container(
              child: Center(
                  child: SizedBox(
                    width: 60,
                    height: 60,
                    child: Stack(
                      children: <Widget>[
                        Container(
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: Colors.white,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey,
                                offset: Offset(0.0, 1.0), //(x,y)
                                blurRadius: 1.0,
                              ),
                            ],
                          ),
                        ),
                        Center(
                          child: CircularProgressIndicator(),
                        )
                      ],
                    ),
                  )
              )
          ),
        );
      }
  Widget _emailTextField(AuthProvider authProvider)
  {
    return TextFormField(
          onChanged: (String value){
              authProvider.checkEmail(value);
          },
          decoration: InputDecoration(
              labelText: "Email id",
              errorText: authProvider.emailStatus ? null : "Enter a valid email",
              border: OutlineInputBorder(
                borderRadius: new BorderRadius.circular(32.0),
              )
          ),
          keyboardType: TextInputType.emailAddress,
          validator: (String value){
            if(value.isEmpty || !RegExp(r"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?").hasMatch(value))
            {
              return "Enter a valid email";
            } else {
              return null;
            }
          },
          onSaved: (String value){
            _email = value;
          },
        );
  }
  Widget _passwordTextField(AuthProvider authProvider)
  {
    //print("pass check "+authProvider.passStatus.toString());
    return TextFormField(
          decoration: InputDecoration(labelText: "Password",
              filled: true,
              errorText: authProvider.passStatus ? null : "Password is too short",
              border: OutlineInputBorder(
                borderRadius: new BorderRadius.circular(32.0),
              ),
              fillColor: Colors.white
          ),
          keyboardType: TextInputType.text,
          obscureText: true,
          onChanged: (String value){
            authProvider.checkPassword(value);
          },
          validator: (String value){
            if(value.isEmpty)
            {
              return "Enter a valid password";
            }
            else if(value.length < 8)
            {
              return "Password is too short";
            }
            else
            {
              return null;
            }
          },
          onSaved: (String value){
            _password = value;
          },
        );
  }
  void _login(AuthProvider authProvider)
  {

    if(!_formKey.currentState.validate())
      {
        return;
      }
    _formKey.currentState.save();

    Map<String,String> map = new Map();
    map['email'] = _email;
    map['password'] = _password;
    authProvider.login(map);
  }
  @override
  Widget build(BuildContext context) {
    final authProvider = Provider.of<AuthProvider>(context);
    if(authProvider.loginStatus != null && authProvider.loginStatus != "success")
    {
      _scaffoldKey.currentState.showSnackBar(SnackBar(
      content: Text('${authProvider.loginStatus}',
      style: TextStyle(color: Colors.black),),
      backgroundColor: Color(0xFFe5e5e5),
      ));
    }
    return Scaffold(
      key: _scaffoldKey,
      body: Stack(
        children: <Widget>[
          SingleChildScrollView(
              child: Container(
                child: Column(
                  children: <Widget>[
                    Container(
                      alignment: Alignment.center,
                      margin: EdgeInsets.fromLTRB(0, 48, 0, 0),
                      child: Text(
                        "Take Orders",
                        style: TextStyle(color: Theme.of(context).primaryColorDark,fontSize: 20),
                      ),
                    ),
                    Container(
                      child: Text(
                        "Track the Best Selling Items",
                        style: TextStyle(color: Theme.of(context).primaryColor,fontSize: 16),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.fromLTRB(16, 0, 16, 0),
                      child: SvgPicture.asset('assets/images/undraw_booking.svg',width: 100.0,height: 280.0,),
                    ),
                    Container(
                      margin: EdgeInsets.fromLTRB(16, 0, 0, 0),
                      child:Row(
                        children: <Widget>[
                          Text(
                              "Login To ",
                              style: TextStyle(color: Colors.black,fontSize: 20)
                          ),
                          Text(
                            "Take orders",
                            style: TextStyle(color: Theme.of(context).primaryColorDark,fontSize: 20),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.fromLTRB(16, 8, 16, 0),
                      child: Form(
                        key: _formKey,
                        child: Column(
                          children: <Widget>[
                            //_emailTextField(_loginBloc),
                            Container(
                              margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
                              child:  _emailTextField(authProvider),
                            ),
                            Container(
                              margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
                              child:  _passwordTextField(authProvider),
                            ),
                            Container(
                              margin: EdgeInsets.fromLTRB(0, 8, 0, 0),
                              child: Align(
                                alignment: Alignment.centerLeft,
                                child: RaisedButton(
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(32.0)
                                  ),
                                  padding: EdgeInsets.fromLTRB(64, 12, 64, 12),
                                  color: Theme.of(context).accentColor,
                                  textColor: Colors.white,
                                  child: Text(
                                    "Login",
                                  ),
                                  onPressed: (){
                                    _login(authProvider);
                                  },
                                ) ,
                              ),
                            ),
                          ],
                        ),
                      ),

                    ),


                  ],
                ),
              )
          ),
          _progressBar(authProvider),
        ],
      ),
    );
  }

}

изображения эмулятора

1 Ответ

0 голосов
/ 21 апреля 2020

не видя код, я не могу посоветовать вам правильное решение, однако, я думаю, что уловки решат ваши многочисленные проблемы.

вместо использования фиксированных значений

попробуйте использовать

 height: MediaQuery.of(context).size.height,
 width: MediaQuery.of(context).size.width,

, вы также можете использовать их как

 height: MediaQuery.of(context).size.height * 0.80, // 80% of screen height 
 width: MediaQuery.of(context).size.width * 0.35, // 35% of screen width

Надежда поможет вам

...