Flutter text widget with embedded buttons

Question

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

Answer 1

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

          ),
        ),
      ),
    );
  }
}