What is correct way for flutter to make mobile apps responsive

Whenever I develop UI, I choose a particular device (some pixel...) and design accordingly but whenever i send it to testing, it comes out that items are mis-aligned, sized box for spacing looks good for this device, but doesn't work with another device, also font sizes also make a difference, small screen and a fixed font size is annoying. also for simple things such as Login page, I sometimes have to use SingleChildScrollView.

Is there something like sp/dp like in xml (android) for flutter.

Is there any way to make app adjust accordingly? I checked documentation but I'm not satisfied with response.

Solution

OK so I had the same issue I managed it by using this flutter_screenutil package.

Set height and width of your Figma UI design in main.dart file like so:

ScreenUtilInit(
  designSize: const Size(360, 690),
  minTextAdapt: true,
  splitScreenMode: true,
  ///your other code...

Here is an example:

void main() => runApp(MyApp());


 class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      // Use builder only if you need to use library outside ScreenUtilInit context
      builder: (_ , child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'First Method',
          // You can use the library anywhere in the app even in theme
          theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
          ),
          home: child,
        );
      },
      child: const HomePage(title: 'First Method'),
    );
  }
}

Happy Coding :)