如何在Flutter中使小部件在不同的屏幕上灵活

Question

我有6个带有图标和文本的小部件。我把图标和文本放在Stack小部件中，这样我就可以把图标移到文本中。但我遇到了一个问题，如果你看一个狭窄的屏幕，那么文本将适合图标，这是一个问题。如果屏幕很窄，那么文本不适合图标，我该如何使这个小部件变得灵活？

Column(
children: [
Align(
alignment: Alignment.center,
child: Wrap(
alignment: WrapAlignment.center,
spacing: 10,
children: [
_mainWidget(
size,
constants.Assets.main,
'Lorem Ipsum is simply dummy text 3+ h',
textStyleDescription,
leftText: 27,
),
_mainWidget(
size,
constants.Assets.main,
'Lorem Ipsum is simply dummy text  2 h',
textStyleDescription,
leftText: 27,
),
_mainWidget(
size,
constants.Assets.main,
'Lorem Ipsum is simply dummy 1 h',
textStyleDescription,
leftText: 27,
),
],
),
),
const SizedBox(height: 20),
],
),


Widget _mainWidget(
Size size, String assetName, String title, TextStyle titleStyle,
{double topText = 20, double leftText = 22, double widthText = 65}) =>
SizedBox(
width: 100,
height: 100,
child: Stack(
children: [
Positioned(
child: SvgPicture.asset(
assetName,
),
),
Positioned(
left: leftText,
top: topText,
child: SizedBox(
width: widthText,
child: Text(
title,
style: titleStyle,
textAlign: TextAlign.center,
),
),
)
],
),
);

Answer 1

您可以使用screen size设置SizedBox:的width和height

Widget _mainWidget(
Size size, String assetName, String title, TextStyle titleStyle,
{double topText = 20, double leftText = 22, double widthText = 65}){
var size = MediaQueryData.fromWindow(WidgetsBinding.instance.window).size;
return SizedBox(
width: size.width /6,
height: size.width /6,
...
);
}

你可以玩size.width /6来获得适合你的东西。