sp_adapter 0.0.2

Screen adaptation. Make UI scale proportionally on different screen sizes.

sp_adapter

A flutter package. Screen adaptation. Make UI scale proportionally on different screen sizes.

First, determine the size of the design draft and adapt it according to the width or height.

Usage

Add dependency

dependencies:
  flutter:
    sdk: flutter
  # add sp_adapter
  sp_adapter: any

Add the following imports to your Dart code

import 'package:sp_adapter/sp_adapter.dart';

LayoutBuilder(builder: (context, constraints) {
  if (constraints.maxWidth != 0) {
    return MaterialApp(
      ...
      builder: (context, child) {
        /// Check the size of the design draft, such as 375
        SPAdapter.initWidth(375, MediaQuery.of(context).size.width);
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(
            textScaler: TextScaler.noScaling, // Do not scale fonts with the system
          ),
          child: child!,
        );
      }
    );
  }
  return Container();
});

Then you can use like this

Container(
  width: 375.sp, // equal to MediaQuery.of(context).size.width
  height: 100.sp,
),
Text('20.sp', style: TextStyle(fontSize: 20.sp)),