Блог

Итак, я изучаю Flutter. Пока что создание кроссплатформенных приложений кажется увлекательным. У меня есть одна проблема, которая продолжает появляться. Как я могу сделать свое приложение действительно «отзывчивым»? Я пытался использовать MediaQuery везде, где это возможно, как предложено в документах flutter. Может кто-нибудь, пожалуйста, взглянуть на мой код, чтобы указать на недостатки, вызывающие эту проблему?

Это базовый код страницы входа в систему:

 import 'package:flutter/material.dart';

class MyLoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return (Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Text("Welcome"),
      ),
      body: Container(
        child: ListView(
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 3.5,
              decoration: BoxDecoration(
                  color: Colors.blue[100],
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(90),
                  ),
                  image: DecorationImage(
                    alignment: Alignment.center,
                    scale: 1.5,
                    image: AssetImage('assets/logo.png'),
                  )),
            ),
            Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 2,
                margin: EdgeInsets.all(MediaQuery.of(context).size.width / 20),
                decoration: BoxDecoration(
                  color: Colors.blue[0],
                ),
                child: Column(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.center,
                      child: Text(
                        'Please Login',
                        style: TextStyle(color: Colors.blue, fontSize: 24),
                      ),
                    ),
                    Padding(
                        padding: EdgeInsets.all(
                            MediaQuery.of(context).size.height / 100)),
                    Container(
                      child: TextField(
                        decoration: new InputDecoration(
                            border: new OutlineInputBorder(
                              borderRadius: const BorderRadius.all(
                                const Radius.circular(90.0),
                              ),
                            ),
                            filled: true,
                            hintStyle: new TextStyle(color: Colors.grey[800]),
                            hintText: "Username",
                            fillColor: Colors.white70),
                      ),
                    ),
                    Padding(
                        padding: EdgeInsets.all(
                            MediaQuery.of(context).size.height / 200)),
                    Container(
                      child: TextField(
                        decoration: new InputDecoration(
                            border: new OutlineInputBorder(
                              borderRadius: const BorderRadius.all(
                                const Radius.circular(90.0),
                              ),
                            ),
                            filled: true,
                            hintStyle: new TextStyle(color: Colors.grey[800]),
                            hintText: "Password",
                            fillColor: Colors.white70),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Padding(
                        padding: EdgeInsets.only(
                            top: MediaQuery.of(context).size.width / 50,
                            right: MediaQuery.of(context).size.width / 50),
                        child: Text(
                          'Forgot Password ?',
                          style: TextStyle(color: Colors.grey[600]),
                        ),
                      ),
                    ),
                    Padding(
                        padding: EdgeInsets.all(
                            MediaQuery.of(context).size.height / 12)),
                    ButtonTheme(
                      minWidth: MediaQuery.of(context).size.width / 2.5,
                      height: MediaQuery.of(context).size.width / 6,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(40)),
                        onPressed: () {},
                        child: Text(
                          'Login',
                          style: TextStyle(color: Colors.white, fontSize: 18),
                        ),
                      ),
                    ),
                  ],
                ))
          ],
        ),
      ),
    ));
  }
}
 

Как вы можете видеть, он работает на iPhone без этой проблемы в портретном режиме (проблема возникает в альбомном режиме), но возникают проблемы на Android (даже в портретном режиме).

Ссылка на изображение

Любая помощь будет действительно оценена. Спасибо!

Проблема в том, что у вас есть текст «Пожалуйста, войдите», текстовые поля и кнопка в том же Container , height что и переполненный. Если вы удалите свойство height этого контейнера, ваша проблема должна быть решена.