[flutter] Card 위젯을 이용한 할 일 목록 화면 구성하기

12 Dec 2023

flutter

이 블로그 포스트에서는 Flutter 앱에서 Card 위젯을 사용하여 할 일 목록 화면을 만드는 방법에 대해 알아보겠습니다. 할 일 목록 화면은 일반적으로 카드 형식으로 각 항목을 표시하므로 Card 위젯은 이를 구현하는데 매우 유용합니다.

1. 필요한 패키지 추가하기

먼저, pubspec.yaml 파일에 아래와 같이 flutter/material.dart 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

이후, 패키지를 추가한 후에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져오도록 합니다.

2. Card 위젯을 이용한 할 일 목록 화면 구성하기

아래의 코드는 Card 위젯을 사용하여 간단한 할 일 목록을 만드는 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('할 일 목록')),
        body: ListView(
          children: <Widget>[
            Card(
              child: ListTile(
                leading: Checkbox(
                  value: false, // 할 일 완료 여부에 따라 변경
                  onChanged: (bool? value) {
                    // 할 일 완료 여부를 변경하면 수행할 작업
                  },
                ),
                title: Text('할 일 1'),
                subtitle: Text('할 일 1의 설명'),
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    // 할 일 삭제를 수행하는 함수 호출
                  },
                ),
              ),
            ),
            Card(
              child: ListTile(
                leading: Checkbox(
                  value: true, // 할 일 완료 여부에 따라 변경
                  onChanged: (bool? value) {
                    // 할 일 완료 여부를 변경하면 수행할 작업
                  },
                ),
                title: Text('할 일 2'),
                subtitle: Text('할 일 2의 설명'),
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () {
                    // 할 일 삭제를 수행하는 함수 호출
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 ListView와 내부에 여러 개의 Card 위젯을 사용하여 각각의 할 일 항목을 나타내고 있습니다.

결론

이렇게하면 Card 위젯을 사용하여 간단한 할 일 목록 화면을 만들 수 있습니다. 이를 통해 Flutter 앱에서 다양한 목록 화면을 쉽게 구성할 수 있는 방법에 대해 알아보았습니다.

더 많은 기능을 추가하여 더 다채로운 목록 화면을 구성하는 방법에 대해 관심이 있다면 공식 문서 및 다양한 블로그 등을 참고하여 더 많은 정보를 습득하시기 바랍니다.

참고 문서: Flutter 공식 문서
참고 블로그: Flutter Korea 블로그