How to make text responsive in Flutter?

Question

I'm struggling to make my text responsive in my application I'm re-writing from Kotlin to Flutter.

The point is that I have a text widget, which needs to be responsive. When I open it on a phone with 16:9 screen ratio, it's quite ok, but when I open my application on a phone with 18:9 screen ratio, the text doesn't fill the remaining space.

In Kotlin I had Contraint layout with guidelines which made the job very easy, but i don't know how to do it in Flutter.

I'm using AutoTextSize package, but it doesn't work which I intend it to work.

In my Kotlin app, it looks like this

In Flutter on my Samsung Note 9 with screen ratio 18:9 looks like this:

My code:

import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.dart';
import '../../helpers/makdolan.dart';

class GeneratedCouponScreen extends StatelessWidget {

  final String couponImage;

  GeneratedCouponScreen({Key key, @required this.couponImage}) : super(key: key);


  @override
  Widget build(BuildContext context) {

    var _makdolan = Makdolan();
    var now = _makdolan.calculateDate();

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('DATA WYDANIA:', style: TextStyle(color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold)),
                      Text(now, style: TextStyle(color: Colors.black, fontSize: 16.0))
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold)),
                      Text(_makdolan.calculateUniqueCode(), style: TextStyle(color: Colors.black, fontSize: 16.0))
                    ],
                  )
                ],
              ),
              SizedBox(height: 8.0),
              Image.asset(couponImage),
              SizedBox(height: 8.0),
              AutoSizeText.rich(
                TextSpan(
                  text: 'Kupon ten upoważnia do jednokrotnego odbioru produktu gratis przy kolejnym dowolnym zakupie z oferty klasycznej. Kupon ten ważny jest przez 7 dni od czasu jego wygenerowania i może być zrealizowany w dowolnej restauracji McDonald\'s w Polsce z wyłączeniem restauracji znajdyujących się na terenie Portu Lotniczego im. Fryderyka Chopina w Warszawie oraz Portu Lotniczego im. Lecha Wałęsy w Gdańsku. Szczegółowy regulamin ankiety „Opinia Gości" znajduje się na stronie ',
                  style: TextStyle(color: Colors.black),
                  children: [
                    TextSpan(
                      text: 'www.mcdonalds.pl ',
                      style: TextStyle(color: Color(0xffffc300), decoration: TextDecoration.underline)
                    ),
                    TextSpan(
                      text: 'w sekcji ',
                      style: TextStyle(color: Colors.black)
                    ),
                    TextSpan(
                      text: 'Regulaminy',
                      style: TextStyle(color: Color(0xffffc300), decoration: TextDecoration.underline)
                    )
                  ]
                ),
                maxLines: 12,
              ),
              Spacer(),
              Card(
                child: Container(
                  height: 95.0,
                  color: Color(0xffffc300),
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('DRUKUJ /', style: TextStyle(fontSize: 28.0)),
                        Text('ZAPISZ JAKO PDF', style: TextStyle(fontSize: 28.0),)
                      ],
                    ),
                  )
                ),
              ),
              Card(
                child: Container(
                  height: 95.0,
                  color: Color(0xffffc300),
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('PRZEŚLIJ KUPON', style: TextStyle(fontSize: 28.0)),
                        Text('(WYSYŁKA W CIĄGU 24 GODZIN)', style: TextStyle(fontSize: 17.0),)
                      ],
                    ),
                  )
                ),
              )
            ],
          ),
        ),
      )
    );
  }
}

Answer 1

Best easiest way to to make responsive Text for different screen size is Sizer plugin.

Check it this plugin ⬇️
https://pub.dev/packages/sizer

.sp - for font size

If you want to set responsive text size in any screen size device also tablet then use .sp after value.

Example:

Text('Sizer', style: TextStyle(fontSize: 12.0.sp))   //use SomeValue.sp in fonsize for responsive text

Also you can use this plugin for responsive widget

.h  - for widget height
.w  - for widget width

Example:

Container(
  height: 10.0.h,  //10% height of screen
  width: 80.0.w,   //80% width of screen
  child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);

Answer 2

hi you some one else mention it in the above answer that you can use the screenutil package for text resizing which is kind of good . but I would also like to recommend to try FittedBox widgets in flutter it is also helpul some time you need fitted box with screen util in some situation screen util does not help a lot. although it is a good package for make your design responsive . or you can also try to use different text size size for different screen size .

Answer 3

The is a Flutter package called auto_size_text 2.1.0 which may well address your problem. https://pub.dev/packages/auto_size_text/versions/2.1.0#-readme-tab-

Answer 4

You might try screenutil package. The approach is basically getting a ratio based on screen width/height/dpi. So you can adjust any UI element (like fontsize) accordingly. So the idea is more or less to match the size of fonts on ur original tested device (where you have the design) and adapt it to other resolutions.

The idea is basic equation:

DesignScreenWidth -> 24pt(current font size) Note9ScreenWidth -> x (adjusted font size for note9)

x = Note9ScreenWidth * 24 / DesignScreenWidth

So, that's how you get any ratio to adjust content based on width, height, screen PPI, or whatever. You basically treat the values as proportions and multiply by that normalization factor

currentFactor=currentValue/designedValue.

Hope it clarifies a little the concept for “multiresolution awareness”