How to Auto New Line if a text overflows flutter

Question

Hello right now I am making Quran App.. I am fetching data from json file.I would like to ask how do I create a new line if it overflows like in the picture? I tried many things but none seemed to work.. is there a way to create a new line manually with a string variable? Please share your solution.. thanks in advance :)

import 'dart:convert';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts_arabic/fonts.dart';
import 'package:waktusolatimprovised/menu.dart';

class QuranPage extends StatefulWidget {
  final surahDipilih;

  const QuranPage({Key key, this.surahDipilih}) : super(key: key);
  @override
  QuranPageState createState() => QuranPageState();
}

class QuranPageState extends State<QuranPage> {
  List data;

  var text;
  var translate;

  @override
  Widget build(BuildContext context) {
    Future<dynamic> loadJson() async {
      String quranText =
          await DefaultAssetBundle.of(context).loadString("images/quran.json");
      String quranTranslate = await DefaultAssetBundle.of(context)
          .loadString("images/quranterjemahan.json");
      return {text = quranText, translate = quranTranslate};
    }

    return Scaffold(
        appBar: AppBar(
          title: Text("Load local JSON file"),
        ),
        drawer: Durawa(),
        body: Container(
          child: Center(
            // Use future builder and DefaultAssetBundle to load the local JSON file
            child: FutureBuilder(
                future: loadJson(),
                builder: (context, snapshot) {
                  if (text == null && translate == null) {
                    return CircularProgressIndicator();
                  }
                  var quranText = json.decode(text);
                  var quranTranslation = json.decode(translate);
                  // Decode the JSONR

                  double c_width = MediaQuery.of(context).size.width * 0.8;

                  return ListView.builder(
                    // Build the ListView
                    itemBuilder: (BuildContext context, int index) {
                      List text = [
                        quranText['sura'][widget.surahDipilih]['aya'][index]
                            ['_text'],
                        quranTranslation[widget.surahDipilih]['aya'][index]
                            ['@text']
                      ];

                      return Container(
                        child: Row(
                          children: <Widget>[
                            Flexible(
                              child: Column(
                                children: <Widget>[
                                  Container(
                                      child: AutoSizeText(
                                    "${text[0]}",
                                    style: TextStyle(
                                        fontFamily: 'quran', fontSize: 30),
                                    textAlign: TextAlign.end,
                                  )),
                                  Text('Malay Translation'),
                                  Container(
                                    child: Card(
                                        child: Text(
                                      "${text[1]}",
                                      style: TextStyle(
                                          fontSize: 20.0,
                                          fontWeight: FontWeight.w300),
                                      textAlign: TextAlign.right,
                                    )),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                    itemCount: 7,
                  );
                }),
          ),
        ));
  }
}

This is a good answer that explains text wrapping: https://stackoverflow.com/a/54650374/9626566 — Kris, Dec 24 '19 at 22:18
In essence you will want to use a flexible or expanded widget — Kris, Dec 24 '19 at 22:19
But I have already put a flexible widget in my code above.. I have tried swapped it with expanded and still doesnt work.. is it because I put it at the wrong place? — vicevirus, Dec 24 '19 at 22:25
https://raw.githubusercontent.com/vicevirus/malaysiamuslimkitflutter/master/images/quran.json — vicevirus, Dec 24 '19 at 23:42
I have actually found a workaround.. that is to add a container with extra width next to the container of the text..so that the text get pushed to the side.. something like this ```Row( children: [ Container( width: 70.0, ), Flexible( child: Text("Hi"), ) ], ) ``` — vicevirus, Dec 24 '19 at 23:46
nevermind its okay thanks everyone for helping.. it is solved already — vicevirus, Dec 25 '19 at 00:10

score 19 · Answer 1 · answered Dec 25 '19 at 06:36

19

wrap your text with Flexible() widget and add the overflow attribute of the Text() with TextOverflow.visible and you are ready to go.

answered Dec 25 '19 at 06:36

Guru Prasad mohapatra

1,809
13
19

this answer is simple clear and correct thanks – Jay Apr 21 '22 at 07:47

score 8 · Accepted Answer · answered Dec 25 '19 at 00:10

8

I have actually found a workaround.. that is to add a container with extra width next to the container of the text..so that the text get pushed to the side.. something like this Row( children: <Widget>[ Container( width: 70.0, ), Flexible( child: Text("Hi"), ) ], )

answered Dec 25 '19 at 00:10

vicevirus

437
2
4
11

This is what ive been looking for, thanks! please mark it as accepted answer – Ruelos Joel Jan 07 '22 at 09:14

score 7 · Answer 3 · answered Jun 21 '21 at 08:33

This can be done in two ways, you can either use Flexible or Expanded widgets.

Expanded(
  child: Text('Long Text....'),
)

OR

Flexible(
  child: Text('Long Text....'),
)

Both approaches have their own advantages, But a Flexible widget is preferable as it renders the widget as per Text can occupy.

Samer Saied · Answer 4 · 2022-04-18T16:05:58.320

Use RichText because this widget content with TextSpan widgets and you can put them beside themself

RichText(
          text: TextSpan(children: [
            TextSpan(
              style: TextStyle(color: Colors.black),
              text: " بسم الله الرحمن الرحيم",
            ),
            WidgetSpan(
                child: Image(
              image: AssetImage("assets/images/islamic_pattern.png"),
              width: 25,
            )),
            TextSpan(
              style: TextStyle(color: Colors.black),
              text: "الرحمن الرحيم",
            ),
            TextSpan(
              style: TextStyle(color: Colors.black),
              text: "مالك يوم الدين",
            )
          ]),
        ),

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Apr 16 '22 at 01:15

How to Auto New Line if a text overflows flutter

4 Answers4