CODEWITHSUNDEEP
flutter
Omar Fayad
Omar Fayad

Reputation: 1793

How to get device font size in flutter

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...
         ],
       ),
     )

Upvotes: 6

Views: 14186

Answers (4)

Muhammed Ozdogan
Muhammed Ozdogan

Reputation: 5867

textScaleFactor has been deprecated since v3.12.0-2.0.pre please check this for deprecated property.

We can use scale method from TextScaler

Here is a sample:

  final ts = MediaQuery.textScalerOf(context);
  final res = ts.scale(1.0);
  print("Scale factor: $res");

Upvotes: 1

user10539074
user10539074

Reputation:

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
    );
  }
}

Upvotes: 16

Code on the Rocks
Code on the Rocks

Reputation: 17566

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.

Upvotes: 2

Mohamed Sayed
Mohamed Sayed

Reputation: 851

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).

Upvotes: -1

Related Questions