ㅁ 개요
O 프로그램 소개
- 이번 글은 이전글(플러터 앱개발 환경설정부터 앱출시까지 빠르게 해보고 전체과정 이해하기 - 1. vscode 에서 플러터 개발환경 구축하기 - 5.안드로이드 툴체인(라이선스 체크))에 이은 6번째 글로 여기서는 아날로그 시계 + 서울의 날씨를 함께 보여주는 앱을 빠르게 만드는 방법에 대하여 알아 보겠습니다.
O 완성된 프로그램 실행 화면
1.아래와 같이 앱을 실행하면 아날로드 시계가 작동하고, 그 아래에 서울의 날씨를 보여줍니다.
ㅁ 세부 내용
O 완성된 소스
소스 : main.dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:intl/intl.dart';
import 'package:analog_clock/analog_clock.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Analog Clock',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Analog Clock'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _time = DateFormat.Hms().format(DateTime.now());
Timer? _timer;
String _weather = "";
void _updateTime() {
setState(() {
_time = DateFormat.Hms().format(DateTime.now());
});
}
@override
void initState() {
super.initState();
_timer = Timer.periodic(Duration(seconds: 1), (timer) => _updateTime());
http
.get(Uri.parse(
"https://api.openweathermap.org/data/2.5/weather?q=Seoul&units=metric&appid=a28df136f8d0e69d894e50d3cdc96cca"))
.then((response) {
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
final weather = data["weather"][0]["description"];
setState(() {
_weather = weather;
});
}
});
}
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarBrightness: Brightness.dark,
));
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
toolbarHeight: 0,
backgroundColor: Colors.blue,
brightness: Brightness.light,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnalogClock(
width: 200,
height: 200,
tickColor: Colors.black,
// faceColor: Colors.white,
// faceColor: Colors.blue[100]!,
hourHandColor: Colors.black,
minuteHandColor: Colors.black,
secondHandColor: Colors.red[900]!,
showNumbers: true,
datetime: DateTime.now(),
),
SizedBox(height: 20),
Text(
_time,
style: TextStyle(fontSize: 40),
),
SizedBox(height: 20),
Text(
"Seoul : " + _weather,
style: TextStyle(fontSize: 20),
),
],
),
),
);
}
}
O 주요 내용
아래 소스코드에 대해서 간략히 설명합니다.
이 코드는 Flutter 프레임워크를 사용하여 디지털 시계와 날씨 정보를 표시하는 앱을 구현한 것입니다.
앱의 기능과 동작을 설명하면 다음과 같습니다:
1.앱 실행 시, main() 함수가 호출됩니다. MyApp 위젯이 생성되고, 앱의 제목과 테마 설정을 포함한 MaterialApp 위젯을 반환합니다.
2.MyApp 위젯의 build() 메서드에서는 MyHomePage 위젯이 홈 페이지로 사용됩니다. 홈 페이지는 title 속성을 받아서 초기화되며, _MyHomePageState 객체를 생성하여 반환합니다.
_MyHomePageState 클래스는 StatefulWidget을 상속하고, 디지털 시계와 날씨 정보를 표시하는 화면을 빌드합니다.
_MyHomePageState 클래스는 다음과 같은 주요 멤버 변수들을 가지고 있습니다:
- _time: 현재 시간을 저장하는 변수로, DateFormat.Hms()를 사용하여 현재 시간을 형식화한 값으로 초기화됩니다.
- _timer: 1초마다 _updateTime() 함수를 호출하여 _time 변수를 갱신하는 Timer 객체입니다.
- _weather: 날씨 정보를 저장하는 변수로, 초기에는 빈 문자열로 초기화됩니다.
initState() 메서드는 위젯이 생성될 때 호출됩니다. 여기서는 _timer를 초기화하고 1초마다 _updateTime() 함수를 호출하여 _time 변수를 갱신합니다. 또한, OpenWeatherMap API를 사용하여 서울의 날씨 정보를 가져와 _weather 변수에 저장합니다.
build() 메서드는 화면을 구성하는 위젯 트리를 반환합니다. 화면의 상단에는 앱 바가 표시되고, 그 아래에는 디지털 시계, 현재 시간 및 서울의 날씨 정보가 표시됩니다.
앱 바는 AppBar 위젯으로 구현되었으며, title 속성으로 앱의 제목을 받습니다. 여기서는 제목을 widget.title로 설정하고, 높이를 0으로 설정하여 표시되지 않도록 합니다.
화면의 중앙에는 AnalogClock 위젯이 표시됩니다. 이 위젯은 analog_clock 패키지에서 가져온 커스텀 위젯으로, 지름이 200인 아날로그 시계를 그립니다. 시계의 시침, 분침, 초침의 색상은 각각 hourHandColor, minuteHandColor, secondHandColor 속성을 통해 설정됩니다. 또한, 현재 시간을 표시하기 위해 datetime 속성에 DateTime.now() 값을 전달합니다.
디지털 시계 아래에는 현재 시간을 표시하는 Text 위젯이 있습니다. 이 위젯은 _time 변수에 저장된 현재 시간을 텍스트로 표시합니다. 글꼴 크기는 40으로 설정되었습니다.
마지막으로, 서울의 날씨 정보를 표시하는 Text 위젯이 있습니다. 이 위젯은 _weather 변수에 저장된 날씨 정보를 텍스트로 표시합니다. 글꼴 크기는 20으로 설정되었습니다.
앱은 실행되면 현재 시간을 실시간으로 업데이트하고, 서울의 날씨 정보를 API를 통해 가져와서 표시합니다. 디지털 시계는 아날로그 시계와 함께 시간 정보를 시각적으로 보여주는 역할을 합니다.
ㅁ 정리
O 우리가 배운 내용
오늘은 여기까지이며, 댓글과 하트는 제가 이글을 지속할 수 있게 해주는 힘이 됩니다.
위의 내용이 유익하셨다면, 댓글과 하트 부탁드립니다.
감사합니다.