새로운 페이지를 만들기, Widget Class

readme.md

새로운 페이지를 만들기, Widget Class

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';
// 참고 : https://docs.flutter.dev/cookbook/navigation/navigation-basics

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&r=1', 'description': 'Man\'s best friend'},
    {'name': 'Cat', 'imageUrl': 'https://cataas.com/cat?width=100&r=2', 'description': 'Independent companion'},
    {'name': 'Elephant', 'imageUrl': 'https://cataas.com/cat?width=100&r=3', 'description': 'Gentle giant'},
    // ... 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 GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => AnimalDetailPage(
                    name: animals[index]['name']!,
                    imageUrl: animals[index]['imageUrl']!,
                    description: animals[index]['description']!,
                  ),
                ),
              );
            },
            child: 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),
      ),
    );
  }
}

class AnimalDetailPage extends StatelessWidget {
  final String name;
  final String imageUrl;
  final String description;

  AnimalDetailPage({required this.name, required this.imageUrl, required this.description});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(name),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Image.network(imageUrl),
            SizedBox(height: 20),
            Text(
              name,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            Text(description),
          ],
        ),
      ),
    );
  }
}