如何使用screenutils限制flutter中的设备宽度?

问题描述 投票:0回答:1

现在我面临的问题是,我想构建一个宽屏幕的桌面应用程序。 Screenutils 正在获取整个设备的宽度,而不管父小部件的限制,有没有办法限制设备宽度以在桌面上模拟移动设备?

我正在使用著名的包screenutil根据我在figma中的设计尺寸使用响应功能,我还利用了该包中的.sp、.r、.h、.w功能。我在这个包装中提到的设计尺寸是针对移动设备的

我正在按宽高比 9/16 计算宽度(以在屏幕中央显示移动设备)。 这对我来说效果很好,只是 screenutils 包占据了设备的整个宽度,并且没有办法限制宽度,我对使用 1.sw 的组件的响应能力受到干扰。

有人可以帮忙解决这个问题吗?

flutter layout screen responsiveness
1个回答
0
投票

请检查此代码:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // Calculate maximum width available for the app
        double maxWidth = constraints.maxWidth;

        // Use maxWidth to determine the width of your app's components
        return Scaffold(
          appBar: AppBar(
            title: Text('Mobile App'),
          ),
          body: Center(
            child: Container(
              width: maxWidth * 0.8, // Example: 80% of available width
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Welcome to My App',
                    style: TextStyle(fontSize: 20.sp),
                  ),
                  SizedBox(height: 20.h),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('Click Me'),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.