Flutter笔记：发布一个模块 scale_design - （移动端）设计师尺寸适配工具

flutter pub add scale_design

import 'package:flutter/material.dart';
import 'package:flutter_scale/flutter_scale.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 用首选的标准屏幕尺寸初始化Scale类
    // 这个标准屏幕尺寸一般由设计师（美工）给
    Scale().init(context, standardWidth, standardHeight);
    return MaterialApp(
      // ...
    );
  }
}

class LayoutConfigs {
  static double standardWidth = 812.0;
  static double standardHeight = 375.0;
}

import 'package:flutter/material.dart';
import 'package:scale_design/scale_design.dart';
import 'app/config.dart'; // 导入你的配置文件
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // 初始化方法
  Future<void> initialization(BuildContext context) async {
    // 初始化屏幕尺寸比例缩放
    Scale().init(
      context,
      LayoutConfigs.standardWidth,
      LayoutConfigs.standardHeight,
    );
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: FutureBuilder(
        future: initialization(context),
        builder: (context, snapshot) {
          return const MyHomePage(
            title: 'Scale Design Demo',
          );
        },
      ),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ...
      ),
    );
  }
}

double scaleFont(double fontSize) {
  return fontSize;
}

double scaleFont(double fontSize) {
  // 获取当前设备的屏幕宽度
  double screenWidth = Scale.screenWidth;
  // 获取设计标准的宽度
  double standardWidth = Scale.standardWidth;
  // 计算字体大小的比例
  double scale = screenWidth / standardWidth;
  // 根据比例调整字体大小
  return fontSize * scale;
}

double scaleFont(double fontSize) {
  return Scale.screenWidth Scale.standardWidth/ ;
}

import 'package:scale_design/scale_design.dart';
// ...
scaleWidth(320.0);
scaleHeight(60.0);

import 'package:scale_design/scale_design.dart';
// ...
perWidth(2);   // 屏幕宽度的1/2
perHeight(2);   // 屏幕宽度的1/2

Text(
  'Hello, World!',
  style: TextStyle(fontSize: scaleFont(18)),
);

import 'package:flutter/material.dart';
import 'package:scale_design/scale_design.dart';
class SubmitButton extends StatelessWidget {
  final String text;
  final Function()? onPressed;
  final double width;
  final double height;
  final double size;
  final Color color;
  const SubmitButton(
    this.text, {
    super.key,
    this.onPressed,
    this.width = 320.0,
    this.height = 49.0,
    this.size = 18.0,
    this.color = const Color.fromARGB(255, 255, 98, 7),
  });
  @override
  Widget build(BuildContext context) {
    return ElevatedBtn(
      text,
      onPressed: onPressed,
      width: width,
      height: height,
      fontSize: size,
      backgroundColor: color,
    );
  }
}
class IconBtn extends StatelessWidget {
  final IconData icon;
  final Function()? onPressed;
  const IconBtn({super.key, required this.icon, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(icon),
      onPressed: onPressed,
      iconSize: scaleFont(24), // 调整图标大小
    );
  }
}

SubmitButton("继续", onPressed: () async {
  if (_formKey.currentState!.validate()) {
    _formKey.currentState!.save();
    await authService.login().then((String? token) {
      if (token != '' && LoginViewController.to.remember) {
        LoginViewController.to.saveLoginInfo(
          authService.email.value,
          authService.password.value,
        );
        goToMallViewPage(index: 0, type: 'offAll');
      } else {
        LoginViewController.to.clearSavedPassword(
          authService.email.value,
        );
      }
    });
  }
}