CODEWITHSUNDEEP
flutterdart
Jsoon
Jsoon

Reputation: 153

how to make text responsive in flutter

I want the text displayed in my application to adjust the screen size. whether by using the default textTheme will produce responsive text?

Upvotes: 0

Views: 2421

Answers (3)

Jaime Ortiz
Jaime Ortiz

Reputation: 1319

if you want to have "responsive text" you can access the size of the screen with this

Size size = MediaQuery.of(context).size;

and then you have the ability to change the size of the text by doing

Center(
    child: Text(
        style: TextStyle(
            fontWeight: FontWeight.w600,
            fontSize: size.width * 0.005, //play arround with this number to get the size you want
            ),
         ),
      ),

Upvotes: 1

Hemal Moradiya
Hemal Moradiya

Reputation: 2077

You can use flutter_screenutil package, for responsive font you can use like this

 Text(
     '16sp, will not change with the system.',
      style: TextStyle(
        color: Colors.black,
        fontSize: 16.sp, // this will make font responsive
      ),
    ),

Upvotes: 1

Mehran Ullah
Mehran Ullah

Reputation: 792

you can make text responsive with the help of screen width.

And you should try

 fontSize: MediaQuery.of(context).size.width > 500 ?60 : MediaQuery.of(context).size.width < 300 ?40:30,

The above statement means that, when your screen width is greater than 500 then show textsize 60 if less than 300, then show textsize 30 else between 500 and 300 shows textsize 40

Upvotes: 0

Related Questions