[flutter] Card 위젯을 이용한 시계 앱 화면 구성하기

Flutter를 사용하여 간단한 시계 앱을 만들어보려 합니다. 이번 게시물에서는 Card 위젯을 이용하여 시계 앱의 화면을 구성하는 방법에 대해 설명하겠습니다.

시계 앱 화면 구성하기

import 'package:flutter/material.dart';

void main() {
  runApp(ClockApp());
}

class ClockApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('시계 앱'),
          backgroundColor: Colors.blue,
        ),
        body: Center(
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text(
                    '10:30',
                    style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 16.0),
                  Text(
                    '현재 시간',
                    style: TextStyle(fontSize: 16.0),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드는 Flutter를 사용하여 시계 앱 화면을 구성하는 간단한 예제 코드입니다. 해당 코드는 Card 위젯을 사용하여 시계 앱의 화면을 만들고 있습니다.

Card 위젯

Card 위젯은 간단한 그림자 효과와 모서리 둥근 사각형의 형태로 정보를 표시할 수 있는 위젯입니다. 많은 앱에서 정보를 나타내거나 사용자와 상호 작용하는 UI 요소로 사용됩니다.

핵심 포인트

결론

Flutter의 Card 위젯을 활용하면 간단한 시계 앱 등 다양한 앱의 화면을 구성할 수 있습니다. Card 위젯을 이용하여 앱을 보다 멋지게 표현할 수 있으며, 추가적으로 여러 다양한 UI 요소를 포함시킬 수 있습니다.

기본적인 Card 위젯을 활용한 UI 구성 방법을 학습하고, 필요에 따라 다양한 UI 디자인을 만들어보시기를 권장합니다.

참고문헌: Flutter Card Class