CODEWITHSUNDEEP
flutterdartflutter-layout
Dave
Dave

Reputation: 2028

Text overflowing in row when Stack is a parent

I am trying to create a row widget with two texts widgets inside, however the text keeps overflowing out of screen instead of going right under it. Why is this happening and how can I avoid this?

enter image description here

   @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      resizeToAvoidBottomInset: false,
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 40.0),
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/images/main_cover.jpg"),
                fit: BoxFit.cover)),
        child: Stack(children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(20,0,20,0),
                child: InkWell(
                  onTap: () => _launchURL(),
                    child: Container(
                      child: Row(
                        children: [
                          DefaultText(fontSize: 12.0, color: Colors.white, weight: FontWeight.normal, textData: "By clicking the \"Register\", button confirm that you accept the application"),
                          DefaultText(fontSize: 12.0, color: Colors.blue, weight: FontWeight.normal, textData: "terms of service and privacy policy."),
                        ],
                      ),
                    )),
            
          ),
        ]),
      ),
    ));
  }
}

Upvotes: 0

Views: 615

Answers (5)

Sanjay Kumar
Sanjay Kumar

Reputation: 1195

Use Flexible as below:

Row(
          children: [
            Flexible(
              child:DefaultText(fontSize: 12.0, color: Colors.white, weight: FontWeight.normal, textData: "By clicking the \"Register\", button confirm that you accept the application"),
            ),
            Flexible(
              child:
              DefaultText(fontSize: 12.0, color: Colors.blue, weight: FontWeight.normal, textData: "terms of service and privacy policy."),
            ),

          ],
        )

This will warp your text.

But I suggest you should use RichText.

RichText(
        text: TextSpan(
            text: 'By clicking the \"Register\", button confirm that you accept the application',
            style: TextStyle(
                color: Colors.black, fontSize: 18),
            children: <TextSpan>[
              TextSpan(text: 'Terms and policy',
                  style: TextStyle(
                      color: Colors.blueAccent, fontSize: 18),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // navigate to desired screen
                    }
              )
            ]
        ),
      ),

Update:
You can also use library html https://pub.dev/packages/html

Upvotes: 2

Ankit Saini
Ankit Saini

Reputation: 1

Use Flexible in the Row.

 Example:Row(
                    children: [
                      Flexible(
                        child: DefaultText(
                            fontSize: 12.0,
                            color: Colors.white,
                            weight: FontWeight.normal,
                            textData:
                                "By clicking the \"Register\", button confirm that you accept the application"),
                      ),
                      Flexible(
                        child: DefaultText(
                            fontSize: 12.0,
                            color: Colors.blue,
                            weight: FontWeight.normal,
                            textData: "terms of service and privacy policy."),
                      )
                    ],
                  )

Upvotes: 0

Manishyadav
Manishyadav

Reputation: 1746

You should wrap your Container in a Flexible to let your Row know that it's ok for the Container to be narrower than its intrinsic width. Expanded will also work.

Upvotes: 0

Khushal
Khushal

Reputation: 779

A row aligns it's children horizontally, which means your first DefaultText widget is rendered and the second one on the right of it.

What you can do is wrap both children in Expanded and make the text overflow fading and use Text instead of DefaultText :

Stack(children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(20,0,20,0),
                child: InkWell(
                  onTap: () => _launchURL(),
                    child: Container(
                      child: Row(
                        children: [
                          Expanded(child:Text(style:TextStyle(fontSize: 12.0, color: Colors.white, fontWeight: FontWeight.normal,overflow: TextOverflow.fade),"By clicking the \"Register\", button confirm that you accept the application")),
                          Expanded(child:Text(style:TextStyle(fontSize: 12.0, color: Colors.blue, fontWeight: FontWeight.normal,overflow: TextOverflow.fade) ,"terms of service and privacy policy.")),
                        ],
                      ),
                    )),
            
          ),
        ]),

Upvotes: 0

Ghulam Rasool
Ghulam Rasool

Reputation: 78

try wrapping your children in Flexible() widget

Like this:

Flexible(
   Text()
),

Upvotes: 0

Related Questions