[flutter] Card 위젯에 버튼 추가하기

12 Dec 2023

flutter

Flutter에서 Card 위젯은 재료 디자인을 구현하기 위한 일반적인 구성 요소 중 하나입니다. Card 위젯에는 그림, 텍스트 및 작은 작업을 수행하는 버튼과 같은 기타 위젯을 추가할 수 있습니다. 아래 예제는 Card 위젯 내에 RaisedButton(버튼)을 추가하는 방법을 보여줍니다.

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('Card 버튼 예제'),
        ),
        body: Center(
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const ListTile(
                  leading: Icon(Icons.album),
                  title: Text('곡명'),
                  subtitle: Text('가수명'),
                ),
                ButtonBar(
                  children: <Widget>[
                    FlatButton(
                      child: const Text('상세 정보'),
                      onPressed: () {/* 상세 정보 페이지로 이동하는 로직을 추가하세요. */},
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서 Card 위젯 내에 FlatButton을 추가하여 “상세 정보” 버튼을 만들었습니다.

이제 당신은 Flutter에서 Card 위젯에 버튼을 추가하는 방법을 이해했습니다. 이 기술을 사용하여 앱의 사용자 인터페이스를 향상시킬 수 있습니다.

자세한 내용은 Flutter 공식 문서를 참조하세요.