smooth_image 0.0.1+1

A new Flutter package.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_blurhash/flutter_blurhash.dart';
import 'package:smooth_image/smooth_image.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smooth Image Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SmoothImage')),
      body: _content(currentPage),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (value) => setState(() {
          currentPage = value;
        }),
        currentIndex: currentPage,
        items: [
          const BottomNavigationBarItem(
            icon: Icon(Icons.image),
            title: Text('Basic'),
          ),
          const BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('ListView'),
          ),
          const BottomNavigationBarItem(
            icon: Icon(Icons.grid_on),
            title: Text('GridView'),
          ),
        ],
      ),
    );
  }

  Widget _content(int page) {
    switch (currentPage) {
      case 0:
        return _basicContent();
      case 1:
        return _listViewContent();
      case 2:
        return _gridView();
      default:
        return _basicContent();
    }
  }

  Widget _basicContent() {
    return SingleChildScrollView(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedCrossFade(
                firstChild: Container(
                  width: double.infinity,
                  height: 100,
                  color: Colors.blue,
                ),
                secondChild: Container(
                  width: double.infinity,
                  height: 100,
                  color: Colors.red,
                ),
                crossFadeState: CrossFadeState.showFirst,
                duration: const Duration(seconds: 10)),
            _blurHashImage(),
            _sizedContainer(
              const Image(
                image: SmoothImageProvider(
                  'http://via.placeholder.com/350x150',
                ),
              ),
            ),
            _sizedContainer(
              SmoothImage(
                progressIndicatorBuilder: (context, progress) =>
                    CircularProgressIndicator(
                  value: progress.progress,
                ),
                imageUrl:
                    'https://images.unsplash.com/photo-1532264523420-881a47db012d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9',
              ),
            ),
            _sizedContainer(
              SmoothImage(
                placeHolderBuilder: (context, url) =>
                    const CircularProgressIndicator(),
                imageUrl: 'http://via.placeholder.com/200x150',
              ),
            ),
            _sizedContainer(
              SmoothImage(
                imageUrl: 'http://via.placeholder.com/300x150',
                imageBuilder: (context, child, imageProvider) => Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                      colorFilter: const ColorFilter.mode(
                        Colors.red,
                        BlendMode.colorBurn,
                      ),
                    ),
                  ),
                ),
                placeHolderBuilder: (context, url) =>
                    const CircularProgressIndicator(),
                errorBuilder: (context, url, error) => const Icon(Icons.error),
              ),
            ),
            SmoothImage(
              imageUrl: 'http://via.placeholder.com/300x300',
              placeHolderBuilder: (context, url) => const CircleAvatar(
                backgroundColor: Colors.amber,
                radius: 150,
              ),
              imageBuilder: (context, child, image) => CircleAvatar(
                backgroundImage: image,
                radius: 150,
              ),
            ),
            _sizedContainer(
              SmoothImage(
                imageUrl: 'http://notAvalid.uri',
                placeHolderBuilder: (context, url) =>
                    const CircularProgressIndicator(),
                errorBuilder: (context, url, error) => const Icon(Icons.error),
              ),
            ),
            _sizedContainer(
              SmoothImage(
                imageUrl: 'not a uri at all',
                placeHolderBuilder: (context, url) =>
                    const CircularProgressIndicator(),
                errorBuilder: (context, url, error) => const Icon(Icons.error),
              ),
            ),
            _sizedContainer(
              SmoothImage(
                imageUrl: 'http://via.placeholder.com/350x200',
                placeHolderBuilder: (context, url) =>
                    const CircularProgressIndicator(),
                errorBuilder: (context, url, error) => const Icon(Icons.error),
                fadeDuration: const Duration(seconds: 1),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _blurHashImage() {
    return SizedBox(
      width: double.infinity,
      child: SmoothImage(
        placeHolderBuilder: (context, url) => const AspectRatio(
          aspectRatio: 1.6,
          child: BlurHash(hash: 'LEHV6nWB2yk8pyo0adR*.7kCMdnj'),
        ),
        imageUrl: 'https://blurha.sh/assets/images/img1.jpg',
        fit: BoxFit.cover,
      ),
    );
  }

  Widget _listViewContent() {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index) => Card(
        child: Column(
          children: <Widget>[
            SmoothImage(
              imageUrl: 'https://loremflickr.com/320/240/music?lock=$index',
              placeHolderBuilder: (BuildContext context, String url) =>
                  Container(
                width: 320,
                height: 240,
                color: Colors.purple,
              ),
              fadeDuration: Duration(milliseconds: 2000),
            ),
          ],
        ),
      ),
      itemCount: 250,
    );
  }

  Widget _gridView() {
    return GridView.builder(
      itemCount: 250,
      gridDelegate:
          const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      itemBuilder: (BuildContext context, int index) => SmoothImage(
        imageUrl: 'https://loremflickr.com/100/100/music?lock=$index',
        placeHolderBuilder: _loader,
        errorBuilder: _error,
      ),
    );
  }

  Widget _loader(BuildContext context, String url) {
    return const Center(
      child: CircularProgressIndicator(),
    );
  }

  Widget _error(BuildContext context, String url, dynamic error) {
    print(error);
    return const Center(child: Icon(Icons.error));
  }

  Widget _sizedContainer(Widget child) {
    return SizedBox(
      width: 300.0,
      height: 150.0,
      child: Center(child: child),
    );
  }
}