Question

我有点困惑如何用颤动来制作响应式布局，你们能指出我正确的方向还是我的代码将封装在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 Widget之类的

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

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

因此，有两个最强大的概念可以使您的应用程序充分响应。

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

2 个答案: