[flutter] Card 위젯을 이용한 상세정보 화면 구성하기

12 Dec 2023

flutter

Flutter에서 상세정보 화면을 구성하기 위해 Card 위젯을 사용하는 방법에 대해 알아보겠습니다.

1. Card 위젯 소개

Card 위젯은 그림자와 모서리 둥근 사각형 등과 같은 시각적 속성을 가진 Material Design 스타일의 패널을 구현하는 데 사용됩니다. 이 위젯을 사용하면 사용자에게 정보나 작업을 보여 주거나 입력을 받을 수 있는 표현 방식을 제공할 수 있습니다.

2. 상세정보 화면 구성하기

다음은 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: Center(
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.person),
                  title: Text('이름'),
                  subtitle: Text('홍길동'),
                ),
                ListTile(
                  leading: Icon(Icons.email),
                  title: Text('이메일'),
                  subtitle: Text('hong@example.com'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위 코드는 Card 위젯을 사용하여 이름과 이메일을 보여주는 간단한 상세정보 화면을 구성한 것입니다.

3. 결론

Flutter의 Card 위젯을 이용하면 Material Design 스타일의 상세정보 화면을 간편하게 구성할 수 있습니다. 위 예제를 참고하여 상세정보 화면을 만들어 보세요.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.