Text overflowing in row when Stack is a parent - flutter

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

Answer 2

try wrapping your children in Flexible() widget
Like this:
Flexible(
Text()
),

Answer 3

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

Answer 4

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.

Answer 5

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