[flutter] Card 위젯을 이용한 독서 목록 화면 구성하기
이번 포스트에서는 Card 위젯을 이용하여 독서 목록 화면을 구성하는 방법에 대해 알아보겠습니다.
1. 독서 목록 화면 디자인 및 구성
독서 목록 화면은 사용자가 도서를 시각적으로 볼 수 있도록 구성되어야 합니다. Card 위젯은 이러한 목적으로 사용하기에 적합한 위젯 중 하나입니다.
Card 위젯은 음영과 모서리를 둥글게 처리해 시각적으로 부각시키는데 사용됩니다. 이를 통해 사용자가 독서 목록을 쉽게 식별하고 선택할 수 있습니다.
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: [
Card(
child: ListTile(
leading: Icon(Icons.book),
title: Text('책 제목'),
subtitle: Text('작가명'),
trailing: IconButton(
icon: Icon(Icons.remove_circle),
onPressed: () {
// 도서 삭제 로직
},
),
),
),
Card(
child: ListTile(
leading: Icon(Icons.book),
title: Text('책 제목'),
subtitle: Text('작가명'),
trailing: IconButton(
icon: Icon(Icons.remove_circle),
onPressed: () {
// 도서 삭제 로직
},
),
),
),
// 추가적인 도서 항목들
],
),
),
);
}
}
위의 예시 코드에서는 Card 위젯을 사용하여 각각의 독서 항목을 나타내고 있습니다. 각 Card 내부에는 ListTile 위젯을 활용하여 도서의 정보와 삭제 버튼을 표시하고 있습니다.
3. 마무리
Card 위젯을 이용하면 독서 목록 화면을 보기 좋게 구성할 수 있습니다. 다양한 UI 요소를 추가하여 사용자 경험을 개선할 수 있으며, 사용자가 직관적으로 도서를 확인하고 선택할 수 있습니다.
Flutter를 사용하여 애플리케이션을 개발할 때 독서 목록과 같이 다양한 목록 화면을 만들어야 할 때는 Card 위젯을 적극적으로 활용해보세요.