Fidelitas University 🔵 🟡
Costa Rica🇨🇷
Professor: Ariel Ramos
That was a challenge from this proffesor! He challenge us to create different components and i tried to solve this one with code and no code. Here some results:
For the No Code Option, it was pretty simple but have kinda problem, if this is a real URL, it will open on you navigator but if is not, it will appear an objection.
However, the creation path was to create a component, put a container with 100 px in width and height and then I put a column with 2 rows.
On the first row, i put a textfield widget and on the second row i put a button. Here the configuration based on the widget tree:
And then i configurate the button with the actions
Finally, on the Homepage, i put a column and inside de column, i put the component that we create later and thats it!
For the code option, i tried with a package for linkify , here the code:
import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:url_launcher/url_launcher.dart';
class BuscarURL extends StatefulWidget {
const BuscarURL({
Key? key,
this.width,
this.height,
this.text,
this.fontSize,
this.fontFamily,
required this.color,
}) : super(key: key);
final double? width;
final double? height;
final String? text;
final String? fontFamily;
final double? fontSize;
final Color color;
@override
_BuscarURLState createState() => _BuscarURLState();
}
class _BuscarURLState extends State<BuscarURL> {
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
child: SelectableLinkify(
onOpen: (link) async {
if (await canLaunch(link.url)) {
await launch(link.url);
} else {
throw 'Could not launch $link';
}
},
text: widget.text!,
style: TextStyle(
color: widget.color,
fontSize: widget.fontSize,
fontFamily: widget.fontFamily,
),
linkStyle: TextStyle(
fontWeight: FontWeight.bold,
color: widget.color,
fontSize: widget.fontSize,
),
),
);
}
}
Note: This code that i found is from @Tito Belgrave
See his information was very usefull to me, so thank u!
Using this dependecies:
flutter_linkify: ^6.0.0
When i search for some documentation about this, i found the version flutter_linkify: ^5.0.2 and that was a reason that my project doesn't work well
Its important to remember that you need to create the parameters:
The main difference with this one is that we create the visual part with the Dart Code and it looks like this:
As you see, it have the link underlined but, where do i put de link?
Easy peasy, in the Dart code, we create a text widget and it will look like this:
As you see, it have the https:// this indicate that is an URL. If you put a non URL text, it will appear as a normal text.
Here some references that is used:
https://pub.dev/packages/flutter_linkify/versions
https://youtu.be/QCekiwPCTiU?si=R-MYZMtvIQn-w4Vc
https://pub.dev/packages/url_launcher
https://blog.logrocket.com/launching-urls-flutter-url_launcher/
https://docs.flutterflow.io/actions/actions/share/launch-url
https://stackoverflow.com/questions/73273717/detect-url-link-in-string-and-put-them-in-a-container