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,
                  );
                }),
          ),
        ));
  }
}

Answer 1

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"), ) ], )

Answer 2

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

Answer 3

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.

Answer 4

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: "???? ??? ?????",
            )
          ]),
        ),