[flutter] Card 위젯에 이미지 삽입하기

12 Dec 2023

flutter

Flutter 앱을 개발할 때 UI 디자인을 향상시키기 위해 Card 위젯을 사용하는 경우가 많습니다. Card 위젯은 그림자와 모서리를 둥글게 처리하여 마테리얼 디자인을 쉽게 적용할 수 있도록 도와줍니다. 이번에는 Card 위젯에 이미지를 삽입하는 방법을 살펴보겠습니다.

Card 위젯의 기본 구조

먼저, Card 위젯은 다음과 같이 기본적인 구조로 생성할 수 있습니다.

Card(
  child: Column(
    children: <Widget>[
      ListTile(
        title: Text('제목'),
        subtitle: Text('부제목'),
      ),
      ButtonBar(
        children: <Widget>[
          FlatButton(
            child: Text('버튼'),
            onPressed: () {},
          ),
        ],
      ),
    ],
  ),
)

Card 위젯에 이미지 삽입하기

이제, 위의 기본 Card 구조에 이미지를 삽입해보겠습니다. 이미지를 삽입하는 방법은 ListTile 위젯 안에 leading 속성을 이용하여 이미지를 지정하는 것입니다.

Card(
  child: Column(
    children: <Widget>[
      ListTile(
        leading: Image.asset('assets/image.jpg'),
        title: Text('제목'),
        subtitle: Text('부제목'),
      ),
      ButtonBar(
        children: <Widget>[
          FlatButton(
            child: Text('버튼'),
            onPressed: () {},
          ),
        ],
      ),
    ],
  ),
)

결론

이제 당신의 Flutter 앱에서 Card 위젯에 이미지를 삽입하는 방법을 알게 되었습니다. 이를 통해 앱의 UI를 더욱 다채롭게 꾸밀 수 있을 것입니다.

더 많은 정보와 예제는 Flutter 공식 문서를 참고하시기 바랍니다.