[英]How to make any widgets resizeable when in different screen size flutter
I want to make this image/Text resizeable when run on a smaller or bigger phone rights now it's just look like not fitted to the screen.我想让这个图像/文本在更小或更大的手机权利上运行时可以调整大小,现在它看起来就像不适合屏幕。 What widgets should I wrap it with?我应该用什么小部件来包装它?
This is my IphoneS:这是我的 iPhone:
And this is my current simulator (Iphone13):这是我目前的模拟器(Iphone13):
And some of the Code for the CarouselSlider images:还有一些 CarouselSlider 图像的代码:
List image1 = [
'assets/images/f1.png',
'assets/images/f2.png',
'assets/images/f3.png',
'assets/images/f4.png',
];
CarouselSlider(
options: CarouselOptions(
height: 200.0,
autoPlay: true,
reverse: false,
enlargeCenterPage: false,
enableInfiniteScroll: false,
scrollDirection: Axis.horizontal,
autoPlayInterval: const Duration(seconds: 6),
autoPlayAnimationDuration:
const Duration(seconds: 3),
),
items: image1
.map(
(item) => Padding(
padding: const EdgeInsets.only(top: 9.0),
child: Card(
margin: const EdgeInsets.only(
top: 10.0,
bottom: 20.0,
),
elevation: 0.0,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10.0),
),
child: GestureDetector(
child: ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(10.0),
),
child: Image.asset(
item,
fit: BoxFit.fill,
),
),
onTap: () {
image1.indexOf(item);
indexMethod(
image1.indexOf(item).toString());
},
),
),
),
)
.toList(),
),
And some of the Code for the Text: //profile button only还有一些 Text: //profile 按钮的代码
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: CircleAvatar(
radius: 28,
backgroundColor:
const Color(0xff5CE1E6),
child: IconButton(
icon: const Icon(
Icons.person,
size: 35,
color: Colors.black,
),
onPressed: () => Navigator.push(
context,
PageTransition(
type: PageTransitionType
.rightToLeft,
child:
const ProfileScreen())),
),
),
),
const Padding(
padding: EdgeInsets.only(top: 10.0),
child: Text('Profile'),
),
],
),
try this https://pub.dev/packages/flutter_screenutil试试这个https://pub.dev/packages/flutter_screenutil
A flutter plugin for adapting screen and font size.一个 flutter 插件,用于调整屏幕和字体大小。 Let your UI display a reasonable layout on different screen sizes!让您的 UI 在不同的屏幕尺寸上显示合理的布局!
tutorial: https://youtu.be/LWteDQes4Kk教程: https://youtu.be/LWteDQes4Kk
An easy and dependency-free way is to use MediaQuery.of(context).size一种简单且无依赖的方法是使用MediaQuery.of(context).size
Examples:例子:
Use MediaQuery.of(context).size.width
to get a full width of the device.使用MediaQuery.of(context).size.width
获取设备的全宽。
Use MediaQuery.of(context).size.height
to get the total height of the device.使用MediaQuery.of(context).size.height
获取设备的总高度。
Use MediaQuery.of(context).size.height * 0.3
to get 30% of the device height.使用MediaQuery.of(context).size.height * 0.3
获得设备高度的 30%。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.