Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removed blurhash dependency #30

Merged
merged 3 commits into from
Sep 25, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/build.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ jobs:
working-directory: ${{env.source-directory}}

# Run Flutter Format to ensure formatting is valid
- name: Run Flutter Format
run: flutter format --set-exit-if-changed .
- name: Run Dart Format
run: dart format --set-exit-if-changed .
working-directory: ${{env.source-directory}}

analyze:
Expand Down
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
## [2.0.0] - 2023-09-25
* Remove Blurhash dependency, see [in the readme](https://pub.dev/packages/octo_image#blurhash) how to keep using blurhash.

## [1.0.2] - 2022-05-16
* Update Blurhash dependency

Expand Down
47 changes: 45 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -170,18 +170,61 @@ You can use them with OctoImage.fromSet:
```dart
OctoImage.fromSet(
image: image,
octoSet: OctoSet.blurHash('LEHV6nWB2yk8pyo0adR*.7kCMdnj'),
octoSet: OctoSet.circleAvatar(backgroundColor: Colors.red, text: Text("M")),
),
```

All included OctoSets are:

|**OctoSet**|**Explanation**|
|---|---|
|blurHash|Shows a blurhash as placeholder and error widget. When an error is thrown an icon is shown on top.|
|circleAvatar|Shows a colored circle with text during load and error. Clips the image after successful load.|
|circularIndicatorAndIcon|Shows a circularProgressIndicator with or without progress and an icon on error.|

### Blurhash
You can easily create your own OctoSet though, for example if you want to use blurHash as a placeholder:
```dart
/// Simple set to show [OctoPlaceholder.circularProgressIndicator] as
/// placeholder and [OctoError.icon] as error.
OctoSet blurHash(
String hash, {
BoxFit? fit,
Text? errorMessage,
}) {
return OctoSet(
placeholderBuilder: blurHashPlaceholderBuilder(hash, fit: fit),
errorBuilder: blurHashErrorBuilder(hash, fit: fit),
);
}

OctoPlaceholderBuilder blurHashPlaceholderBuilder(String hash, {BoxFit? fit}) {
return (context) => SizedBox.expand(
child: Image(
image: BlurHashImage(hash),
fit: fit ?? BoxFit.cover,
),
);
}


OctoErrorBuilder blurHashErrorBuilder(
String hash, {
BoxFit? fit,
Text? message,
IconData? icon,
Color? iconColor,
double? iconSize,
}) {
return OctoError.placeholderWithErrorIcon(
blurHashPlaceholderBuilder(hash, fit: fit),
message: message,
icon: icon,
iconColor: iconColor,
iconSize: iconSize,
);
}
```

# Contribute

If you would like to contribute to the plugin (e.g. by improving the documentation, solving a bug or adding a cool new feature), please carefully review our [contribution guide](CONTRIBUTING.md) and send us your [pull request](https://github.com/Baseflow/octo_image/pulls).
Expand Down
12 changes: 7 additions & 5 deletions example/lib/helpers/mock_image_provider.dart
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'dart:async' show Future, StreamController;
import 'dart:typed_data';
import 'dart:async';
import 'dart:ui' as ui show Codec;
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;

import 'package:flutter/foundation.dart';
Expand Down Expand Up @@ -33,7 +33,8 @@ class MockImageProvider extends ImageProvider<MockImageProvider> {
}

@override
ImageStreamCompleter load(MockImageProvider key, DecoderCallback decode) {
ImageStreamCompleter loadImage(
MockImageProvider key, ImageDecoderCallback decode) {
final chunkEvents = StreamController<ImageChunkEvent>();
return MultiFrameImageStreamCompleter(
codec: _loadAsync(key, chunkEvents, decode).first,
Expand All @@ -45,7 +46,7 @@ class MockImageProvider extends ImageProvider<MockImageProvider> {
Stream<ui.Codec> _loadAsync(
MockImageProvider key,
StreamController<ImageChunkEvent> chunkEvents,
DecoderCallback decode,
ImageDecoderCallback decode,
) async* {
try {
if (showLoading) {
Expand All @@ -62,7 +63,8 @@ class MockImageProvider extends ImageProvider<MockImageProvider> {
var url = 'https://blurha.sh/assets/images/img1.jpg';
Uint8List imageBytes;
imageBytes = (await http.get(Uri.parse(url))).bodyBytes;
var decodedImage = await decode(imageBytes);
final buffer = await ImmutableBuffer.fromUint8List(imageBytes);
var decodedImage = await decode(buffer);
yield decodedImage;
} finally {
await chunkEvents.close();
Expand Down
16 changes: 0 additions & 16 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ class OctoImagePage extends StatelessWidget {
children: [
_customImage(),
const SizedBox(height: 16),
_simpleBlur(),
const SizedBox(height: 16),
_circleAvatar(),
],
),
Expand All @@ -57,20 +55,6 @@ class OctoImagePage extends StatelessWidget {
);
}

Widget _simpleBlur() {
return AspectRatio(
aspectRatio: 269 / 173,
child: OctoImage(
image: const NetworkImage('https://blurha.sh/assets/images/img1.jpg'),
placeholderBuilder: OctoPlaceholder.blurHash(
'LEHV6nWB2yk8pyo0adR*.7kCMdnj',
),
errorBuilder: OctoError.icon(color: Colors.red),
fit: BoxFit.cover,
),
);
}

Widget _circleAvatar() {
return SizedBox(
height: 75,
Expand Down
1 change: 0 additions & 1 deletion example/lib/main_sets.dart
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ class MyApp extends StatelessWidget {
theme: ThemeData(),
home: OctoImagePage(
sets: <OctoSet>[
OctoSet.blurHash('LEHV6nWB2yk8pyo0adR*.7kCMdnj'),
OctoSet.circleAvatar(
backgroundColor: Colors.red,
text: const Text(
Expand Down
Loading
Loading