Flutter 앱 개발에서 Card 위젯은 정보를 표시하고 사용자와 상호 작용하는 데 유용한 컨테이너입니다. Card 위젯을 사용하여 앱의 사용자 인터페이스를 보강하는데 도움이 되는 다른 유용한 위젯들도 함께 고려해 보는 것이 중요합니다. 이번 블로그에서는 Card 위젯과 함께 사용할 수 있는 몇 가지 다른 위젯들에 대해 알아보겠습니다.
Table of Contents
Container
Container 위젯은 여러 종류의 디자인 요소, 이미지, 아이콘, 텍스트 등을 표시하기 위해 사용됩니다. Card 위젯 안에 Container를 넣으면 Card의 배경색이나 모서리 둥근 정도 등을 조절하여 더 많은 디자인적 유연성을 제공합니다.
Card(
child: Container(
padding: EdgeInsets.all(16.0),
child: Text('This is a container inside a card'),
),
)
ListTile
ListTile 위젯은 리스트 항목을 표시하기 위해 사용됩니다. 이 위젯은 이미지, 텍스트, 서브텍스트 및 추가 작업을 수행할 아이콘을 표시하는 데에 사용됩니다. Card와 함께 사용하면 각 항목을 나란히 나타낼 수 있어 보기 좋은 리스트 디자인을 구현할 수 있습니다.
Card(
child: ListTile(
leading: Icon(Icons.person),
title: Text('John Doe'),
subtitle: Text('johndoe@example.com'),
trailing: IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {
// Additional action
},
),
),
)
InkWell
InkWell 위젯은 터치의 피드백을 제공하기 위해 사용됩니다. 이 위젯을 Card의 자식으로 넣으면 사용자가 카드를 터치할 때 표시되는 효과를 추가할 수 있습니다.
Card(
child: InkWell(
onTap: () {
// Handle card tap
},
child: Container(
padding: EdgeInsets.all(16.0),
child: Text('Tap this card'),
),
),
)
ExpansionTile
ExpansionTile 위젯은 접히고 펼칠 수 있는 확장 가능한 항목을 제공합니다. 이 위젯을 Card 안에 넣으면 토글 기능을 추가하여 공간을 절약하고 사용자 경험을 향상시킬 수 있습니다.
Card(
child: ExpansionTile(
title: Text('Expandable Card'),
children: <Widget>[
ListTile(title: Text('Child1')),
ListTile(title: Text('Child2')),
],
),
)
Card 위젯은 다양한 형식의 컨텐츠를 담을 수 있는 강력한 도구입니다. 여기에 소개된 다른 위젯들과 함께 활용하여 앱의 사용자 인터페이스를 더욱 풍성하게 만들어보세요. 각 위젯의 특징과 사용 방법에 대한 더 자세한 정보는 Flutter 공식 문서를 참고하시기 바랍니다.