Although simple, Flutter lacks a linkable widget out of the box, so I decided to build my own. No fancy code, but it does its job. That's all I asked.
It uses an InkWell widget to provide both some visual response to the tap event and a trigger to launch the URL (onTap).
It's not intended to open up all kinds of URLs; it basically depends on your device. But you can be certain http:// and https:// URL will be launched (every device ships a webkit). Instead of throwing an error in case the URL can't be opened, you can use the onError callback at the constructor and do whatever you want to do. I really wanted to keep it simple.
For the launching part, I took the url_launcher package available at Dart Pub. A nice, working library I've used in almost every project since I learned about it.
Almost forgot... no idea whether it works on iOS. For the time being, I haven't yet set up the environment ;P. Maybe someday.
url_launcher
You can find the url_launcher Flutter package at Dart Pub, where I plan to submit this very library.
Installing
Include link
in your pubspec.yaml
file:
dependencies:
flutter:
sdk: flutter
link: ^1.0.0
If your IDE doesn't do it automatically, type:
flutter packages get
Using
Import the package in your dart
file and use Link
to get the actual icon widget:
import 'package:link/link.dart';
...
Link _link = Link(
child: Text('A link'),
url: 'http://www.google.com',
onError: _onErrorCallback
);
...
OnError is not required and defaults to null, meaning that, in case URL can't be launched, nothing will happen. No error, no alert, nothing.
Sample
import 'package:flutter/material.dart';
import 'package:link/link.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Link Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _showErrorSnackBar() {
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text('Oops... the URL couldn\'t be opened!'),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Link(
child: Text('This is a link to Flutter'),
url: 'https://flutter.dev',
onError: _showErrorSnackBar,
)
),
);
}
}
If you're interested on the code (feel free to modify it anyway you want), you can find it here: https://github.com/galonsos/link