[flutter] Card 위젯에 리스트뷰 추가하기

12 Dec 2023

flutter

이 블로그 포스트에서는 Flutter 앱에서 Card 위젯에 리스트뷰를 추가하는 방법에 대해 알아보겠습니다.

Card 위젯

Card 위젯은 Flutter 애플리케이션에서 머터리얼 디자인을 구현하는 데 사용됩니다. 모서리가 둥근 상자 모양의 표면을 가지며, 그림자와 함께 표시됩니다. 이를 통해 정보를 시각적으로 그룹화하여 보여줄 수 있습니다.

리스트뷰 추가하기

먼저, 리스트뷰 위젯을 생성한 후 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('Flutter Card with ListView'),
        ),
        body: ListView(
          children: <Widget>[
            Card(
              child: ListTile(
                leading: Icon(Icons.account_circle),
                title: Text('John Doe'),
                subtitle: Text('johndoe@example.com'),
              ),
            ),
            Card(
              child: ListTile(
                leading: Icon(Icons.account_circle),
                title: Text('Jane Smith'),
                subtitle: Text('janesmith@example.com'),
              ),
            ),
            // Add more Card widgets as needed
          ],
        ),
      ),
    );
  }
}

이 예제에서는 Card 위젯으로 감싸인 ListTile을 사용하여 두 개의 항목을 표시하고 있습니다. 필요에 따라 추가적인 Card 위젯을 사용하여 리스트를 확장할 수 있습니다.

결론

Card 위젯은 Flutter에서 정보를 시각적으로 그룹화하여 표시하는데 효과적인 방법입니다. 리스트뷰를 Card 위젯으로 감싸면 각 항목이 카드 형식으로 나타나므로 사용자가 정보를 더 쉽게 이해하고 상호작용할 수 있습니다.

이것으로 Flutter의 Card 위젯에 리스트뷰를 추가하는 방법에 대한 간단한 소개를 마치겠습니다. 감사합니다.

Flutter 공식 문서를 참고하시면 보다 자세한 내용을 확인하실 수 있습니다.