[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 요소로 사용됩니다.
핵심 포인트
-
Card 위젯: Card 위젯은 시계 앱과 같이 정보를 감싸고 나타내는 데 유용합니다. 그림자 효과와 모서리 둥근 사각형의 형태로 정보를 표시할 수 있습니다.
-
Padding: Card의 내부에 여백을 추가하여 UI 요소를 더 멋지게 표시할 수 있습니다.
-
Column: Column을 사용하여 여러 UI 요소를 세로로 배치할 수 있습니다.
결론
Flutter의 Card 위젯을 활용하면 간단한 시계 앱 등 다양한 앱의 화면을 구성할 수 있습니다. Card 위젯을 이용하여 앱을 보다 멋지게 표현할 수 있으며, 추가적으로 여러 다양한 UI 요소를 포함시킬 수 있습니다.
기본적인 Card 위젯을 활용한 UI 구성 방법을 학습하고, 필요에 따라 다양한 UI 디자인을 만들어보시기를 권장합니다.
참고문헌: Flutter Card Class