0. 참조 링크
아래 예제 소스를 잘 붙여만 넣어도 위 스샷처럼 이쁜 디지털 시계를 만들어 폰에 넣어서 다닐 수 있습니다 :) 아 이뽀 ~ ( 물론 이해하여 나만의 소스로 만들어 보는 것이 중요 하겠지만요 ㅜㅜ )
1. 초기 설정
1.1. 기본 시작 소스
intl은 추가적으로 패키지를 추가 해줘야 한다.pubspec.yml에 추가해주도록 한다.
file : pubspec.yaml
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) 이런 식으로 처리하면 됩니다.