Text overflowing in row when Stack is a parent-CodePudding

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?

   @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."),
                        ],
                      ),
                    )),
            
          ),
        ]),
      ),
    ));
  }
}

CodePudding user response：

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

CodePudding user response：

try wrapping your children in Flexible() widget

Like this:

Flexible(
   Text()
),

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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