我正在使用Flutter开发一个UI，目前在模拟器上看起来很好，但我担心如果屏幕大小不同会出现问题。防止这种情况发生的最佳实践是什么，尤其是在使用GridView时。
这是我正在尝试制作的UI（目前只有左侧部分）:
我现在正在使用的代码可以正常工作。每个项都在一个Container中，其中2个是一个Gridview：
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 100),
Container( // Top text
margin: const EdgeInsets.only(left: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Hey,",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25)),
Text("what's up ?", style: TextStyle(fontSize: 25)),
SizedBox(height: 10),
],
),
),
Container( // First gridview
height: MediaQuery.of(context).size.height/2,
child: GridView.count(
crossAxisCount: 3,
scrollDirection: Axis.horizontal,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
padding: const EdgeInsets.all(10),
children: List.generate(9, (index) {
return Center(
child: ButtonTheme(
minWidth: 100.0,
height: 125.0,
child: RaisedButton(
splashColor: Color.fromRGBO(230, 203, 51, 1),
color: (index!=0)?Colors.white:Color.fromRGBO(201, 22, 25, 1),
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/in.png',
fit: BoxFit.cover,
),
Text("Eat In",
style: TextStyle(
fontWeight:
FontWeight.bold))
]),
onPressed: () {
},
shape: RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(
20.0)))));
}))),
Container( // Bottom Text
margin: const EdgeInsets.only(left: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 10),
Text("Popular",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25)),
SizedBox(height: 10),
],
),
),
Container( // Second Gridview
height: MediaQuery.of(context).size.height/5,
child: GridView.count(
crossAxisCount: 2,
scrollDirection: Axis.horizontal,
children: List.generate(9, (index) {
return Center(
child: ButtonTheme(
minWidth: 100.0,
height: 125.0,
child: FlatButton(
color: Colors.white,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/logo.png',
fit: BoxFit.cover,
),
Text("Name")
]),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(
20.0)))));
})))
],
),
),
flex: 3,
)
如何确保代码能够适应更小的屏幕高度，以达到最佳实践？
