Flutter Wrap overflowed Text

Question

            title: Text("Campaign Information"),
            children: <Widget>[
              Row(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Text("Long Long Information1"),
                          SizedBox(width: 10),
                          Container(
                            width: 100,
                            child: TextFormField(
                              maxLength: 10,
                              maxLines: 1,
                            ),
                          )
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Text("222"),
                          SizedBox(width: 10),
                          Container(
                            width: 100,
                            child: TextFormField(
                              maxLength: 10,
                              maxLines: 1,
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Text("Long Long Information2"),
                          SizedBox(width: 10),
                          Container(
                            width: 100,
                            child: TextFormField(
                              maxLength: 10,
                              maxLines: 1,
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Text("333"),
                          SizedBox(width: 10),
                          Container(
                            width: 100,
                            child: TextFormField(
                              maxLength: 10,
                              maxLines: 1,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
              SizedBox(width: 50),
            ],
          ),

I'm new from flutter, i trying to create a form with ExpansionTile, and this project will able to disply in desktop mode and mobile mode. I trying to wrap the "information2" below the "information1" I researched through all the documentation about the wrap and i tried everything I can, but the text will unwrap and overflowed from the small screen. Does anyone know how to achieve this? Appreciated!

Answer 1

There are many ways to solve this error.

You can use this approach by using Expanded widget and flex .

title: Text("Campaign Information"),
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Expanded(child: Text("Long Long Information1"),flex: 1,),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 1,
                            child: Container(
                              width: 100,
                              child: TextFormField(
                                maxLength: 10,
                                maxLines: 1,
                              ),
                            ),
                          )
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(child: Text("222"), flex: 1,),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 1 ,
                            child: Container(
                              width: 100,
                              child: TextFormField(
                                maxLength: 10,
                                maxLines: 1,
                              ),
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
                SizedBox(width: 10),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Expanded(child: Text("Long Long Information2"), flex: 1,),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 1,
                            child: Container(
                              width: 100,
                              child: TextFormField(
                                maxLength: 10,
                                maxLines: 1,
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(child: Text("333"), flex: 1,),
                          SizedBox(width: 10),
                          Expanded(
                            flex: 1,
                            child: Container(
                              width: 100,
                              child: TextFormField(
                                maxLength: 10,
                                maxLines: 1,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
            SizedBox(width: 50),
          ],

---

If you want a maximum one line text for your UI, use overflow and maxLine key like this:

Text("Some text", maxLines: 1, overflow: TextOverflow.ellipsis,),

Answer 2

If you want to wrap use the Wrap widget!

Here you go:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BarneAnestesi(),
      ),
    );
  }
}

class BarneAnestesi extends StatefulWidget {
  @override
  _BarneAnestesiState createState() => _BarneAnestesiState();
}

class _BarneAnestesiState extends State<BarneAnestesi> {
  String alder;
  final List<String> items = ['Nyfødt', '2 mnd.', '1 år', '2 år', '4 år', '7 år'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Column(
        children: <Widget>[
          Wrap(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text("Long Long Information1"),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        child: TextFormField(
                          maxLength: 10,
                          maxLines: 1,
                        ),
                      )
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text("222"),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        child: TextFormField(
                          maxLength: 10,
                          maxLines: 1,
                        ),
                      )
                    ],
                  ),
                ],
              ),
              Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text("Long Long Information2"),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        child: TextFormField(
                          maxLength: 10,
                          maxLines: 1,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text("333"),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        child: TextFormField(
                          maxLength: 10,
                          maxLines: 1,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
          SizedBox(width: 50),
        ],
      ),
    );
  }
}

Answer 3

您还可以使用 FittedBox() 包装您的小部件