async_image 2.1.0 copy "async_image: ^2.1.0" to clipboard
async_image: ^2.1.0 copied to clipboard

A Flutter widget that wraps OctoImage to enable asynchronously loading an `ImageProvider`, while retaining all of OctoImage's powerful features.

example/lib/main.dart

import 'package:any_link_preview/any_link_preview.dart';
import 'package:async_image/async_image.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo Async Image',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const AsyncImageDemo(title: 'Flutter Demo Async Image'),
    );
  }
}

class AsyncImageDemo extends StatefulWidget {
  const AsyncImageDemo({super.key, required this.title});

  final String title;

  @override
  State<AsyncImageDemo> createState() => _AsyncImageDemoState();
}

class _AsyncImageDemoState extends State<AsyncImageDemo> {
  String _link = 'https://pub.flutter-io.cn';

  final TextEditingController _controller = TextEditingController(
    text: 'https://pub.flutter-io.cn',
  );

  Future<ImageProvider> _loadMetadataImageFromUrl(String url) async {
    final metadata = await AnyLinkPreview.getMetadata(link: url);

    final image = metadata?.image;
    if (image == null) {
      throw Exception('Cannot load image from "$url"');
    }

    return Future.delayed(
      const Duration(seconds: 2),
      () => NetworkImage(image),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              foregroundDecoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                borderRadius: BorderRadius.circular(16),
              ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
              ),
              clipBehavior: Clip.hardEdge,
              width: 256,
              height: 256,
              child: AsyncImage(
                image: () => _loadMetadataImageFromUrl(_link),
                placeholderBuilder: OctoPlaceholder.circularProgressIndicator(),
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: TextField(
                controller: _controller,
                decoration: InputDecoration(
                  label: Text('Enter a URL'),
                  hintText: 'https://pub.flutter-io.cn',
                ),
                onEditingComplete:
                    () => setState(() {
                      _link = _controller.value.text;
                    }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
0
likes
160
points
43
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter widget that wraps OctoImage to enable asynchronously loading an `ImageProvider`, while retaining all of OctoImage's powerful features.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, octo_image

More

Packages that depend on async_image