Colin's Blog
[flutter] Card 위젯을 이용한 목록 화면 구성하기

소개

Flutter에서 목록 화면을 구성할 때 Card 위젯은 매우 유용한 도구입니다. 이 포스트에서는 Card 위젯을 이용하여 간단하면서도 멋진 목록 화면을 만드는 방법에 대해 알아보겠습니다.

Card 위젯 이용하기

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: Icon(Icons.album),
                title: Text('첫 번째 항목'),
                subtitle: Text('부가 설명을 추가할 수 있습니다.'),
                trailing: Icon(Icons.arrow_forward),
                onTap: () {
                  // 항목을 눌렀을 때 실행할 로직 작성
                },
              ),
            ),
            Card(
              child: ListTile(
                leading: Icon(Icons.album),
                title: Text('두 번째 항목'),
                subtitle: Text('부가 설명을 추가할 수 있습니다.'),
                trailing: Icon(Icons.arrow_forward),
                onTap: () {
                  // 항목을 눌렀을 때 실행할 로직 작성
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 ListView와 Card 위젯을 사용하여 목록을 구성했습니다. 각 Card 위젯 안에 ListTile을 이용하여 목록의 각 항목을 표현하였습니다.

Card 커스터마이징

Card 위젯은 다양한 속성을 가지고 있어 디자인을 변경할 수 있습니다. 예를 들어 elevation 속성을 이용하여 그림자의 깊이를 조절하거나 shape 속성을 이용하여 Card의 모양을 변경할 수 있습니다.

Card(
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: ListTile(
    // 항목 내용
  ),
),

이처럼 Card 위젯을 커스터마이징하여 디자인에 맞게 적용할 수 있습니다.

결론

Flutter에서 Card 위젯을 이용하여 목록 화면을 만드는 방법에 대해 알아보았습니다. Card 위젯을 이용하면 목록 요소를 레이아웃하는 데 유용하고, 다양한 속성을 이용하여 디자인을 커스터마이징할 수 있습니다. 이를 통해 사용자 친화적이고 멋진 목록 화면을 만들 수 있습니다.

참고:

© 2018 Colin. All rights reserved.