flutter-移动端适配

不同屏幕之间的尺寸适配 使用插件 flutter_screenutil

flutter_screenutil

flutter 屏幕适配方案,用于调整屏幕和字体大小的flutter插件,让你的UI在不同尺寸的屏幕上都能显示合理的布局!

安装

# add flutter_screenutil

flutter_screenutil: ^5.8.4

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: const Size(365, 812),
        minTextAdapt: true,
        splitScreenMode: true,
        builder: (context, child) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Pipi',
            // You can use the library anywhere in the app even in theme
            theme: ThemeData(
              primarySwatch: Colors.blue,
              textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
              colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
              useMaterial3: true,
            ),
            builder: (context, widget) {
              return MediaQuery(
                ///设置文字大小不随系统设置改变
                data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
                child: widget as Widget,
              );
            },
            home: const MyHomePage(title: 'Pipi'),
          );
        });
  }
dependencies:
  # add flutter_screenutil
  flutter_screenutil: ^5.8.4