html_wrapper

Description:

html wrapper

HTML Wrapper #

The html_wrapper package provides a simple solution for optimizing Search Engine Optimization (SEO) in Flutter applications by converting essential widgets into real HTML tags. By rendering Flutter widgets as true HTML elements, search engines can better understand the content of your app, leading to improved visibility and search rankings.
Features #

Convert Flutter widgets into HTML tags to improve SEO.
Preserve the functionality and styling of Flutter widgets while generating SEO-friendly HTML output.
Customize HTML attributes and tags to align with SEO best practices.

Getting Started #
Installation
Click here: Pub dev
Add the following dependency to your pubspec.yaml file:
dependencies:
html_wrapper: ^0.0.3
copied to clipboard
Then, run flutter pub get to fetch the package.
Usage #

import the html_wrapper package: import 'package:html_wrapper/html_wrapper.dart' as wrapp;

The library is easy to use, the names and behaviors of the widgets remain the same as classic Widget one exclusivity in each widget is the implementation of href key that allow to click on it and redirect in another url using <a>tag.
Text Widget
the novelty of the Text widget compared to the real one is the addition of the tag key allowing to choose in which html tag we want our text to be between h1, span, strong etc...
wrapp.Text(
'Hello Seo!',
tag: wrapp.Tag.h1,
style: TextStyle(
fontFamily: 'arial',
fontSize: MediaQuery.of(context).size.width / 6,
color: Colors.white,
fontWeight: FontWeight.w900),
),
copied to clipboard
Image Widget
all the parameters of an image are processed such as size, fit and urls or images from a folder are correctly display.
wrapp.Image(
height: 200,
width: 200,
borderRadius: BorderRadius.circular(200),
href: 'https://github.com/Antoinegtir',
src: 'https://avatars.githubusercontent.com/u/114834504?v=4',
fit: BoxFit.cover,
),
copied to clipboard
Robot Widget
In this example, we have a simple layout that displays the text "Hello, world!" in the center of the screen. Additionally, we include the Robots widget to set the <meta> tag for search engine crawlers.
The Robots widget is responsible for adding the <meta> tag with the specified content attribute value to the HTML head section. In this case, we set the content to 'noindex, nofollow', indicating that search engines should not index or follow the page.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Hello, world!',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 16),
Robots(content: 'noindex, nofollow'),
],
),
copied to clipboard
The project is only at the beginning, there are still a lot of tags to implement and optimization do not hesitate to read the contributing.md if you want to contribute to the project ❤️