Image Network Loading Flutter Dart - Blokside


Image Network Loading Flutter Dart - Blokside

seperti yang ada pada judul artikel, dalam kasus kali ini, kita akan membahas tentang package cached network image. dengan package ini kita dapat menambahkan gambar lewat online dan memberikan animasi loading sesaat sebelum gambar dimuat dalam aplikasi. berikut langkah langkahnya : 

tambahkan package ke pubspec.yaml

dependencies: 
cached_network_image: ^3.1.0

import package ke main.dart

import 'package:transparent_image/transparent_image.dart';

masukan package yang telah di import

const Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'https://picsum.photos/250?image=9',
              ),
            ),

hasil akhir main.dart

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

void main()=> runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ImgNetwork',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ImgNetwork Loading'),
        ),
        body: Stack(
          children:[
            const Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'https://picsum.photos/250?image=9',
              ),
            ),
          ],
        ),
      ),
    );
  }
}