Showing URLs on Flutter web with TextSpan

Did you know?

You can show native-looking URL links on Flutter web using TextSpan:

  • Create a Text.rich or SelectableText.rich widget
  • Make it look like a web link with a custom text style
  • Add a gesture recognizer to open the web link
  • Customize the mouse cursor style
Showing URLs on Flutter web with TextSpan

As an alternative, wrap the whole thing with a Link widget (from the url_launcher package):

Alternative with Link widget (url_launcher)

Here's a complete URLTextWidget that implements the whole thing, in 40 lines of code:

Happy coding!

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter In Production

Flutter In Production

Learn about flavors, environments, error monitoring, analytics, release management, CI/CD, and finally ship your Flutter apps to the stores. 🚀

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Last updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.