Flutter: How to create Wrap widget - Overflow warning

Question

I am creating a quiz in flutter, and I want to create a Wrap widget, because there are some long questions (Text), which doesn't fit in one row. Where sould i put my Wrap widget? I tried to replace every simple Row widget with the Wrap widget and none of them seems to work. Also there is thelink with the instructions for how to use the Wrap widget that i followed: https://medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16 Thanks.This is my code:

`

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class questionpage extends StatefulWidget {
  @override
  _questionpageState createState() => _questionpageState();
}

class _questionpageState extends State<questionpage> {

  int qnum = 0;
  int score = 0;
  int seconds = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigoAccent[700],
        title: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                child: Text(
                  '$qnum/10        ',
                  style: TextStyle(
                    fontSize: 28,
                  ),
                ),
              ),
              Container(
                child: Text(
                  '$seconds',
                  style: TextStyle(
                    fontSize: 28,
                  ),
                ),
              ),
              Container(
                child: Text(
                  'Score: $score',
                  style: TextStyle(
                    fontSize: 28,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      body: Column(children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.fromLTRB(0, 50, 0, 0),
              child: Text(
                'Question $qnum:',
                style: new TextStyle(
                  color: Colors.black,
                  fontSize: 32.0,
                  fontWeight: FontWeight.bold,
                  decoration: TextDecoration.underline,
                  decorationThickness: 3.0,
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'THIS IS THE LONGGGGGGGGGGG QUESTION',
                    style: new TextStyle(
                        color: Colors.black,
                        fontSize: 28.0,
                        fontWeight: FontWeight.bold
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],),
    );
  }
}


  [1]: https://i.stack.imgur.com/U4Aut.png

Does this answer your question? [Flutter - Wrap text on overflow, like insert ellipsis or fade](https://stackoverflow.com/questions/44579918/flutter-wrap-text-on-overflow-like-insert-ellipsis-or-fade) — Hossein Seifi, Apr 10 '20 at 00:41

score 0 · Answer 1 · answered Apr 10 '20 at 00:42

You have to make the inner Row Wrap and then the outer Row Column or Wrap like this.

Column(// this could be wrap too
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                margin: EdgeInsets.fromLTRB(0, 5, 0, 0),
                child: Wrap(
                  alignment: WrapAlignment.center,
                  children: <Widget>[
                    Text(
                      'THIS IS THE LONGGGGGGGGGGG QUESTION',
                      softWrap: true,
                      style: new TextStyle(
                          color: Colors.black,
                          fontSize: 28.0,
                          fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ),
            ],
          ),

Let me know if you need more than this

Flutter: How to create Wrap widget - Overflow warning

1 Answers1