The Easiest Way to Integrate Twitter Cards into Your Flutter Web App
1. Guide
🌎
This library provides the easiest way to integrate Twitter Cards into your Flutter Web app.
No HTML knowledge is required to set up Twitter Cards with this library. This library safely and flawlessly sets up Twitter Cards in your Flutter web apps without having to write HTML directly.
Show some
1.1. Features
💎
1.2. Getting Started
⚡
1.2.1. Install Library
With Flutter:
flutter pub add twitter_cards
Note
Twitter Cards can be applied to HTML-based web content.
1.2.2. Import
import 'package:twitter_cards/twitter_cards';
1.2.3. Implementation
Implementation using this library is very simple, just call the method corresponding to each Twitter Card.
For example, if you want to set up Summary Card on any page, you can write so as follows.
import 'package:twitter_cards/twitter_cards';
void main() {
setupSummaryCard(
title: 'Small Island Developing States Photo Submission',
site: '@flickr',
description: 'View the album on Flickr.',
imageUrl: 'https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg',
);
}
1.3. Supported Cards
👀
1.3.1. Summary Card
The Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. It is designed to give the reader a preview of the content before clicking through to your website.
1.3.1.1. Method
| Method |
|---|
| setupSummaryCard |
1.3.1.2. Parameters
| Parameter | Required | Description |
|---|---|---|
| title |
|
A concise title for the related content. |
| site |
|
The Twitter @username the card should be attributed to. |
| description |
|
A description that concisely summarizes the content as appropriate for presentation within a Tweet. You should not re-use the title as the description or use this field to describe the general services provided by the website. |
| imageUrl |
|
A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported. |
| imageAlt |
|
A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters. |
1.3.1.3. Example
setupSummaryCard(
title: 'Small Island Developing States Photo Submission',
site: '@flickr',
description: 'View the album on Flickr.',
imageUrl: 'https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg',
);
1.4. Contribution
🏆
If you would like to contribute to twitter_cards, please create an issue or create a Pull Request.
There are many ways to contribute to the OSS. For example, the following subjects can be considered:
- There are request parameters or response fields that are not implemented.
- Documentation is outdated or incomplete.
- Have a better way or idea to achieve the functionality.
- etc...
You can see more details from resources below:
Or you can create a discussion if you like.
Feel free to join this development, diverse opinions make software better!
1.5. Related Contents
📢
We also provide the following libraries related to Twitter!
| Library | Description | Links |
|---|---|---|
| twitter_api_v2 | The easiest way to using Twitter API v2.0 with Dart and Flutter. Strong support for all v2.0 endpoints. | GitHub Pub.dev |
| twitter_oauth2_pkce | This is the easiest way to obtain a Twitter access token using the OAuth 2.0 PKCE method. | GitHub Pub.dev |
1.6. License
🔑
All resources of twitter_cards is provided under the BSD-3 license.
Copyright 2022 Kato Shinya. All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided the conditions.
Note
License notices in the source are strictly validated based on.github/header-checker-lint.yml. Please check header-checker-lint.yml for the permitted standards.
1.7. More Information
🧐
twitter_cards was designed and implemented by Kato Shinya (@myConsciousness).
104 Nov 10, 2022
55 Jul 27, 2023
122 Dec 1, 2022
287 Dec 27, 2022
14 Nov 4, 2022
122 Jul 17, 2022
5 Jul 10, 2022
7 Dec 18, 2022
115 Nov 3, 2022
2 Aug 26, 2022
104 Jan 3, 2023
15 Jul 27, 2022
2 Apr 7, 2022
70 Dec 13, 2022
4 Jun 29, 2022
55 Jan 4, 2023
0 Dec 28, 2021
0 Jan 3, 2022
1 Sep 17, 2022