플러터 순한맛 강좌 - 리스트 뷰(List view)에서 데이터 전달하고 페이지 이동하기

원종인·2022년 7월 9일
0

Flutter 공부

목록 보기
13/13
post-thumbnail

다음 코드는 코딩셰프의 수업을 바탕으로 작성하였습니다.
플러터(flutter) 강의: 순한 맛 시즌 2-3 | 리스트 뷰(List view)에서 데이터 전달하고 페이지 이동하기

pubspec.yaml

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  like_button: ^2.0.4
  # To add assets to your application, add an assets section, like this:
  assets:
    - image/  

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_12/animal_page.dart';

import 'model.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyPage(),
    );
  }
}

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

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  static List<String> animalImagePath = [
    'image/bear.png',
    'image/camel.png',
    'image/deer.png',
    'image/fox.png',
    'image/kangaroo.png',
    'image/koala.png',
    'image/lion.png',
    'image/tiger.png',
  ];

  static List<String> animalName = [
    'Bear',
    'Camel',
    'Deer',
    'Fox',
    'Kangaroo',
    'Koala',
    'Lion',
    'Tiger',
  ];

  static List<String> animalLocation = [
    'forest and mountain',
    'dessert',
    'forest',
    'snow mountain',
    'Australia',
    'Australia',
    'Africa',
    'Korea',
  ];

  final List<Animal> animalData = List.generate(
      animalLocation.length,
      (index) => Animal(
          animalName[index], animalLocation[index], animalImagePath[index]));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView'),
      ),
      body: ListView.builder(
        itemCount: animalData.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text(
                animalData[index].name,
              ),
              leading: SizedBox(
                height: 50,
                width: 50,
                child: Image.asset(
                  animalData[index].imgPath,
                ),
              ),
              onTap: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => AnimalPage(animal: animalData[index],)));
                debugPrint(animalData[index].name);
              },
            ),
          );
        },
      ),
    );
  }
}

animal_page.dart

import 'package:flutter/material.dart';
import 'model.dart';
import 'package:like_button/like_button.dart';

class AnimalPage extends StatefulWidget {
  const AnimalPage({Key? key, required this.animal}) : super(key: key);

  final Animal animal;

  @override
  State<AnimalPage> createState() => _AnimalPageState();
}

class _AnimalPageState extends State<AnimalPage> {

  bool isLiked = false;
  int likeCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.animal.name),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 200,
              width: 200,
              child: Image.asset(widget.animal.imgPath),
            ),
            const SizedBox(
              height: 20,
            ),
            Text(
              'It lives in ' + widget.animal.location,
              style: const TextStyle(
                fontSize: 18,
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            LikeButton(
              size: 30,
              isLiked: isLiked,
              likeCount: likeCount,
            ),
          ],
        ),
      ),
    );
  }
}

model.dart

class Animal{
  final String name; // 전달받은 데이터에 따라 각각 다른 동물이 생성될 것이기에 앱이 실행될 때 변하지 않는 상수로 만들기 위해서이다.
  final String imgPath;
  final String location;

  Animal(this.name, this.location, this.imgPath);
}
profile
아직 대학생입니다

0개의 댓글