【Flutter/Dart】CachedNetworkImageの使い方

Contents 非表示

実装

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.2.3 // 追加

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cached Network Image Demo',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final List<String> imageUrls = [
    'https://pbs.twimg.com/media/D284owfU0AEl9HI.jpg',
    'https://pbs.twimg.com/media/D284owfU0AEl9HI.jpg',
    'https://pbs.twimg.com/media/D284owfU0AEl9HI.jpg',
    // Add more image URLs here
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cached Network Image Demo'),
      ),
      body: ListView.builder(
        itemCount: imageUrls.length,
        itemBuilder: (context, index) {
          final imageUrl = imageUrls[index];
          return ListTile(
            title: CachedNetworkImage(
              imageUrl: imageUrl,
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          );
        },
      ),
    );
  }
}