Flutter break text and expand container if text is longer

Question

I have a Container that also has a Text as a child. The problem is that my text is overflowing on the right. But actually I want it to break and the parent container should expand.

This is how it looks right now:

And my code:

  Widget build(BuildContext context) {
return GestureDetector(
  onTap: onTap,
  child: Padding(
    padding: EdgeInsets.only(
      bottom: 14.scaled,
    ),
    child: Container(
      // height: 70.scaled,
      decoration: BoxDecoration(
        boxShadow: [verySoftDarkShadow],
        color: white,
        borderRadius: BorderRadius.circular(10.scaled),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 20.scaled,
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                shortArticle.label!,
                style: alternativeText,
              ),
              Text(
                shortArticle.manufacturerLabel ?? '',
                style: alternativeText.copyWith(color: darkGray),
              ),
            ],
          ),
          Spacer(),
          SvgIconButton(
            onTap: () {
              print('tapped');
            },
            svgPath: 'images/vertical_menue_dots.svg',
            width: touchTargetSizeForIconButton,
            height: touchTargetSizeForIconButton,
            svgSize: 16.scaled,
          ),
        ],
      ),
    ),
  ),
);


}
}

I tried wrapping the text-widget inside a Expanded but that just makes it overflowing and not displaying anything. What am I missing here? How can I solve this?

Let me know if you need any more info!

Add your Widget inside Expanded or Flex Widget refer my answer [here](https://stackoverflow.com/a/68444861/13997210) — Ravindra S. Patil, Aug 09 '21 at 14:37
@RavindraS.Patil I tried wrapping the text inside an Expanded but that didn't solve it :( — Chris, Aug 09 '21 at 14:40
@RavindraS.Patil that in combination with Kuku's Solution fixed it for me :) Can you explain why SizedBox is working but Spacer() is brining up some weird behaviour? — Chris, Aug 09 '21 at 14:53
Spacer takes a any available space and SizedBox have specific width and height — Ravindra S. Patil, Aug 09 '21 at 14:58
@RavindraS.Patil but I dont specify any `width` for my `SizedBox` . But with the Spacer() the text will break at the half of the width which is not wanted. With the SizedBox (without width) it is working like I would a Spacer expect to work — Chris, Aug 09 '21 at 15:02

KuKu · Accepted Answer · 2021-08-09T14:46:09.493

Just wrap Column widget with Expanded and add a 'overflow' parameter to Text widget.
(Because I don't know pre-defined style and asset, I changed my myself.)

Look refer to below 'buildWidget' function based from your code.<br.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
      child: Column(children: [
        buildWidget(),
        buildWidget(),
      ]),
    );
  }
}

Widget buildWidget() {
  return GestureDetector(
    onTap: () {},
    child: Padding(
      padding: EdgeInsets.only(
        bottom: 14,
      ),
      child: Container(
        // height: 70.scaled,
        // decoration: BoxDecoration(
        //   boxShadow: [verySoftDarkShadow],
        //   color: white,
        //   borderRadius: BorderRadius.circular(10.scaled),
        // ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: 20,
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'shortArticle.label!shortArticle.label!shortArticle.l!shortArticle.label!',
                    // overflow: TextOverflow.ellipsis,
                    style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
                  ),
                  Text(
                    'asdfasdf',
                    style: TextStyle(fontSize: 11),
                  ),
                ],
              ),
            ),
            Icon(
              Icons.favorite,
              color: Colors.pink,
              size: 24.0,
              semanticLabel: 'Text to announce in accessibility modes',
            ),
          ],
        ),
      ),
    ),
  );
}

If that, you just remove 'overflow' parameter from Text widget. — KuKu, Aug 09 '21 at 14:45
working, also changing `Spacer` to `SizedBox` fixed another weird behavior. Now it is as expected. Thanks :) — Chris, Aug 09 '21 at 14:52

score 0 · Answer 2 · answered Aug 09 '21 at 14:05

0

In your Text Widget add:

maxLines: null

answered Aug 09 '21 at 14:05

Anas Nadeem

779
6
10

that gives me an Overflow – Chris Aug 09 '21 at 14:41

Flutter break text and expand container if text is longer

2 Answers2