我在手机和平板电脑上尝试了我的应用程序。如果设计在另一个屏幕上是好的，那么设计看起来很糟糕。我分享了一张手机和平板电脑的图片，这样你就可以看到在使用不同屏幕尺寸时设计看起来有什么不同。我如何使用Flutter在所有不同屏幕尺寸上设置我的设计？
我的编码：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(Myapp());
}
class Myapp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.red),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"The Bar ",
style: TextStyle(
color: Colors.white,
fontSize: 28.0,
),
),
),
floatingActionButton: FloatingActionButton(
splashColor: Colors.green,
child: Icon(
Icons.mouse,
color: Colors.white,
),
onPressed: () {
print("You was clicked the button!");
},
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
"Kinds of Butoons and Images",
style: TextStyle(fontSize: 26, color: Colors.blue),
textAlign: TextAlign.center,
),
Container(
child: Expanded(
flex: 1,
child:Column(
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Row(
children: <Widget>[
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
CircleAvatar(
backgroundImage: AssetImage("assets/images/test.jpg"),
radius: 140,
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
Container(
child: Expanded(
flex: 1,
child:Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Row(
children: <Widget>[
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
CircleAvatar(
backgroundImage: AssetImage("assets/images/test.jpg"),
radius: 140,
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
Container(
child: Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Column(
children: <Widget>[
Image(
image: AssetImage(
"assets/images/test.jpg"),
),
Text(
"X",
),
],
),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
],
),
),
);
}
}
2条答案
按热度按时间fykwrbwg1#
要限制
CircleAvatar的高度，请使用LayoutBuilder和ConstrainedBox：kse8i1jr2#
可以使用flutter_screenutil包。使用此软件包，您可以轻松管理各种类型的屏幕尺寸设计。它将使应用程序响应。