Flutter 로 웹툰 앱 만들기 #5 POMODORO APP

1. #5.0 User Interface (13:35)

      

      

      

    
    

      <java />
    
import 'package:flutter/material.dart';

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

class App extends StatefulWidget {
  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  bool showTitle = true;

  void toggleTitle() {
    setState(() {
      showTitle = !showTitle;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        backgroundColor: const Color(0xFFE7626C),
        textTheme: const TextTheme(
          headline1: TextStyle(
            color: Color(0xFF232B55),
          ),
        ),
        cardColor: const Color(0xFFF4EDDB),
      ),
      home: const Scaffold(
        body: Center(),
      ),
    );
  }
}

시작 전 코드 입력.

 

App Widget을 StatelessWidget으로 바꿈

 

Scaffold : 화면 구조 제공

body는 Column으로 렌더링

 

Flexible : UI를 비율에 기반해 더 유연하게 만들 수 있게 해줌

 

weight 처럼?

weightsum은 따로 없나??

 

숫자로 적는건 비율인가? 픽셀이면 문제될 수 있지 않나?

 

Expanded?

https://github.com/NewChoBo/toonflix/commit/3ea72b318cfdb630e63141653053ffdef5bc0df5

 

2. #5.1 Timer (05:48)

타이머?

카운트다운?

State를 count로 초기화?

https://github.com/NewChoBo/toonflix/commit/03774793c77713ac889cd820cb16aadb305929c0

 

3. #5.2 Pause Play (04:26)

타이머 멈추는 기능

위에 있던 버그를 막기 위한 처리는 따로 하지 않았지만, bool으로 바꾸면서 해결된 것으로 보임.

https://github.com/NewChoBo/toonflix/commit/c93599d52759b11e0fd108a107947a9b5af5bc65

 

4. #5.3 Date Format (10:27)

날짜 포멧?

https://github.com/NewChoBo/toonflix/commit/9b0fbc91ff5f5102f0a8844ab3168b87967afec1

 

5. #5.4 Code Challenge (01:59)

다음 강의때는 웹툰앱에 들어가서 API, data fetching 등 을 사용할 것.

DB연결도 알아두면 좋을텐데...

 

지금 만든 것은 정지/시작만 가능하다.

리셋/재시작 버튼을 만들어보자.

 

다음강의는 지금까지것 복습 + Data fetching, Future, Animation, Scroll View 등 도 볼 것.

https://github.com/NewChoBo/toonflix/commit/0eeb2b36de75ada818264180bf674a68c724c87f