회기역 지하철 시간 타이머 앱 - 1 (stateless, state)

맨땅에 헤딩식으로 우선 flutter 타이머 앱을 검색했다.

보니까 여러가지 뭐가 나왔는데 

 

<플러터로 시계만들기>

https://www.youtube.com/watch?v=ahfJhd_XMzU 

이 영상을 참고했다.

 

우선 매우 간단한 디지털 시계부터 만들어 봤다.

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Rightnow(),
    );
  }
}


class Rightnow extends StatefulWidget {
  
  @override
  _RightnowState createState() => _RightnowState();
}

class _RightnowState extends State<Rightnow> {

  @override
  void initState() {

    super.initState();

    Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {

      });
    });
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        child: GetTimer(),
        color: Colors.black,
      ),
    );
  }
}

class GetTimer extends StatelessWidget {

  var now = DateTime.now();
  Widget build(BuildContext context) {
    return Center(
      child: Text('${now.hour}' + ':'+ '${now.minute}' + ':' + '${now.second}',
      style: TextStyle(
        color: Colors.white,
      ),),
    );
  }
}

flutter는 현재시각을 알려주는 method가 존재했는데

var now = DateTime.now();

'${now.hour}' + ':'+ '${now.minute}' + ':' + '${now.second}'

이거였다.

시간도 아래식처럼 나타내면 쉽게 나타낼 수 있었다.

근데 중요한거는 초마다 시계를 업데이트를 해줘야 한다는 점

계속계속 override를 해줘야 했다. 그러기 위해선 State란 개념이 필요했다.

 

공식문서에 의하면 state란,

1. 위젯이 빌드될 때 동기적으로 읽을 수 있는 정보
2. 위젯의 생명주기가 끝나기 전까지 변경될 수 있는 정보

라고 말하고 있다.

 

State는 두개로 나눌 수 있다. Appstate 와 WidgetState. 근데 딱히 구분할 필요는 없다.

 

flutter에서는 휴대폰 스크린에 위젯을 띄우려면 stateless 혹은 stateful 클래스를 만들어야 한다.

말만 들으면 stateless는 state가 없고 stateful은 state가 있는거 같지만, 아니다

stateless는 state가 있는데 변경할 수 없는 것이고, stateful은 state가 존재한다.

즉 stateless widget은 widget에 변경할 데이터가 없는 것이고, stateful은 변경할 데이터가 있는 것이라고 볼 수 있다.

 

@override
  void initState() {

    super.initState();

    Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {

      });
    });
  }

위의 코드는 1초마다 새로 화면을 동기화 시켜주는 함수이다.

1초마다 state를 새롭게 갱신하면서 GetTimer widget을 불러오는 것을 볼 수 있다.

 

이제 timer는 만들었으니까 

https://data.seoul.go.kr/dataList/OA-12764/F/1/datasetView.do

열린데이터광장 메인

여기서 실시간 지하철 도착정보를 가져오는 걸 만들꺼다.

이게 제일 어려워 보인다..

그래도 해봐야겠다. 화이팅!