[flutter] Card 위젯을 이용한 포트폴리오 화면 구성하기

12 Dec 2023

flutter

플러터 앱에서 포트폴리오 화면을 만들어봅시다. Card 위젯을 사용하여 각 포트폴리오 항목을 나타내고, 사용자가 해당 항목을 선택할 수 있게 만들 것입니다.

1. 포트폴리오 정보 모델 만들기

먼저, 포트폴리오 항목의 정보를 담을 모델 클래스를 만듭니다.

class PortfolioItem {
  final String title;
  final String description;
  final String imageUrl;

  PortfolioItem({required this.title, required this.description, required this.imageUrl});
}

2. Card 위젯으로 포트폴리오 항목 나타내기

이제 모델을 이용해 포트폴리오 항목을 Card 위젯으로 나타냅니다.

import 'package:flutter/material.dart';

class PortfolioScreen extends StatelessWidget {
  final List<PortfolioItem> portfolioItems = [
    PortfolioItem(
      title: 'Project A',
      description: 'Description for Project A',
      imageUrl: 'assets/project_a_image.jpg',
    ),
    PortfolioItem(
      title: 'Project B',
      description: 'Description for Project B',
      imageUrl: 'assets/project_b_image.jpg',
    ),
    // Add more portfolio items as needed
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Portfolio'),
      ),
      body: ListView.builder(
        itemCount: portfolioItems.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              leading: Image.asset(portfolioItems[index].imageUrl),
              title: Text(portfolioItems[index].title),
              subtitle: Text(portfolioItems[index].description),
              onTap: () {
                // Handle portfolio item selection
              },
            ),
          );
        },
      ),
    );
  }
}

3. 포트폴리오 항목 선택 처리 추가하기

각 Card를 탭할 때의 처리 로직을 추가합니다. 이 예시에서는 항목이 선택되었을 때의 처리를 나타내는 로직은 // Handle portfolio item selection 주석으로 대체했습니다.

결론

위와 같이 Card 위젯을 사용하여 포트폴리오 항목을 나타낼 수 있습니다. 사용자는 각 항목을 선택하여 자세히 볼 수 있도록 화면을 구성할 수 있습니다.

더 많은 기능을 추가하여 포트폴리오 화면을 보다 풍부하게 만들어보세요.

참고: Flutter Card class