英文:
Responsive size screen flutter: How to set base_width?
问题
我正在尝试创建一个针对不同屏幕尺寸的 Flutter 应用，但屏幕尺寸溢出。
我从 figma 设计的功能 12 下载了代码，然后做了一些更改，但我不知道如何根据设备获取基本宽度，以便正确计算 f em。非常感谢。
class _ScheduleState extends State<Schedule> {
@override
Widget build(BuildContext context) {
double baseWidth = 380;
double fem = MediaQuery.of(context).size.width / baseWidth;
double ffem = fem * 0.97;
英文:
Image of the app and code
i'm trying to do a responsive for screen size flutter app, but the screen-size overflows.
I downloaded the code from function 12 from a figma design and i've made some changes but i don't know how to get the base width depending on the device so the fem is calculated correctly. Thank you very much.
class _ScheduleState extends State<Schedule> {
@override
Widget build(BuildContext context) {
double baseWidth = 380;
double fem = MediaQuery.of(context).size.width / baseWidth;
double ffem = fem * 0.97;
答案1
得分: 2
以下是代码的翻译部分：
Flutter会自动处理响应式部分
MediaQuery.of(context).size.width;
这将返回屏幕的完整宽度。您将获得所有设备的精确值，无需在此处设置基准宽度。
如果您需要添加自定义宽度，您可以设置基于从MediaQuery.of(context).size.width获取的值的可用宽度的百分比。
MediaQuery.of(context).size.width * 0.80
这将返回可用宽度的80%。
在Flutter中管理文本溢出有几种方法，建议您查看文档。
Text(
'Hello, $_name! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis, // 探索TextOverflow的其他选项
style: const TextStyle(fontWeight: FontWeight.bold),
)
有点偏离上下文，我看到了您附加的图片。建议在创建页面时将容器包装在body和scaffold中，以消除黄色线条。
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
);
}
英文:
Flutter automatically takes care of the responsive part
MediaQuery.of(context).size.width;
This returns full width of the screen. You will get exact value for all devices. No need to set a base width here.
If you need to add your custom width you could set a percentage of the available width based on the value you get from
MediaQuery.of(context).size.width
MediaQuery.of(context).size.width*0.80
This will return 80% of the available width
There are several ways to manage text overflow in Flutter, suggest you to take a look in the Documentation.
Text(
'Hello, $_name! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis, // Explore other options of TextOverflow here
style: const TextStyle(fontWeight: FontWeight.bold),
)
A bit off context, I saw your attached image.
I suggest warp your Container with body and Scaffold when you are creating a page to remove the yellow lines.
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论