Flutter中引入ScreenUtil实现不同终端屏幕适配方案

Flutter中引入ScreenUtil实现不同终端屏幕适配方案

引入依赖

flutter_screenutil: ^5.9.0

自定义适配类

import 'package:flutter_screenutil/flutter_screenutil.dart';

class ScreenAdapter{

  static width(num v){
    return v.w;
  }
  static height(num v){
    return v.h;
  }
  static fontSize(num v){
    return v.sp;
  }
  static getScreenWidth(num v){
    // return ScreenUtil().screenWidth;
    return 1.sw;
  }
  static getScreenHeight(num v){
    // return ScreenUtil().screenHeight;
    return 1.sh;
  }
  static getStatusBarHeight(){
    return ScreenUtil().statusBarHeight;
  }
}

使用

main.dart

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

import 'app/routes/app_pages.dart';

void main() {
  //配置透明状态栏
  SystemUiOverlayStyle systemUiOverlayStyle =
      const SystemUiOverlayStyle(statusBarColor: Colors.transparent);
  SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  // ThemeData(
  //   primaryColor: Colors.white,
  //   colorScheme: const ColorScheme.light(
  //     onPrimary: Colors.white,
  //     surfaceTint: Colors.white,
  //     ),

  // );
  
  runApp(ScreenUtilInit(
      designSize: const Size(1080, 2400), //传入设计稿的宽度和高度
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (_, child) {
        return GetMaterialApp(
          debugShowCheckedModeBanner: false,
          title: "Application",
          theme: ThemeData(
            primaryColor: Colors.grey,
            
            colorScheme: const ColorScheme.light(
              onPrimary: Colors.white,
              surfaceTint: Colors.transparent,
            ),
          ),
          initialRoute: AppPages.INITIAL,
          //配置ios动画
          defaultTransition: Transition.rightToLeft,
          getPages: AppPages.routes,
        );
      }));
}

Container(
            width: ScreenAdapter.width(400),
            height: ScreenAdapter.height(96),
    )