Text widget softWrap not working in nested row-column-row in Flutter

问题

I am trying to wrap the text 'Awesome somthing very long text which should ideally soft warp' in the blow code. Tried using Flexible and Expanded, did not work.

It's getting tough to have softWrap working in nested row column scenarios :(

import 'package:flutter/material.dart';
import 'package:sample/models/Reward.dart';

class RewardDetailsView extends StatelessWidget {
  final Reward _reward;

  RewardDetailsView(this._reward);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: Container(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              Row(

                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Icon(Icons.wallpaper),
                  SizedBox(width: 16.0),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[

                      Text(
                        'Benefits',
                        style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w600,
                          color: Colors.grey[600],
                        ),
                      ),

                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            'Awesome somthing very long text which should ideally soft warp',
                            softWrap: true,
                          ),
                        ],
                      ),

                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            'Awesome somthing very long text which should ideally soft warp',
                            softWrap: true,
                          ),
                        ],
                      ),

                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Below is the output of the code. If I add Flexible around the Text widget, it disappears from the screen.

回答1:

You're using nested rows in your widget tree. In that case by wrapping a widget with Expanded widget won't work, because the framework cant layout width for the parent element if it is either Row or Column widget.

here is a working code sample based on your example.

  class RewardDetailsView extends StatelessWidget {
  final dynamic _reward = 'asdfasdfsd';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
      ),
      body: Container(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Icon(Icons.wallpaper),
                  SizedBox(width: 16.0),
                  Expanded(  // Wrap this column inside an expanded widget so that framework allocates max width for this column inside this row
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Benefits',
                        style: TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w600,
                          color: Colors.grey[600],
                        ),
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Expanded( // Then wrap your text widget with expanded
                              child: Text(
                                'Awesome somthing very long text which should ideally soft warp lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorm ipsum',
                                softWrap: true,
                              )),
                        ],
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(top: 4.0),
                            child: Icon(
                              Icons.arrow_right,
                              size: 10.0,
                            ),
                          ),
                          SizedBox(width: 8.0),
                          Text(
                            'Awesome somthing very long text which should ideally soft warp',
                            softWrap: true,
                          ),
                        ],
                      ),
                    ],
                  )),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

来源：https://stackoverflow.com/questions/60214842/text-widget-softwrap-not-working-in-nested-row-column-row-in-flutter