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

时间:2019-12-17 09:28:43

标签: flutter flutter-layout flutter-dependencies

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

2 个答案:

答案 0 :(得分:2)

浏览此插件:这是我用于响应式设计的最有效的插件之一。

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"),
      );



   }

答案 1 :(得分:1)

只需使用 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是一个小部件,它提供其父级的尺寸,因此我们可以知道该小部件有多少空间,并可以相应地为其子级构建它。

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