Question 212835 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Screens varies , design and widgets size also varies in other android mobiles

I designed simple Flutter android application, after building Apk I installed that apk in others android mobiles phones for testing, but I am facing issues, Screens size is varies, widgets positions, button inside text , alignments also changed in other phones screens, but My mobile its showing correctly, I tried in 2 Mobiles , 1st mobile screen size is large compare to my phone size. 2nd mobile screen is small compare to my mobile screen, Please suggest and guide how can I fix this issue. I want application all screens looks same in all type of mobile screens.

Thank you so much

Tags:

3

Answers


  1. 0

    You can use flutter_screenutil (A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes )

    Login or Signup to reply.
  2. 0

    You could use relative sizes depending on the max screen size instead of using fixed sizes.

    There are also packages for this like: https://pub.dev/packages/sizer

    Because per default fixed size widgets like for example a Container(width: 100, height: 100) of course take a different percentage of the total available screen space depending on how large the screen is.

    But Flexible Widgets like Expanded inside of a Column already size their children to a fraction of the available space.

    Also some widgets like a Text("Some long text...") might fit on a single line on large devices, but wrap their content into two, or more lines on a smaller device.

    Login or Signup to reply.
  3. 0

    you can install this package and use it in your application it’s very popular and many of developers work with it
    this is the link of the package: https://pub.dev/packages/flutter_screenutil

    1_ install the package in pubspec.yaml in the dependencies

    dependencies:
  flutter:
    sdk: flutter
  # add flutter_screenutil
  flutter_screenutil: ^{latest version}

    2_ import the package in main.dart

    import 'package:flutter_screenutil/flutter_screenutil.dart';

    3_ wraps material app with screen_util and define the size that you want to work with :

    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,
      builder: (context , 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'),
    );
  }

    4_ finally you can use it in any screen in your app to make it reponsive by adding .h to height and .w to width and .sp to fontsize .r to raduis like this :

    Container(
          width: 200.w,
          height: 200.h,
          color: Colors.blue,
          child: Center(
            child: Text(
              'My Container',
              style: TextStyle(fontSize: 24.sp),
            ),
          ),

    now you can make your app responsive and change any screen or widget or text size based on the screen size of device that you using.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search