https://github.com/twicpics/components-flutter
A package that brings the power of TwicPics to Flutter applications.
https://github.com/twicpics/components-flutter
Last synced: 6 months ago
JSON representation
A package that brings the power of TwicPics to Flutter applications.
- Host: GitHub
- URL: https://github.com/twicpics/components-flutter
- Owner: TwicPics
- License: mit
- Created: 2023-05-02T06:56:09.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-21T08:37:19.000Z (about 1 year ago)
- Last Synced: 2024-04-18T14:11:45.037Z (about 1 year ago)
- Language: Dart
- Size: 641 KB
- Stars: 7
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Overview
### What is TwicPics?
[TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) is a **Responsive Media Service Solution** (SaaS) that enables **on-demand responsive image & video generation**.
With TwicPics, developers only deal with high-resolution versions of their media while end-users receive **optimized, perfectly sized, device-adapted** versions **delivered from a server close to them**.
TwicPics acts as an **proxy**. It retrieves your master file — from your own web server, cloud storage, or DAM — and generates a **device-adapted** version with **best-in-class compression**, delivered directly to the end-user from the **closest delivery point** available.
### What is TwicPics Flutter Components ?
`TwicImg` and `TwicVideo` are widgets that make it dead easy to unleash the power of [TwicPics](https://www.twicpics.com/) in your `Flutter` projects.
## Features
- Fast Loading
- Images and videos sized to the pixel
- DPR awareness
- Lazy-loading
- Low Quality Image Placeholder
- Cache management
- CLS optimization
- Smart Cropping
- Many others with [TwicPics Transformations](https://www.twicpics.com/docs/reference/transformations)
## Getting started
The only requirement is to have a `TwicPics account`. If you don't already have one, you can easily create your own [TwicPics account for free](https://account.twicpics.com/signup).
However you can still test the widget with our demo domain: see samples in [/example](https://github.com/TwicPics/components-flutter/tree/main/example) folder.
## Usage
1 - Add `twicpics_components` as a dependency in your `pubspec.yaml` file:
```bash
$ flutter pub add twicpics_components
```
2 - Configure your Flutter application:
```dart
// main.dart
import 'package:twicpics_components/twicpics_components.dart';
void main() {
install(
domain: "https://.twic.pics/",
);
runApp(...);
}
```
3 - Display a network image:
```dart
// my_widget.dart
import 'package:twicpics_components/twicpics_components.dart';
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return TwicImg(
src: 'path/to/my/image',
);
}
}
```
4 - Display a network video:
```dart
// my_widget.dart
import 'package:twicpics_components/twicpics_components.dart';
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return TwicVideo(
src: 'path/to/my/video',
);
}
}
```
For more information feel free to consult the project [/example](https://github.com/TwicPics/components-flutter/tree/main/example) folder and / or our [documentation](https://www.twicpics.com/docs/components/flutter).
## Additional information
[TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) provides the most versatile solution on the market for delivering responsive media.
TwicPics Components are also available [in the most popular javascript frameworks](https://www.npmjs.com/package/@twicpics/components).
## Questions and feedback
Fell free to submit an [issue](https://github.com/TwicPics/components-flutter/issues) or to ask us anything by dropping an email at [[email protected]](mailto:[email protected]).