반복된 요소를 새로운 위젯으로 만들기

readme.md

반복된 요소를 새로운 위젯으로 만들기

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';
// 참조 : https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.3

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimalListPage(),
    );
  }
}

class AnimalListPage extends StatelessWidget {
  final List<Map<String, String>> animals = [
    {'name': 'Dog', 'imageUrl': 'https://cataas.com/cat?width=100'},
    {'name': 'Cat', 'imageUrl': 'https://cataas.com/cat?width=100'},
    {'name': 'Elephant', 'imageUrl': 'https://cataas.com/cat?width=100'},
    // ... add more animals if needed
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animal List'),
      ),
      body: ListView.builder(
        itemCount: animals.length,
        itemBuilder: (context, index) {
          return AnimalCard(
            name: animals[index]['name']!,
            imageUrl: animals[index]['imageUrl']!,
          );
        },
      ),
    );
  }
}

class AnimalCard extends StatelessWidget {
  final String name;
  final String imageUrl;

  AnimalCard({required this.name, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        leading: Image.network(imageUrl),
        title: Text(name),
      ),
    );
  }
}