我有点困惑如何用颤动制作响应式布局，你们能指出我正确的方向吗，或者我的代码将被包裹在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),
),
),
),
),
),
],
),
],
),
),
),
);
}
}
浏览此插件：这是我用于响应式设计的最有效的插件之一。
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"),
);
}
仅通过使用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是一个小部件，提供其父级的尺寸，因此我们可以知道小部件有多少空间，并可以相应地为其子级构建它。
因此，有两个最强大的概念可以使您的应用程序全面响应。