Как сделать приложение флаттера отзывчивым?

Question

Я пытался создать приложение для флаттера (все еще учусь) и смог создать экран входа в систему.Однако я заметил, что приложение не отзывчиво.Когда я тестировал его на эмуляторе, он работал нормально, но когда я установил его на телефон с меньшим дисплеем, я заметил, что виджеты были не маленькими, поэтому телефон не мог показать весь экран сразу.Может ли кто-нибудь помочь мне с адаптацией этого приложения, чтобы оно подходило для экрана любого размера?

Мой полный код приведен ниже;

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  final TextEditingController _usernameController = new TextEditingController();
  final TextEditingController _passwordController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    void printSomething(){
      print("Something was printed");
    }

    Widget buttonSection = new Container(
      padding: new EdgeInsets.all(32.0),
      child: new Row(
        children: [
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                new MaterialButton(
                  child: new Text(
                    "Sign In", 
                    style: new TextStyle(
                      color: Colors.white,
                      fontSize: 20.0
                      ),
                    ),
                  onPressed: (){printSomething();},
                  height: 50.0,
                  minWidth: 400.0,
                  color: Colors.blueAccent,
                ),

                SizedBox(height: 10.0),

                new MaterialButton(
                  child: new Text(
                    "Sign Up",
                    style: new TextStyle(
                      color: Colors.white,
                      fontSize: 20.0
                      ),
                    ),
                  onPressed: null,
                  height: 50.0,
                  minWidth: 400.0,
                  color: Colors.blueAccent,
                )
              ],
            ),
          ),
        ],
      ),
    );

    Widget textFieldSection = new Container(
      padding: new EdgeInsets.all(32.0),
      child: new Row(
        children: [
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                new TextField(
                  autocorrect: false,
                  obscureText: false,
                  controller: _usernameController,
                  maxLines: 1,
                  decoration: new InputDecoration(
                    hintText: "Username",
                    icon: new Icon(Icons.person),
                  ),

                  style: new TextStyle(
                    fontSize: 20.0,
                    color: Colors.black
                  ),
                ),

                new SizedBox(height: 10.0),

                new TextField(
                  autocorrect: false,
                  obscureText: true,
                  controller: _passwordController,
                  maxLines: 1,
                  decoration: new InputDecoration(
                    hintText: "Password",
                    icon: new Icon(Icons.vpn_key),
                  ),

                  style: new TextStyle(
                    fontSize: 20.0,
                    color: Colors.black
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );

    Widget titleSection = new Container(
      padding: new EdgeInsets.all(32.0),
      child: new Row(
        children: [
          new Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                new Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: new Text(
                    "Please login using your credentials",
                    style: new TextStyle(
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );

    return new MaterialApp(
      title: "Service",
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),

      home: new Scaffold(
        body: new ListView(
          reverse: true,
          children: [
            SizedBox(height: 30.0),
            new Image.asset(
              'assets/logo.png',
              height: 200.0,
            ),
            titleSection,
            textFieldSection,
            buttonSection
          ].reversed.toList(),
        ),
      ),
    );
  }
}

Answer 1

Я создал подробную статью об отзывчивом пользовательском интерфейсе во флаттере, и я надеюсь, что это поможет

• Создать отзывчивый пользовательский интерфейс во флаттере

TDLR (из поста):

1. В адаптивном интерфейсе мы не используем жестко запрограммированные значения для размеров и позиций.Используйте MediaQuery, чтобы получить размер окна в реальном времени.

2. Используйте виджеты Flexible и Expanded, чтобы получить гибкий пользовательский интерфейс, который работает с процентами, а не с жестко заданными значениями.

3. Используйте LayoutBuilder, чтобы получить ConstraintBox родительского виджета.

4. Вы можете получить ориентацию устройства, используя MediaQuery или OrientationBuilder.

Answer 2

использовать ориентацию

double width, height;

if (MediaQuery.of(context).orientation == Orientation.landscape){
  width = MediaQuery.of(context).size.width * 0.25; // width = 25% of the screen
  height = MediaQuery.of(context).size.height * 0.25; //height = 25% of the screen 
}
else{
  width = MediaQuery.of(context).size.width * 0.10; // width = 10% of the screen
  height = MediaQuery.of(context).size.height * 0.10; //height = 10% of the screen 
}

child: Padding(
        padding: EdgeInsets.symmetric(horizontal: width),
       )

or

child: Container(
      width: width;
      height: height;
      ), 

Answer 3

Попробуйте следующее:

1. Избегайте жестко закодированных размеров, насколько это возможно.

2. Если вы не можете избежать фиксации ширины или высоты вкакое-то значение, попробуйте рассчитать это значение, используя фактический размер экрана. Пример: MediaQuery.of(context).size.width - someValue

3. Использовать уже имеющиеся свойства вместо фиксирования ширины и высоты.Примеры:

   a. crossAxisAlignment: CrossAxisAlignment.stretch для растягивания кнопки до полного размера экрана вместо minWidth: 400.0

   b. padding:const EdgeInsets.symmetric(vertical: 12.0), для отступа по кнопке вместо height: 50.0.