Flutter Example - Handle Image | FadeIn Image | transparent_image plugin

* About PlugIn

https://pub.dev/packages/transparent_image

transparent_image | Dart Package

 

1. Add this to pubspec.yaml file

dependencies:
  transparent_image: ^1.0.0

 

3. Source Code

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

class LoadFadeInImageFromNetwork extends StatelessWidget {
  String url = "https://picsum.photos/300?${Random().nextInt(100)}";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Load Image From Network")),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            height: 300,
            child: Stack(
              alignment: Alignment(0, 0),
              children: <Widget>[
                Center(
                  child: CircularProgressIndicator(),
                ),
                Center(
                  child: FadeInImage.memoryNetwork(
                    placeholder: kTransparentImage,
                    image: url,
                  ),
                ),
              ],
            ),
          ),
          Text(url),
          Container(
            decoration: BoxDecoration(color: Colors.orangeAccent),
            margin: const EdgeInsets.all(15),
            padding: const EdgeInsets.all(15),
            child: Text(
              "* Loading a network image takes time to download the image data.",
              style: TextStyle(color: Colors.white),
            ),
          )
        ],
      ),
    );
  }
}

 

 

▶ Go to Table of Contents | 강의 목차로 이동

---

※ This example is also available in the Flutter Code Examples app. | 본 예제는 Flutter Code Examples 앱에서도 제공됩니다.

Flutter Code Examples - Google Play 앱