auto_sizer 0.0.4

根据设计图尺寸自动适配各种像素密度的屏幕

example/lib/main.dart

import 'dart:ui';

import 'package:auto_sizer_example/screen_rotation_manager.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:auto_sizer/auto_sizer.dart';

bool isAuto = true;

// Size designSize = const Size(375,667);
Size designSize = const Size(667,375);

void main() {
  if(isAuto){
    runAutoApp(const MyApp(),designSize: designSize,mode: SizerMode.landscape);
  }else{
    runApp(const MyApp());
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  void initState() {
    super.initState();
  }



  @override
  Widget build(BuildContext context) {
    bool isPortrait = MediaQuery.of(context).orientation==Orientation.portrait;
    FlutterView view = PlatformDispatcher.instance.implicitView!;
    Display display = view.display;
    final deviceWidth = display.size.width/display.devicePixelRatio;
    final deviceHeight = display.size.height/display.devicePixelRatio;


    final orientationDesignSize = isPortrait?designSize:Size(designSize.height, designSize.width);
    final width = orientationDesignSize.width/3;
    final height = orientationDesignSize.height/3;

    List<Widget> deviceChildren = [
      _buildDeviceSizeWidget(deviceWidth/3, deviceHeight/3, Colors.red),
      _buildDeviceSizeWidget(deviceWidth/3, deviceHeight/3, Colors.amber),
      _buildDeviceSizeWidget(deviceWidth/3, deviceHeight/3, Colors.blue)
    ];

    List<Widget> designChildren = [
      _buildDesignSizeWidget(width, height, Colors.red),
      _buildDesignSizeWidget(width, height, Colors.amber),
      _buildDesignSizeWidget(width, height, Colors.blue),
    ];

    List<Widget> children = [
      Column(
        children: [
          const SizedBox(height: 38,),
          const Text('设计图尺寸：',style: TextStyle(fontSize: 16),),
          Text('${orientationDesignSize.width}*${orientationDesignSize.height}',style: const TextStyle(fontSize: 16),),
          const SizedBox(height: 10,),
          const Text('屏幕尺寸：',style: TextStyle(fontSize: 16),),
          Text('${deviceWidth.toStringAsFixed(2)}*${deviceHeight.toStringAsFixed(2)}',style: const TextStyle(fontSize: 16),),
          const SizedBox(height: 10,),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('是否竖屏：',style: TextStyle(color: Colors.blue,fontSize: 16)),
              CupertinoSwitch(
                value: isPortrait,
                onChanged: (value){
                  ScreenRotationManager.toggleOrientation(context);
                },
              )
            ],
          ),
          const SizedBox(height: 20,),
        ],
      ),
      Text('按设计图尺寸：\n分辨率:${AutoSizer.instance.devicePixelRatio}',style: const TextStyle(fontSize: 16),),
      isPortrait?Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: designChildren):Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: designChildren,),
      const SizedBox(height: 20,),
      Text('按屏幕尺寸：\n分辨率:${display.devicePixelRatio}',style: const TextStyle(fontSize: 16),),
      isPortrait?Row(children: deviceChildren):Column(children: deviceChildren,)
    ];


    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: true,
        body: SingleChildScrollView(
          scrollDirection: isPortrait?Axis.vertical: Axis.horizontal,
          child: isPortrait?Column(
              children: children):Row(children: children,),
        ),
      ),
    );
  }

  Widget _buildDesignSizeWidget(double designWidth, double designHeight,Color color){
    return  Container(
      width: designWidth,
      height: designHeight,
      color: color,
      alignment: Alignment.center,
      child: Text('w: ${designWidth.toStringAsFixed(2)}\nh: ${designHeight.toStringAsFixed(2)}',style: const TextStyle(color: Colors.white,fontSize: 16),),
    );
  }

  Widget _buildDeviceSizeWidget(double deviceWidth, double deviceHeight,Color color){
    return Container(
      height: deviceHeight,
      width: deviceWidth,
      color: color,
      alignment: Alignment.center,
      child: Text('w: ${deviceWidth.toStringAsFixed(2)}\nh: ${deviceHeight.toStringAsFixed(2)}',style: const TextStyle(color: Colors.white),),
    );
  }
}