如何使此屏幕在 Flutter 中响应？

Question

我对如何使用 flutter 制作响应式布局感到困惑，你们能指出我正确的方向吗？或者我的代码中的什么地方将被包裹在 Expanded 小部件中？

我尝试用 Extended 包装容器，但它一直显示错误，我现在很困惑。老实说，我还是个初学者。非常感谢！

此外，当我搜索时，我发现大多数时候我应该避免使用硬编码尺寸。所以我想了解何时应用 Extended 小部件以使我的屏幕响应。

我的代码如下：

import 'package:flutter/material.dart';

class RegisterPage extends StatefulWidget {
  RegisterPage({Key key}) : super(key: key);

  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Color(0xff0D192A),
        body: Container(
          child: ListView(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(10.0),
                    child: Container(
                      height: 200,
                      width: 200,
                      child: Image(
                        image: AssetImage("assets/images/vlogo.png"),
                      ),
                    ),
                  ),
                  Padding(
                      padding: EdgeInsets.all(40.0),
                      child: Center(
                        child: Text("Register an Account",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 20)),
                      )),
                  Padding(
                    padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text("Email Address",
                                style: TextStyle(
                                    fontSize: 10.0, color: Colors.grey[400])),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height:10.0),
                  Container(
                    margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                      padding: EdgeInsets.all(5.0),
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child: TextField(
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "Enter your email address",
                              hintStyle: TextStyle(color: Colors.grey[400]),
                            ),
                          ),
                        ),
                      )
                      ),
                  SizedBox(height:20.0),
                  Padding(
                    padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text("Choose Password",
                                style: TextStyle(
                                    fontSize: 10.0, color: Colors.grey[400])),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height:10.0),
                  Container(
                    margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                      padding: EdgeInsets.all(5.0),
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child: TextField(
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "Enter your email address",
                              hintStyle: TextStyle(color: Colors.grey[400]),
                            ),
                          ),
                        ),
                      )
                      ),
                     SizedBox(height: 50),
                     Padding(
                       padding:  EdgeInsets.fromLTRB(20, 0, 20, 0),
                       child: InkWell(
                         onTap: () {
                           setState(() {

                           });
                         },
                           child: Container(
                           height: 50,
                           decoration: BoxDecoration(
                             color: Color.fromRGBO(211, 184, 117, 100)
                           ),
                           child: Center(
                             child: Text("Login", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20),
                             ),
                           ),
                         ),
                       ),
                     ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

探索这个插件：这是我在响应式设计中使用过的最有效的插件之一。

https://pub.dev/packages/responsive_screen

或

使用 MediQuery() 获取屏幕高度和宽度，即：-

Example: 

 @override
  Widget build(BuildContext context) {
     dynamic screenHeight = MediaQuery.of(context).size.height;
     dynamic screenwidth = MediaQuery.of(context).size.width;

   //use screenHeight and screenWidth variable for defining the height and 
   //width of the Widgets.

   return Container(
       height:screenHeight * .2,  //It will take the 20%  height of the screen
       width: screenwidth * .5,  //It will take the 50% width of the screen
       //height: screenHeight,   //It will take 100% height

       child: Image(
         image: AssetImage("assets/images/vlogo.png"),
      );



   }

Answer 2

只需使用 MediaQuery 或 LayoutBuilder 概念，您就可以使每个屏幕在颤振中响应。

对于您的应用程序，替换所有自定义尺寸，例如

width : MediaQuery.of(context).size.width * 0.1
height : MediaQuery.of(context).size.height * 0.3

MediaQuery 为您提供屏幕的大小和方向。

甚至您的填充、边距和其他尺寸也应该使用 MediaQuery 计算以使其响应。

在这里，MediaQuery.of(context).size.width 将为您提供当前设备屏幕的宽度，MediaQuery.of(context).size.height 将为您提供当前设备屏幕的高度。

此外，您可以像这样使用 LayoutBuilder 小部件，

LayoutBuilder(
    builder: (context, constraints) {
        if(constraints.maxWidth > 500) {
            getLandscapeLayout();
        } else {
            getPortraitLayout();
        }
    },
)

LayoutBuilder 是一个小部件，它提供其父级的尺寸，因此我们可以知道我们有多少 space 小部件，并可以相应地构建我们的子级。

所以这两个最强大的概念在 Flutter 中可用，可以让你的应用完全响应。

如何使此屏幕在 Flutter 中响应？

How to make this screen responsive in Flutter?

flutter

flutter-dependencies

flutter-layout