[AD]MCO VISA 암호화폐로 결제하자

[flutter] 디지털 시계 만들기

in zzan •  4 months ago 

190830_스팀잇표지.002.jpeg

0. 참조 링크

Screenshot_1574786078.png

참조 : 플러터 바이너리 시계 만들기 - 파이어 쉽

아래 예제 소스를 잘 붙여만 넣어도 위 스샷처럼 이쁜 디지털 시계를 만들어 폰에 넣어서 다닐 수 있습니다 :) 아 이뽀 ~ ( 물론 이해하여 나만의 소스로 만들어 보는 것이 중요 하겠지만요 ㅜㅜ )

1. 초기 설정

1.1. 기본 시작 소스

intl 은 추가적으로 패키지를 추가 해줘야 한다. pubspec.yml 에 추가해주도록 한다.

file : pubspec.yaml

https://pub.dev/packages/intl

intl: ^0.16.0

file : main.dart

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show SystemChrome, DeviceOrientation;
import 'package:intl/intl.dart' show DateFormat;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Clock(),
      ),
    );
  }
}

1.2. 강제로 가로모드로 동작하도록 설정

SystemChrome 를 통해 화면 방향을 설정한다. (landscapeRight, landscapeLeft) 방향만 허가함.

void main() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
  ]);
  runApp(MyApp());
}

2. Time 관련 설정하기

2.1. clock tick 초단위 흐름 만들기

DateTime 클래스를 활용하여 1초 단위로 시간을 주기적으로 업데이트 처리해주도록 한다.

class Clock extends StatefulWidget {
  Clock({Key key}) : super(key: key);

  @override
  _ClockState createState() => _ClockState();
}
class _ClockState extends State<Clock> {

  DateTime _now = DateTime.now(); // or BinaryTime see next step

  // Tick the clock
  @override
  void initState() {
    Timer.periodic(Duration(seconds: 1), (v) {
      setState(() {
        _now = DateTime.now(); // or BinaryTime see next step
      });
    });
    
    super.initState();
  }
}

2.2. 정수형을 이진수(바이너리)로 바꿔주기

시계는 기본적으로 14:23:55 or hh:mm:ss 와 같은 형태로 보여진다. BinaryTime 이라는 커스텀 클래스를 만들어서 UI에서 2진수 형태로 자릿수가 보여지도록 구성한다.

/// Utility class to access values as binary integers
class BinaryTime {
  List<String> binaryIntegers;

  BinaryTime() {
    DateTime now = DateTime.now();
    String hhmmss = DateFormat("Hms").format(now).replaceAll(':', '');

    binaryIntegers = hhmmss
        .split('')
        .map((str) => int.parse(str).toRadixString(2).padLeft(4, '0'))
        .toList();
  }

  get hourTens => binaryIntegers[0];
  get hourOnes => binaryIntegers[1];
  get minuteTens => binaryIntegers[2];
  get minuteOnes => binaryIntegers[3];
  get secondTens => binaryIntegers[4];
  get secondOnes => binaryIntegers[5];
}

3. 시계 UI

3.1. 2진수 형태 디지털 표현하기

이전에 만들어 놓은 Clock 클래스에 build 부분을 구성하며 해당 값을 위에 만들어 놓은 BinaryTime 이진수 변환기에 매칭 시켜 초기화 시켜준다. 또한 Timer.periodic 를 통해 초단위로 작업이 동작하도록 한다.

class Clock extends StatefulWidget {
  Clock({Key key}) : super(key: key);

  @override
  _ClockState createState() => _ClockState();
}

class _ClockState extends State<Clock> {
  BinaryTime _now = BinaryTime();

  // Tick the clock
  @override
  void initState() {
    Timer.periodic(Duration(seconds: 1), (v) {
      setState(() {
        _now = BinaryTime();
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(50),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // Columns for the clock
          ClockColumn(
            binaryInteger: _now.hourTens,
            title: 'H',
            color: Colors.blue,
            rows: 2,
          ),
          ClockColumn(
            binaryInteger: _now.hourOnes,
            title: 'h',
            color: Colors.lightBlue,
          ),
          ClockColumn(
            binaryInteger: _now.minuteTens,
            title: 'M',
            color: Colors.green,
            rows: 3,
          ),
          ClockColumn(
            binaryInteger: _now.minuteOnes,
            title: 'm',
            color: Colors.lightGreen,
          ),
          ClockColumn(
            binaryInteger: _now.secondTens,
            title: 'S',
            color: Colors.pink,
            rows: 3,
          ),
          ClockColumn(
            binaryInteger: _now.secondOnes,
            title: 's',
            color: Colors.pinkAccent,
          ),
        ],
      ),
    );
  }
}

3.2. 개별 시계 열 만들기

각 열은 4개의 셀로 나눠있으며 해당 값은 2진수 형태로 표현된다. 만약이 셀이 활성화 되면 지정한 색상을 표현한다.

/// Column to represent a binary integer.
class ClockColumn extends StatelessWidget {
  String binaryInteger;
  String title;
  Color color;
  int rows;
  List bits;

  ClockColumn({this.binaryInteger, this.title, this.color, this.rows = 4}) {
    bits = binaryInteger.split('');
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        ...[
          Container(
            child: Text(
              title,
              style: Theme.of(context).textTheme.display1,
            ),
          )
        ],
        ...bits.asMap().entries.map((entry) {
          int idx = entry.key;
          String bit = entry.value;

          bool isActive = bit == '1';
          int binaryCellValue = pow(2, 3 - idx);

          return AnimatedContainer(
            duration: Duration(milliseconds: 475),
            curve: Curves.ease,
            height: 40,
            width: 30,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(5)),
              color: isActive
                  ? color
                  : idx < 4 - rows
                      ? Colors.white.withOpacity(0)
                      : Colors.black38,
            ),
            margin: EdgeInsets.all(4),
            child: Center(
              child: isActive
                  ? Text(
                      binaryCellValue.toString(),
                      style: TextStyle(
                        color: Colors.black.withOpacity(0.2),
                        fontSize: 18,
                        fontWeight: FontWeight.w700,
                      ),
                    )
                  : Container(),
            ),
          );
        }),
        ...[
          Text(
            int.parse(binaryInteger, radix: 2).toString(),
            style: TextStyle(fontSize: 30, color: color),
          ),
          Container(
            child: Text(
              binaryInteger,
              style: TextStyle(fontSize: 15, color: color),
            ),
          )
        ]
      ],
    );
  }
}

기타

혹시 A RenderFlex overflowed by 25 pixels on the bottom. 이런 유사 메시지가 나왔다면 EdgeInsets.all(25) (50->25) 이런 식으로 처리하면 됩니다.

맺음말

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

추가내용

WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIOverlays([]);

2번째 라인 내용을 추가하면 전체 화면으로 동작합니다. ( status bar 제거용 )

오 되게 쉽네요 이정도 쯤이야!! 훗

역시 오이사마 !

제보하는 방법을 몰라 여기다가 적습니다. pediatrics 이 분 보상을 위한 책 발췌만 적고 있네요.

그렇네요 파워 다운 하는걸 보니 정리하거 떠날거 같네여 ㅡ.ㅡ

Posted using Partiko Android