Flutter: Links in long text like Privacy policy and Tems of Service

Question

I'm trying to make privacy policy and terms of service link.

 Widget privacyPolicyLinkAndTermsOfService() {
    return Container(
      child: Center(
        child: Text(
          'By continuing, you agree to our Terms of Service and Privacy Policy.',
          style: TextStyle(
          fontSize: 14.0,
          ),
        ),
      ),
    );

In this way the text doesn't overflow but I cannot make a part of text link. So I tried to use Row and separate the text and the link part as children. However, the text overflows when I use Row and separate text as children. How can I prevent them from overflowing while making a part of text link?

Answer 1

Use RichText class to link parts of text. It's constructor text.rich allows us to style different parts of the text. Below is the working code that only shows links for Terms of Service and Privacy Policy which user can tap on to open respective links and rest of the text is plain text:

Widget privacyPolicyLinkAndTermsOfService() {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.all(10),
      child: Center(
      child: Text.rich(
        TextSpan(
          text: 'By continuing, you agree to our ', style: TextStyle(
          fontSize: 16, color: Colors.black
        ),
          children: <TextSpan>[
            TextSpan(
              text: 'Terms of Service', style: TextStyle(
              fontSize: 16, color: Colors.black,
              decoration: TextDecoration.underline,
            ),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                // code to open / launch terms of service link here
                }
            ),
            TextSpan(
              text: ' and ', style: TextStyle(
              fontSize: 18, color: Colors.black
            ),
              children: <TextSpan>[
                TextSpan(
                  text: 'Privacy Policy', style: TextStyle(
                  fontSize: 18, color: Colors.black,
                  decoration: TextDecoration.underline
                ),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                    // code to open / launch privacy policy link here
                      }
                )
              ]
            )
          ]
        )
      )
      ),
    );
  }

Above code is rendered in UI as:

TapGestureRecognizer() method requires you to import below file:

import 'package:flutter/gestures.dart';

Hope this answers your question.