How to get device font size in flutter

user_11776119 0
Viewed 7231

I am facing a problem with the listview when height is bounded, so when I change the phone font size an overflow occurs and I don't want to give extra height to the container.

Container(
       height: fixed height goes here,
       child: ListView(
         scrollDirection: Axis.horizontal,
         children: <Widget>[
           some widgets goes here...
         ],
       ),
     )
flutter
3 Answers

you can try to rely on textScaleFactor, by default it's 1.0 if you change font size on Settings page of your device this value will be changed to 1.15, 1.3 and so on (in 0.15 steps).

so you can multiply container height by this value:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: SafeArea(child: Home()),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double h = MediaQuery.of(context).textScaleFactor;
    return Center(
      child: Text('$h'), // with default settings it shows 1.0
    );
  }
}
Admin1

In case your looking for the device font size (set inside the settings activity of the smartphone), you can use textScaleFactor property of the MediaQuery class.

double textScale = MediaQuery.of(context).textScaleFactor;

Alternatively, you can get the same value like this:

double textScale = MediaQuery.textScaleFactorOf(context);

As a heads up, all of the font sizes in Flutter are automatically scaled by this setting so if a user has their font scaled way up, you might hit some overflow errors. With that said, doing the same thing while you're debugging is an awesome way to find where your layout might overflow.

Check out the accessibility section of the Flutter Docs for some more info.

user_128069610

You need to detect screen height and give your Container() height according to tha, and keep it detecting whenever build() method being re-called.

That's how to get a responsive height for your Container()

MediaQuery() could do that, as follow : 

Container(
       height: MediaQuery.of(context).size.height, // screen's size.height
       child: ListView(
         scrollDirection: Axis.horizontal,
         children: <Widget>[
           some widgets goes here...
         ],
       ),
     )

Flutter says about size property :

The size of the media in logical pixels (e.g, the size of the screen).

user_75608220
Related