How to Make Text as Big as the Width Allows In Flutter?

Text Widget allows you to display text in your flutter application. So in this article, we will go through how to Make Text as Big as the Width Allows In Flutter.

How to Make Text as Big as the Width Allows In Flutter??

You can use FittedBox Widget BoxFit applies whichever ‘fit’ you want to stretch/scale the child to fit in the box. It doesn’t perform a pure ‘stretch’ on the text but rather space it should take up. You shouldn’t specify the text’s size at the same time.

So the Code Snippet will look like the below:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              color: Colors.blue,
              width: 300.0,
              height: 200.0,
              child: FittedBox(
                fit: BoxFit.contain,
                child: Text("Whee"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Wrap the text within a FittedBox Widget, to force the text to be enclosed by a box. The FittedBox’s size will depend on its parent’s widget. Within the FittedBox, the Text widget, can simply ‘cover’ the box, so the text doesn’t stretch to fill the available space within the FittedBox.

The enum BoxFit.fill, is a way to stretch the text to fit the entire space available within the FittedBox. You can change the dimensions of the box by altering the height and width of the FittedBox’s parent, the Container. Code Snippet will look like the below:

Container(
  height: _height,
  width: _width,
  FittedBox(               
    fit: BoxFit.fill,
    child: Text("Whee"),
  )
)

Use TextPainter.width and a for loop to find the largest fitting font size like a below:

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
      home: MyHomePage(),
      theme: ThemeData(platform: TargetPlatform.iOS),
    ));

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text autoscale'),
      ),
      body: Padding(
        padding: EdgeInsets.all(32.0),
        child: Center(
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              final text = 'Hello World';
              final style = TextStyle(fontWeight: FontWeight.bold); // apply your barcode font here
              final fontSize = calculateAutoscaleFontSize(text, style, 30.0, constraints.maxWidth);
              return Text(
                text,
                style: style.copyWith(fontSize: fontSize),
                maxLines: 1,
              );
            },
          ),
        ),
      ),
    );
  }
}

double calculateAutoscaleFontSize(String text, TextStyle style, double startFontSize, double maxWidth) {
  final textPainter = TextPainter(textDirection: TextDirection.ltr);

  var currentFontSize = startFontSize;

  for (var i = 0; i < 100; i++) {
    // limit max iterations to 100
    final nextFontSize = currentFontSize + 1;
    final nextTextStyle = style.copyWith(fontSize: nextFontSize);
    textPainter.text = TextSpan(text: text, style: nextTextStyle);
    textPainter.layout();
    if (textPainter.width >= maxWidth) {
      break;
    } else {
      currentFontSize = nextFontSize;
      // continue iteration
    }
  }

  return currentFontSize;
}

FittedBox would only work if it is provided some constraints, so make sure to provide one, like provide height as shown below:

SizedBox(
  height: 400, // 1st set height
  child: FittedBox(child: Text("*")), // 2nd wrap in FittedBox
)

The code sample in the question has a Text Widget as one of the children: of a Column widget. The width of the Text parent is unknown.

So to maximize the width and size of the Text widget in this case, wrap the Text widget in a FittedBox, then an Expanded.

child: Column(children: <Widget>[
  Expanded(
    child: FittedBox(
        fit: BoxFit.contain,
        child: Text(
          '123',
        )),
  ),
]),

The Text size should also automatically resize correctly, even when the device is rotated, or the screen resized, without overflow issues.

Expanded Widget:

/// A widget that expands a child of a [Row], [Column], or [Flex]
/// so that the child fills the available space.
///
/// Using an [Expanded] widget makes a child of a [Row], [Column], or [Flex]
/// expand to fill the available space along the main axis (e.g., horizontally for
/// a [Row] or vertically for a [Column]). If multiple children are expanded,
/// the available space is divided among them according to the [flex] factor

from /flutter/packages/flutter/lib/src/widgets/basic.dart

FittedBox:

/// Creates a widget that scales and positions its child within itself according to [fit].

So we will get output like a below:

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So in this article, we have been through How to Make Text as Big as the Width Allows In Flutter.

Still, Need a Support for Flutter Development? We would love to assist you !!!

Keep Learning !!! Keep Fluttering !!! Stay Tuned !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.