颤振，如何从设计中编写精确的响应式代码

CCP 发表于 Dev

中共

有没有合适的方法来编写响应式应用程序而无需任何额外的包？我通常使用 MediaQuery，但我觉得它不够合适，因为很难从 figma 测量大小，因为 figma 使用数字所以我必须计算它，但我担心每次计算它都不精确，而且字体大小是用来制作它的反应灵敏？

var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;

尤吉塔·库马尔

通过使用 Sizer 插件，我们可以使 Flutter 应用程序响应。

https://pub.dev/packages/sizer

请参见下面的示例：

添加到pubspec.yaml

依赖项：flutter：sdk：flutter sizer：^2.0.15
在代码中添加导入语句

import 'package:sizer/sizer.dart';
用 ResponsiveSizer 小部件包装 MaterialApp

主要.dart

import 'package:flutter/material.dart';
import 'package:mediaquerydemo/sizer_demo.dart';
import 'package:sizer/sizer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Sizer(
        builder: (context, orientation, deviceType) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: SizerDemo(),
          );
        }
    );
  }
}

您可以在其中显示 UI 的实际代码

SizerDemo.dart

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

class SizerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final deviceInfo = MediaQuery.of(context);
    late var h = deviceInfo.size.height;
    late var w = deviceInfo.size.width;
    return Scaffold(
        appBar: AppBar(
          title: Text("Responsive App"),
        ),
        body: deviceInfo.orientation == Orientation.portrait
            ? SizedBox(
              width:30.w,
              height: 20.h,
              child: Container(
                child: Center(child: Text("HELLO", style: TextStyle(fontSize: 20.sp),)),
                color: Colors.green,
              ),
            )
            : SizedBox(
              width:30.w,
              height: 20.h,
              child: Container(
                child: Center(child: Text("World!", style: TextStyle(fontSize: 20.sp),)),
                color: Colors.red,
              ),
            )
    );
  }
}