I am making a login screen. I want to have the text: "By continuing you agree the xxx Terms & Conditions and Privacy Policy" where -terms and conditions- and -privacy policy- are buttons which when clicked on, navigate to two separate screens.
Is this possible in Flutter. Please take note that due to the length of the final text string, it could wrap onto more than one line depending on the screen size.
Really appreciate any help with this.
Carson
you can do it with RichText
Like this
class DoItWithRichText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: RichText(
text: TextSpan(
text: "By continuing you agree the",
children:[
TextSpan(
text: " Terms and Conditions",
style: TextStyle(
color: Colors.blue
),
recognizer: TapGestureRecognizer()..onTap = () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => TermsAndConditions()))
),
TextSpan(
text: " and "
),
TextSpan(
text: "Privacy Policy",
style: TextStyle(
color: Colors.blue
),
recognizer: TapGestureRecognizer()..onTap = () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => PrivacyAndPolicy()))
)
],
style: TextStyle(
color: Colors.black,
fontSize: 13
)
),
),
),
),
);
}
}
You could use RawMaterialButton to do that:
class LongTextRowWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('By continuing you agree to the xxx '),
InlineTextButton(text: 'Terms and Conditions', function: _jumpToTermsAndConditions),
const Text(' and '),
InlineTextButton(text: 'Privacy Policy', function: _jumpToPrivacyPolicy),
],
);
}
}
class InlineTextButton extends StatelessWidget {
final String text;
final Function function;
InlineTextButton({this.text, this.function});
@override
Widget build(BuildContext context) {
return RawMaterialButton(
constraints: BoxConstraints(),
onPressed: function,
child: Text(
text,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).primaryColor,
),
),
);
}
}