CODEWITHSUNDEEP
flutterflutter-layout
user3808307
user3808307

Reputation: 1471

Make text wrap in Row's available space

I have a variable length text. I am not being able to make the text wrap inside a Row

My code is as follows

Row(
  children: [
    Expanded(
      flex: 1,           
      child: Container(
        height: 20,
        color: Colors.red,
      ),
    ),
    Text(
      $variableLengthText,
      softWrap: true,
    ),
    Expanded(
      flex: 1,
      child: Container(
        height: 20,
        color: Colors.red,
      ),
    ),
  ],
),

I need to have two red bars of flexible width, and the text in the center. When the text is wider than the available space, the bars should not show as the text takes the whole space. This works. When the text is longer than the available space it does not wrap, I need it to wrap.

Thank you.

Upvotes: 0

Views: 891

Answers (3)

Suat Özkaya
Suat Özkaya

Reputation: 774

Alternative solution: Here we should wrap Text with ContrainedBox but we do not know the max width of Row. So maybe we can wrap Row with a LayoutBuilder, so every time before rendering the Row, we can get its max width imposed by parents. Then we can assign this as a state variable. Later on, you can use this as maxWidth of BoxConstraint. Following code works on dartpad, just copy & paste and run, hope it will help you.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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> {
  double maxWidthOfRow = 0;
  //String variableLengthText = 'AAAA';
  String variableLengthText = 'AAAAAAAAAAAAAAAAAAAA';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: ConstrainedBox(
        constraints: BoxConstraints(maxWidth: 200),
        child: LayoutBuilder(
          builder: (context, constraints) {
            maxWidthOfRow = constraints.maxWidth;
            print(constraints.maxWidth);
            return Row(
              children: [
                Flexible(
                  //flex: 1,
                  child: Container(
                    //width:0,
                    height: 20,
                    color: Colors.red,
                  ),
                ),
                ConstrainedBox(
                    constraints: BoxConstraints(maxWidth: maxWidthOfRow),
                    child: Text(variableLengthText)),
                Flexible(
                  //flex: 1,
                  child: Container(
                    //width:0,
                    height: 20,
                    color: Colors.red,
                  ),
                )
              ],
            );
          },
        ),
      )),
    );
  }
}

Upvotes: 1

Jim
Jim

Reputation: 7601

This may not be the best approach, but please try:

  Size _textSize(String text, TextStyle style) {
    final TextPainter textPainter = TextPainter(
        text: TextSpan(text: text, style: style), maxLines: 1, textDirection: TextDirection.ltr)
      ..layout(minWidth: 0, maxWidth: double.infinity);
    return textPainter.size;
  }
  
  String variableLengthText = 'blablablablablablablablablablablablablablablablablablablablabblablablablablablablablablablablablablablablablablablablablab';
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        body: Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        height: 20,
        color: Colors.red,
      ),
    ),
    _textSize(variableLengthText, TextStyle(
      fontSize: 12,
      color: Colors.white,
    ),).width > MediaQuery.of(context).size.width ? Expanded(flex: 1000, child:
    Text(
      '$variableLengthText',
      softWrap: true,
    ),) : Text(
      '$variableLengthText',
      softWrap: true,
    ),
    Expanded(
      flex: 1,
      child: Container(
        height: 20,
        color: Colors.red,
      ),
    ),
  ],
),

Upvotes: 0

Sajad Rezvani
Sajad Rezvani

Reputation: 404

What happens in your case is that the text does not have any particular constraint as it is in a row, so it overflows. What needs to be done is simple, determine the constraint for the text. Like this:

 Row(
      children: [
        Expanded(
          flex: 1,
          child: Container(
            height: 20,
            color: Colors.red,
          ),
        ),
        Container(
          constraints: BoxConstraints(maxWidth: constrainedWidth), // <---- This here controls text and makes it wrap to fit into the constrained space
          child: Text(
            strings.simCardPageGuide,
            style: TextStyle(color: Colors.white),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            height: 20,
            color: Colors.red,
          ),
        ),
      ],
    )

Upvotes: 0

Related Questions