Search code examples
fluttertext

Flutter: Issue with Long Text Not Wrapping to Multiple Lines

I have a Text widget deeply nested inside a widget hierarchy that is supposed to display a text that might get really long. In this case, the text widget should soft-wrap the text and automatically split it across multiple lines.

Here is a minimal working example that can be pasted into https://dartpad.dev/, which illustrates the problem:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.white
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: TestWidget()
        )
      )
    );
  }
}

class TestWidget extends StatelessWidget {
    const TestWidget({super.key});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Test')
            ),
            body: ListView.builder(
                itemCount: 3,
                itemBuilder: (context, index) {
                    return Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                            Container(
                                decoration: const BoxDecoration(
                                    color: Colors.grey
                                ),
                                child: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    children: const [
                                        Text(longText),
                                        Text('shortText')
                                    ]
                                )
                            )
                        ]
                    );
                } 
            )
        );
    }

    static const longText = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, '
      'sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, '
      'sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.';
}

This is the output I'm getting:

Result

I've tried wrapping the text widget into a Flexible widget ...

Flexible(child: Text(longText))

..., but the result is exactly the same.

How can I fix this problem?

Solution

  • The Text widget needs to know how width it is to wrap its text therefore it should be in a ConstrainedBox widget. The working code:

    return Scaffold(body: LayoutBuilder(builder: (context, constraints) {
      return ListView.builder(
          itemCount: 3,
          itemBuilder: (context, index) {
            return Container(
                decoration: const BoxDecoration(color: Colors.grey),
                child: Row(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      ConstrainedBox(
                          constraints: BoxConstraints(
                              maxWidth: constraints.maxWidth / 10 * 9),
                          child: Text(longText)),
                      ConstrainedBox(
                          constraints: BoxConstraints(
                              maxWidth: constraints.maxWidth / 10),
                          child: Text('shortText'))
                    ]));
          });
    }));

    Hope this helps.