[flutter] Card 위젯을 이용한 영화 소개 앱 화면 구성하기
영화 소개 앱을 개발할 때, Card 위젯은 각각의 영화 정보를 아름답게 표시할 수 있는 매우 유용한 도구입니다. Card 위젯은 일반적으로 Material Design의 시각적 언어를 따르는데, 각 카드는 그림자를 통해 떨어진 3D 효과를 제공하여 사용자에게 더욱 매력적인 사용자 경험을 제공합니다.
1. Card 위젯 개요
Flutter에서 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('Movie App'),
),
body: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(Icons.movie),
title: Text('The Shawshank Redemption'),
subtitle: Text('1994'),
),
ButtonBar(
children: <Widget>[
TextButton(
child: const Text('DETAILS'),
onPressed: () {
// Open movie details
},
),
],
),
],
),
),
),
),
);
}
}
위 예제에서는 기본적인 Card 위젯을 생성하고, 그 안에 ListTile과 ButtonBar를 포함시켜 간단하게 영화 소개 정보를 표시하고 상세 정보를 조회할 수 있는 버튼을 제공했습니다.
3. Card 위젯을 활용한 화면 구성
예제에서 확인할 수 있듯이, Card 위젯을 사용하면 간단하게 각각의 영화 정보를 카드 형태로 표시할 수 있습니다. 이를 통해 다양한 정보를 제공하는 데 필요한 요소들을 간결하고 아름답게 배치할 수 있습니다.
그럼 아래에서 다양한 디자인과 기능을 추가하여 영화 소개 앱의 화면을 더욱 다채롭게 구성해보세요!