How to make text as big as the width allows in flutter

I believe what you’re looking for is FittedBox.

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 the space it should take up. You shouldn’t specify the text’s size at the same time.

That looks like this:

import 'package:flutter/material.dart';

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

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

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

If you’re wanting to actually ‘stretch’ the text (i.e. make the actual characters wider or taller) you’ll have to do something a bit more custom.

If that’s the case, look at CustomPaint, CustomPainter, TextPainter, and the Canvas translate & scale options. Basically, you would need to create a class extending CustomPainter in which you created a TextPainter, laid it out at a particular size, painted it onto the canvas, and then scaled it to fit the actual size of the CustomPainter (or do you scale the canvas first – I forget…). Then you’d pass an instance of that class to CustomPaint.

Leave a Comment