본문 바로가기

Flutter-플러터/클론코딩

Get x를 이용한 Timer

반응형

https://github.com/AmirBayat0/Flutter-Timer-with-GetX/blob/main/flutter_simple_timer/lib/view/final_view.dart

 

GitHub - AmirBayat0/Flutter-Timer-with-GetX: Simple Timer app using GetX in Flutter

Simple Timer app using GetX in Flutter. Contribute to AmirBayat0/Flutter-Timer-with-GetX development by creating an account on GitHub.

github.com

 

위 코드를 클론코딩했습니다. 

 

배운점 

 

1. 상태변화에 대해서 update()함수를 사용했고 , 그것을 보여줄 때는 Getbuider를 쓰는 법을 배웠습니다. (하지만...변수에 .obs 사용이 더 편한 듯..)

2. Timer widget

In Dart programming language, a timer widget is not a built-in widget in the Flutter framework. However, you can use the Timer class from the dart:async library to create timers.

The Timer class provides a way to execute code on a specified interval or delay. It takes two arguments: a duration and a callback function.

Here is an example of how you can use the Timer class to create a timer that executes a function every second

 

import 'dart:async';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;
  Timer _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(seconds: 1), _incrementCounter);
  }

  void _incrementCounter(Timer timer) {
    setState(() {
      _counter++;
    });
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text('Counter: $_counter');
  }
}

 _timer = Timer.periodic(Duration(seconds: 1), _incrementCounter); 

위 함수를 통해서 1씩 증가하게 하는 것 같다. 

 

 

3. CircularProgressIndicator

 

일의 진행상황이나 타이머에 자주 쓰인다. 

일의 진행값이 50% = value =0.5

일의 진행값이 100% = value=1.0

 

 

In Flutter, you can use the CircularProgressIndicator widget to display a circular progress indicator that animates to show that a task is in progress. Here's an example:

 

CircularProgressIndicator(
  backgroundColor: Colors.grey,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  strokeWidth: 5.0,
)

 

This will display the circular progress indicator in the center of the screen.

Note that the CircularProgressIndicator widget animates automatically when it is shown on the screen. To stop the animation, you can pass a value parameter to the constructor to indicate the progress of the task. For example, if the task is 50% complete, you can set the value to 0.5. If the task is complete, you can set the value to 1.0.

728x90
반응형

'Flutter-플러터 > 클론코딩' 카테고리의 다른 글

GetX Todo 어플 - 연습하기 굉장히 좋다  (0) 2023.03.30
애니메이션 만들기  (0) 2023.03.13
Getx 연락처 코드 클론코딩  (0) 2023.03.07
Get x Todo 클론코딩  (0) 2023.03.03
원가계산기 클론코딩  (0) 2023.02.26