Text overflowing in row when Stack is a parent

Question

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

Answer 1

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