[Flutter Favorite] cached_network_image 구현코드

먼저 저의 플러터 버전 정보입니다. 

Flutter: 3.1.0

Dart: 2.18.0

 

pubspec.yaml 파일에 해당 버전을 추가합니다. 

  cached_network_image: ^3.2.1

 

예시 코드입니다. 

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

void main() {
  runApp(MaterialApp(home: const MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return HomePage();
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Widget _loader(BuildContext context, String url) {
    return const Center(
      child: CircularProgressIndicator(),
    );
  }

  Widget _waiting(context, url, downloadProgress) {
    return CircularProgressIndicator(value: downloadProgress.progress);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Cached Network Image'),
      ),
      body: ListView.separated(
          padding: EdgeInsets.all(10),
          separatorBuilder: (context, index) => const SizedBox(
                height: 10,
              ),
          itemCount: 20,
          itemBuilder: (context, index) => ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: CachedNetworkImage(
                  key: UniqueKey(),
                  imageUrl: 'https://loremflickr.com/320/240/music?lock=$index',
                  height: 300,
                  width: double.infinity,
                  fit: BoxFit.cover,
                  // placeholder: _loader,
                  progressIndicatorBuilder: _waiting,
                  // maxWidthDiskCache: 200,
                  errorWidget: _error,
                ),
              )),
    );
  }
}

 

구현화면입니다.🙂

flutter_cached_network.gif