listview_with_img_network.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const NotePage(),
    );
  }
}

class NoteModel {
  final String imgSrc;
  final String name;

  NoteModel({this.imgSrc = "", this.name = "Lorem Ipsum dolor sit amet"});
}

List<NoteModel> dummyNote = [
  NoteModel(imgSrc: "https://invalid-source"),
  NoteModel(imgSrc: "https://placehold.co/600x400.png", name: "Lorem 2"),
  NoteModel(imgSrc: "https://placehold.co/600x400.png", name: "Lorem 3"),
  NoteModel(imgSrc: "https://placehold.co/600x400.png", name: "Lorem 4"),
  NoteModel(imgSrc: "https://placehold.co/600x400.png", name: "Lorem 5"),
];

class NotePage extends StatelessWidget {
  const NotePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          SizedBox(
            height: 130,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: dummyNote.length,
              itemBuilder: (context, index) => SizedBox(
                width: 230,
                child: InkWell(
                  onTap: () => Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => NoteDetailPage(
                          data: dummyNote[index],
                          // key: ValueKey('$index , ${dummyNote[index].imgSrc}'),
                        ),
                      )),
                  child: Card(
                    child: Row(
                      children: [
                        Expanded(
                            child: Image.network(dummyNote[index].imgSrc,
                                fit: BoxFit.cover,
                                semanticLabel: dummyNote[index].name,
                                loadingBuilder: (context, child,
                                        loadingProgress) =>
                                    loadingProgress != null
                                        ? const Center(
                                            child: CircularProgressIndicator())
                                        : child,
                                errorBuilder: errorImageBuilder)),
                        const SizedBox(width: 20),
                        Expanded(child: Text(dummyNote[index].name))
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

class NoteDetailPage extends StatelessWidget {
  const NoteDetailPage({super.key, required this.data});
  final NoteModel data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(18.0),
        child: ListView(
          children: [
            Image.network(
              data.imgSrc,
              errorBuilder: errorImageBuilder,
              loadingBuilder: (context, child, loadingProgress) =>
                  loadingProgress != null
                      ? const Center(child: CircularProgressIndicator())
                      : child,
            ),
            const SizedBox(width: 20),
            Text(data.name)
          ],
        ),
      ),
    );
  }
}

Widget errorImageBuilder(context, error, stackTrace) => const Material(
      color: Colors.purple,
      child: Icon(
        Icons.image, // change to church icon
        color: Colors.white,
      ),
    );