Flutter – Showing URL Preview
Last Updated :
09 Jan, 2024
Link previews provide users with a glimpse of the content before they navigate to the actual web page. In this article, we will explore how to build a Link Preview app in Flutter using the any_link_preview package. This package simplifies the process of fetching metadata from URLs, allowing developers to effortlessly display previews for various links within their Flutter applications. Whether you want to preview articles, videos, or any other web content, the any_link_preview package provides the easiest way of integration process. In this article, we are using any_link_preview package in Flutter to preview some web links in the Flutter Application. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Adding the Dependencies
Here we have to add the the following dependencies to our pubspec.yaml file.
dependencies:
any_link_preview: ^3.0.1
Or, Simply you can run the below command in your VS code Terminal.
flutter pub add any_link_preview
Step 3: Import the Package
First of all import material.dart package and the any_link_preview package.
import 'package:any_link_preview/any_link_preview.dart';
import 'package:flutter/material.dart';
Step 4: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
|
Step 5: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
home: Preview_Screen(),
);
}
}
|
Step 6: Create Preview_Screen Class
The Preview_Screen class contains link previews using the AnyLinkPreview package. it contains two link previews widget, Each widget is configured to display the link preview for a specific URL (https://www.geeksforgeeks.org/ and https://pub.dev/packages/any_link_preview). The link previews include visual elements such as the title, description, and an image fetched from the provided URLs. If an error while fetching the preview, error message (“Error Occured!”) is displayed in a container with a grey background. Comments are added for better understandings.
// AnyLinkPreview widget for displaying link preview
AnyLinkPreview(
link: _url1,
displayDirection: UIDirection.uiDirectionHorizontal,
cache: Duration(hours: 1),
backgroundColor: Colors.grey[300],
// Widget to display when there's an error fetching preview
errorWidget: Container(
color: Colors.grey[300],
child: Text('Oops!'),
),
),
SizedBox(
height: 10,
),
// AnyLinkPreview widget for displaying link preview
AnyLinkPreview(
link: _url2,
displayDirection: UIDirection.uiDirectionHorizontal,
cache: Duration(hours: 1),
backgroundColor: Colors.grey[300],
// Widget to display when there's an error fetching preview
errorWidget: Container(
color: Colors.grey[300],
child: Text('Error Occured!'),
),
),
Dart
class Preview_Screen extends StatelessWidget {
const Preview_Screen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Link Preview App')),
body: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnyLinkPreview(
link: _url1,
displayDirection: UIDirection.uiDirectionHorizontal,
cache: Duration(hours: 1),
backgroundColor: Colors.grey[300],
errorWidget: Container(
color: Colors.grey[300],
child: Text('Oops!'),
),
),
SizedBox(
height: 10,
),
AnyLinkPreview(
link: _url2,
displayDirection: UIDirection.uiDirectionHorizontal,
cache: Duration(hours: 1),
backgroundColor: Colors.grey[300],
errorWidget: Container(
color: Colors.grey[300],
child: Text('Error Occured!'),
),
),
],
),
),
);
}
}
|
Here is the full Code of main.dart file
Dart
import 'package:any_link_preview/any_link_preview.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
home: Preview_Screen(),
);
}
}
class Preview_Screen extends StatelessWidget {
const Preview_Screen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Link Preview App')),
body: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnyLinkPreview(
link: _url1,
displayDirection: UIDirection.uiDirectionHorizontal,
cache: Duration(hours: 1),
backgroundColor: Colors.grey[300],
errorWidget: Container(
color: Colors.grey[300],
child: Text('Oops!'),
),
),
SizedBox(
height: 10,
),
AnyLinkPreview(
link: _url2,
displayDirection: UIDirection.uiDirectionHorizontal,
cache: Duration(hours: 1),
backgroundColor: Colors.grey[300],
errorWidget: Container(
color: Colors.grey[300],
child: Text('Error Occured!'),
),
),
],
),
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...