CODEWITHSUNDEEP
androidiosflutterflutter-layout
dalton5
dalton5

Reputation: 935

Flutter: Difference of size between ios and android

I have an issue with my flutter app.

I use 2 physical devices

Android: A20 Iphone: Iphone 11

I setup fontsize but the font size on the iPhone is not fulfilled.

Please find below: the screens from both devices.

How can I fix this difference?

IPhone 11

IPhone 11

Android

Android

Material app

GetMaterialApp(
      title: L.localize('Wetip'),
      debugShowCheckedModeBanner: false,
      navigatorKey: navigatorKey,
      theme: ThemeData(
        primarySwatch:
            PaletteGenerator.generateMaterialColor(MyTheme.PrimaryColor),
        primaryColor: MyTheme.PrimaryColor,
        accentColor: MyTheme.SecondaryColor,
        textTheme: GoogleFonts.ralewayTextTheme(),
        disabledColor: Colors.grey.withOpacity(0.5),
        errorColor: MyTheme.PrimaryColor,
        visualDensity: VisualDensity.adaptivePlatformDensity
      ),
      home: MyApp())

The textformfield

 TextFormField(
      style: TextStyle(
        fontSize: 16,
        color: colorText != null ? colorText : Colors.black,
        decorationColor: Colors.black),

Et mon titleSection

Widget TitleSection(String text, {color = Colors.white, TextStyle?

style}) { return Text( text, textAlign: TextAlign.center, style: style == null ? TextStyle( color: color, fontSize: Theme.of(navigatorKey.currentContext!) .textTheme .headline4! .fontSize) : style, ); }

Upvotes: 1

Views: 3343

Answers (2)

Yasin Shamrat
Yasin Shamrat

Reputation: 21

I prefer Sizer Package for auto scaling of fonts

First you have to wrap materialApp with Responsive Sizer widget

ResponsiveSizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp();
      }
 )

Then you can use font size like below

    Text(
      'Sizer',style: TextStyle(fontSize: 15.sp),
    );

Upvotes: 1

epynic
epynic

Reputation: 1164

This was explained in the GoogleIO presentation you can try their solution.

MaterialApp(
      builder: (context, child) {
        return MediaQuery(
          child: child,
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
        );
      },
)

Setting the MediaQuery.textScaleFactorOf(context) should also help

eg. fontSize: 18 * MediaQuery.textScaleFactorOf(context),

Upvotes: 0

Related Questions