如何使Flutter应用作出响应？

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

为不同屏幕尺寸制作响应式 UI 的最简单方法是Sizer插件。\n

\n

任何屏幕尺寸的设备（包括平板电脑）中的响应式 UI。检查这个插件 \xe2\xac\x87\xef\xb8\x8f
\n https://pub.dev/packages/sizer

\n

.h  - for widget height\n.w  - for widget width\n.sp - for font size\n

\n

在像这样的值之后使用.h, .w, .sp\xe2\xac\x87\xef\xb8\x8f

\n

例子：

\n

Container(\n  height: 10.0.h,  //10% of screen height\n  width: 80.0.w,   //80% of screen width\n  child: Text(\'Sizer\', style: TextStyle(fontSize: 12.0.sp)),\n);\n

\n

我用这个插件构建了许多响应式用户界面。

\n

Answer 2

我撰写了一篇关于响应式UI波动的详细文章，希望对您有所帮助

• 在Flutter中构建响应式UI

TDLR（摘自）：

1. 在自适应用户界面中，我们不对尺寸和位置使用硬编码的值。使用MediaQuery得到窗口的实时大小。

2. 使用Flexible和Expanded窗口小部件可获得一个灵活的UI，该UI使用百分比而不是硬编码值。

3. 使用LayoutBuilder来获取ConstraintBox父窗口部件的。

4. 您可以使用MediaQuery或 获取设备的方向OrientationBuilder。