Flutter: How to create Wrap widget - Overflow warning - flutter

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

Answer 1

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