【发布时间】：2020-03-26 00:25:44
【问题描述】：
我在手机和平板电脑上试用了我的应用程序。如果设计在另一个屏幕上很好，则该设计看起来很糟糕。我分享了一张手机和平板电脑的图片，这样您就可以看到使用不同屏幕尺寸时的设计看起来不同。如何使用 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",
),
],
),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
],
),
),
);
}
}
【问题讨论】：
标签： flutter flutter-layout flutter-container