Flutter Question posted in
The official Flutter documentation can be found here.

TextOverflow in Flutter not helping avoid overflow, how to constrain text length?

I have been struggling with this for a while and also in the past, I have tried many combinations of adding constraints including variations of Row, Column, Expanded, Flexible, ConstrainedBox, LayoutBuilder etc and nothing seems to fix the basic issue of Text and TextOverflow not actually helping confining to overflow boundaries. It seems that if the framework knows it’s overflowing there must be a way to constrain to that point, but I have not found it. Any suggestions including packages would be welcome otherwise I’m considering making a PR for the framework. Here is a minimal sample that displays my trouble.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:
        Container(
        color: Colors.red,
          width: MediaQuery.of(context).size.width,
          child:Row(children: [
          Row(children: [
            Text("A VERY LONG TEXT  ASDFASDFASDFASDFASDFASDFASDFASDASDFASDFASDFASDFASDFASDFASDFASDF",
            style: TextStyle(overflow: TextOverflow.clip),
            )
          ],),

          Row(children: [
            Container(
              color: Colors.green,
              width: MediaQuery.of(context).size.width * .25,
            ),
            Container(
              color: Colors.blue,
              width: MediaQuery.of(context).size.width * .25,
            )
          ],)

        ]),)
      ),
    );
  }
}
Tags:

2

Answers


  1. 0 
    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
        color: Colors.red,
        width: MediaQuery.of(context).size.width,
        child: Row(children: [
          Expanded(
            child: Text(
              "A VERY LONG TEXT  ASDFASDFASDFASDFASDFASDFASDFASDASDFASDFASDFASDFASDFASDFASDFASDF",
              style: TextStyle(overflow: TextOverflow.clip),
            ),
          ),
          Row(
            children: [
              Container(
                color: Colors.green,
                width: MediaQuery.of(context).size.width * .25,
              ),
              Container(
                color: Colors.blue,
                width: MediaQuery.of(context).size.width * .25,
              )
            ],
          )
        ]),
      )),
    );
  }
}

    This should work

    Login or Signup to reply.
  2. 0

    You are getting exactly what your code supposed to get.
    The error you’re encountering is due to the Row widget not constraining its children properly, causing the text to overflow and exceed the available space. The Row widget contains a single Text widget with a very long text string. Since there’s no constraint set on the Row to limit its width, it tries to expand to fit its child, resulting in the overflow error.

    To fix this issue, you can either wrap the Text widget with a container or a Flexible widget to constrain its width. Here’s an updated version of your code using a Flexible widget:

    class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            Flexible(
              child: Text(
                "A VERY LONG TEXT  ASDFASDFASDFASDFASDFASDFASDFASDASDFASDFASDFASDFASDFASDFASDFASDF",
                style: TextStyle(overflow: TextOverflow.clip),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    More info Understanding constraints

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search