How can i break the line of the long text ? After fetching long text data from cloud firestore

Question

Here I am trying to create a website using flutter which will work on the mobile and laptop & every other device. I am trying to fetch Profile-image and name and user biography. #Biography field in a cloud-firestore contain big paragraph or long text data. The fetching of every data from a firestore is done well and displaying inside a website.

But the problem is with #biography field which is storing a content in the form of big paragraph and that big text paragraph is overflow from the card . How can i arrange the Biography field data so that it look good in the mobile & laptop or any other devices & stop overflowing from a card .

Pic 1 : is in the size of mobile screen.https://photos.app.goo.gl/cBmfixYFiPNCvqi78

pic 2: is in the size of laptop screen.https://photos.app.goo.gl/TNviCekgRRNUFYoLA

Widget buildResultCard(data) {
    return Scaffold(
      body: SingleChildScrollView(
        child:
      Container(
          child: Card(
            color: Colors.white,
            shape: RoundedRectangleBorder(
              side: BorderSide(color: Colors.blue,width: 2),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                children: <Widget>[
                  Container(
                width:100,

                //height: 400,
                    padding: const EdgeInsets.only(top: 2.0, bottom: 5.0),
                    child: Row(children: <Widget>[
                      Image.network(data['image'], height: 120,fit: BoxFit.cover,),
                      Spacer(),
                    ]),
                  ),

                  SizedBox(width: 5),


                  Text('\n${data['fname']},\n\n${data['biography']}'),

                ],
              ),
            ),
          ),
        ),
      ),
    );
  }![enter image description here](https://i.stack.imgur.com/zSuvu.jpg)![enter image description here](https://i.stack.imgur.com/PWTzF.jpg)

Does this answer your question? [Wrap text in container without using a fixed width in Flutter](https://stackoverflow.com/questions/53910087/wrap-text-in-container-without-using-a-fixed-width-in-flutter) — MSpeed, Jun 11 '20 at 12:35

Sagar Acharya · Accepted Answer · 2020-06-11T12:36:19.250

check out this

Scaffold(

      body: SingleChildScrollView(
        child: Container(
          child: Card(
            color: Colors.white,
            shape: RoundedRectangleBorder(
              side: BorderSide(color: Colors.blue, width: 2),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                children: <Widget>[
                  Container(
                    width: 120,

                    //height: 400,
                    padding: const EdgeInsets.only(top: 2.0, bottom: 5.0),
                    child: Row(children: <Widget>[
                      //Image.network(data['image'], height: 120,fit: BoxFit.cover,),
                      Container(width: 120, height: 120),
                      Spacer(),
                    ]),
                  ),
                  SizedBox(width: 5),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'Sampe',
                          style: TextStyle(color: Colors.black),
                        ),
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Text(
                                  'asdfasdfasdfhkbasdjfbsklajdfnaslkdfnkasndfknsdfgsdfgsdgsdfgsdgsdfgasjkdfnk'),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );

And Let me know if it works

I have tried to use this method also but still the text is overflowing from the card. See this approach of Row widget. Row(mainAxisSize:MainAxisSize.min, children:[Text(data['biography')], — , Jun 11 '20 at 12:32
change things according to your need, I have added the random data. — Sagar Acharya, Jun 11 '20 at 12:37
Ignore the random changes that I have made, check the widget below the sizedbox widget which is important and will work for you let me know. — Sagar Acharya, Jun 11 '20 at 12:41
If you think the answer was correct so make an upvote so that it would be helpful for others as well. — Sagar Acharya, Jun 11 '20 at 13:03

How can i break the line of the long text ? After fetching long text data from cloud firestore

1 Answers1