Do you know how binary works? Learn the basics by building a binary Clock in Flutter. Build your own clock before the competition deadline on Jan 22nd, 2020. https://fireship.io/lessons/build-a-binary-clock-flutter/

Flutter Clock Competition https://flutter.dev/clock
What is a Binary Clock? https://en.wikipedia.org/wiki/Binary_clock
Snippet for Dart List.map https://fireship.io/snippets/dart-how-to-get-the-index-on-array-loop-map/

#flutter #FlutterClock #compsci

Don't forget to take the quiz 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

My Gear:

VS Code with Atom One Dark + vscode-icons. Fira Code font.
2024-02-04T06:29:49.381Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
2b2aceea-8767-4549-b85f-8955d0a1b537
caa4c0272f04a0eea1c19cf9318db1a76f2a764ba0cfbc536f921784fde896fa
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today, we're going to use Flutter to build a clock.
And not just any ordinary clock, but a binary clock.
Just a few days ago, the Flutter team launched a new competition where the goal is to build the most beautiful clock base.
I don't plan on entering this competition myself, so this video is more of a quick start guide to get you started building your own clock from scratch.
As you'll see in a few minutes, building a clock in Flutter is really easy.
So, in order to make this video a little more challenging, I also want to teach you everything you didn't know about Binary.
And if you're entering the Flutter clock competition.
Make sure to watch until the end of the video, because I'll be sharing additional clock ideas there that you're more than welcome to steal from me.
If you're new here, like and subscribe, and you can grab the full source code from FireShip.
Io.
In order to build a binary clock, we need to know a little bit about how binary works.
In mathematics, exabinarynumber is just a number that has 2 possible states, which we can represent as a 0 or a 1.
You can think of this logically as true or false, electronically as on off.
And in computer systems, we call a single binary value a bit.
Now a single bit by itself can't represent very much, just two values to be precise.
So how do we make bits represent more complex data?
Well, we simply combine them together.
When you combine bits together, it creates a geometric series where the number of different values we can represent is determined by 2 to the power of the number of bits that we have.
So 2 to the power of 1 equals 2, which means we can represent 2 things.
2 to the power of 2 is 4, so we can represent 4 things with 2 bits.
But when talking about bits, we usually think about them grouped in series of 8 which is a single byte.
A byte would be 2 to the power of 8, which can represent 256 different things.
Now the reason we call 8 bits a byte is somewhat arbitrary.
It's just a good even number and contains enough space for all the letters of the alphabet and uppercase and lowercase.
For example, you may have heard of u t f 8, which stands for 8 bit unicode termination format.
It encodes millions of different characters from languages around the world, including emojis, and does so by combining 1 to 4 8 bit bytes together.
So So whenever you use Unicode characters in your code, which is all the time, each character is actually encoded to a binary value, and the computer uses that value to look in this giant table to figure out which character to actually show in the screen or the UI.
In fact, here's a cool little trick you can do in your Dart code.
Start with a string, and then grab its actual character code from the utf8 table by calling codeunit@a given index in that string.
That will give you a base 10 decimal by default.
If you want to convert it to binary called 2 radix string with a base of 2.
Radix is just another name for base, so it's taking the original base ten number that we normally use and converting it to a base 2 binary value.
So that's how binary works at a high level, but how do we actually use the ones and zeros to represent more complex data?
Like, how do we use binary to tell time?
You can see we have 6 columns on the clock where each column is used to represent a digit in time.
Blue shows the hours, green the minutes, and pink the seconds.
The large colorful numbers represent the time and digits that you would be familiar with.
And you'll see our Flutter clock is synced up with the actual device clock.
Now each one of the cells or the intersection between a row and a column represents a bit.
Notice how inside of every cell, we have a number.
This is the actual value that that bit represents.
So the bottom row represents ones, the second row represents twos, 3rd row fours and the top row eights.
If none of the cells are highlighted, then it represents a 0.
If there's just a single cell highlighted, then you can assume that it represents that number.
But if you have multiple cells highlighted, then you get the value by adding them together.
For example, if we look at the 1st column, we don't have any bits highlighted.
So that means it's a 0.
If we go to the next column, we have an 8 and a 1 highlighted.
Add those together, and you get 9.
Continue that process for all of the other columns, and that's how you read a binary clock.
You'll notice that some of the columns have 4 rows, but others only have 2 or 3.
You'll notice the column with 4 rows represents the one's position for hours, minutes, and seconds.
We need 4 bits for these columns because their value can range from 0 to 9, and 4 bits allows us to represent 16 different values.
But when it comes to seconds minutes, we only need to represent 6 values because a clock can only go up to 60 seconds or 60 minutes, and we can represent 6 values with 3 bits.
And when it comes to hours, there's only 24 hours in a day, which means we only need to represent a 0, 1, or a 2, which we can do with 2 bits.
So now that you know how a binary clock works, let's go ahead and build one from scratch with Flutter.
Let's go ahead and get started from a new Flutter project.
If you're entering the competition, you can clone the repo from the contest homepage.
We do have one dependency for our app, intl, so we'll go ahead and add that to the pubspec.
Yaml.
It's used for date formatting and localization of timestamps, which tends to be pretty useful if you're building a clock.
Inside the main dot dart file.
We'll go ahead and import dart async, dart math, and then we'll use system, chrome, and device orientation from the Flutter services package.
The competition requires that the app is in landscape mode.
So in our main function, we'll go ahead and use system Chrome to set the preferred orientations to landscape left or landscape right.
Then moving down to the app itself, we have a material app with some basic theme data, and then we have a scaffold whose body is the clock stateful widget.
So the entire app will basically be coded inside of this stateful widget that we're giving a name of clock.
The first thing we'll wanna do is make our clock tick every second.
We'll set up a property name now which is equal to datetime dot now.
This is actually the only state that we have on the widget.
And the state will change every second for every tick of the clock.
We can set that up during the init state life cycle hook where we set up a periodic timer with a duration of one second.
That gives us a callback function where we'll call setState to update the now value.
Now because we're building a binary clock, I'm going to drachshund of the logic into my own custom class called Binary Time.
This will take the logic of converting a timestamp to binary outside of the widget, which will make it a little easier to maintain and hopefully easier to read.
What we actually want here for our UI is an array of strings where each string represents the ones and zeros needed to display a given column in the clock.
We'll call that list binary integers and when this class is instantiated, we'll grab the timestamp and then we'll convert that timestamp to the hour, minutes, second format.
Now by default, the hours, minutes, and seconds will be separated by a colon, which we don't need, and we can get rid of the colons by using replace all with an empty string.
That will give us a string with a length of 6.
And then we'll map each element first to an integer, into a radix string with a radix or base of 2.
If you remember earlier, we talked about how binary values have a base of 2.
Radix is just another name for the base.
So what it's doing is taking this integer and converting it to a string of ones and zeros.
I'd recommend playing around with this a little on DartPad.
For example, you can take an integer and convert it to a radix string with a given base, or you can convert a string back to an integer by passing in a radix argument of 2.
So unless you're some kind of psychopath who understands how to convert base 10 to base 2, I'd recommend playing around with this a little bit.
The last thing I'm going to do is pad each of the binary integers with zeros on the left side if they don't exist.
This just makes them easier to loop over when we get to the UI.
And also to make our UI code a little more readable, I'm going to set up a getter for each of the positions in the clock.
The clock represents time in a base ten system, So we have the hours 10 position, the hours 1 position, the minutes tens, and so on.
So that's how we convert all of the base 10 digits in a clock to binary.
Now we just need to loop over them and show a column in the UI for each of the binary values.
So in our Stateful widget, we'll set up a container with a little bit of padding, Then we'll set up a row, and this row will contain 6 clock columns.
The clock column will be a custom stateless widget that we'll build next.
Instead of creating a loop here, I'm just adding each of the clock columns manually so we can adjust the title, the color, and the number of rows that are actually displayed.
And each column takes a different binary integer based on the value of the clock that it's meant to represent.
Now, each column will display 4 rows.
So we'll go ahead and implement that logic in this stateless clock column widget.
It will take a few input properties, so we can customize the title, color, and things like that, as well as the binary integer that it represents.
And one additional property called bits, which will just be an array of the values in the binary integer, which will contain 4 values of ones and zeros.
Inside the build method, we'll go ahead and set up a column.
We'll set the main axis alignment to space between, and then the first child of that column will be the title.
Now the interesting part here is showing the active cells inside the column.
We'll do that by looping over the 4 bits in the column.
But one kind of annoying thing about Dart is that it does not allow us to access the index inside of a map operation.
We can overcome this limitation by simply converting the list to a map, grabbing its entries, then we can set local variables for the value and the index.
The cell is considered active if the bit equals 1.
If it's 0, then it's inactive.
You'll also notice in the UI that each individual cell shows the base ten value that that bit represents.
So how do we convert a bit to a base ten integer?
Well, if you remember from earlier, it's simply a power of 2.
So we'll take the power of 2 and then raise it to 3 minus the index.
We do 3 minus the index and not the index directly because we're actually looping in reverse here.
We're starting with the highest value and then going down to the lowest value.
So that should be all the computation we need for the UI.
So at this point, we'll go ahead and return an animated container, and then we'll set the duration to around 500 milliseconds just so we can animate the color when it goes from active to inactive.
If we look at the box decoration for the container, you can see if it's active, we show the color that we passed as an input property.
Otherwise, if the index is less than 4 minus the rows, then we'll go ahead and make that invisible by setting the opacity to 0.
Otherwise, we'll go ahead and show a black or inactive cell.
Then as the child of the animated container, we'll go ahead and show the actual binary value in base 10 and we'll give it some opacity just so it blends in with the existing cell color.
Then down below the cells, I'll go ahead and use integer parse with a radix value of 2.
This will convert the binary integer to a decimal in base ten format.
And then down below that, we'll go ahead and show the binary integer itself in a smaller font size.
And that's all there is to it.
We now have a fully functional binary clock built with Flutter.
My hope with this video is that someone watches it, builds their own clock in Flutter, and wins the competition, and there's some pretty decent prizes for the top entries.
A thing to keep in mind is that the point of this competition is to build the UI for the Lenovo Smart Display.
So a binary clock might not be exactly what they're going for, but here are a few other ideas that you might use to hopefully win this competition.
One potential idea is to integrate text into your clock.
So instead of showing the digits of 7:30, you would say it is half past 7.
So you just need to write a little dart algorithm that converts your timestamp into a human readable sentence.
Another idea is to recreate the classic flip clock.
This should be relatively easy to execute with Flutter animation and your own custom graphics.
Also consider building a clock that adjusts its color gradient based on the time.
So the color gradient will adjust every second becoming darker at night and brighter during the day.
Ultimately, I think the winning design will be something that is clean and modern that incorporates some animation.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and scribe and consider becoming a pro member at Fireship IO to get access to the full Flutter course and a bunch of other exclusive content.
Thanks for watching, and I will talk to you soon.

Speaker 0: Today, we're going to use Flutter to build a clock. And not just any ordinary clock, but a binary clock. Just a few days ago, the Flutter team launched a new competition where the goal is to build the most beautiful clock base. I don't plan on entering this competition myself, so this video is more of a quick start guide to get you started building your own clock from scratch. As you'll see in a few minutes, building a clock in Flutter is really easy.

So, in order to make this video a little more challenging, I also want to teach you everything you didn't know about Binary. And if you're entering the Flutter clock competition. Make sure to watch until the end of the video, because I'll be sharing additional clock ideas there that you're more than welcome to steal from me. If you're new here, like and subscribe, and you can grab the full source code from FireShip. Io.

In order to build a binary clock, we need to know a little bit about how binary works. In mathematics, exabinarynumber is just a number that has 2 possible states, which we can represent as a 0 or a 1. You can think of this logically as true or false, electronically as on off. And in computer systems, we call a single binary value a bit. Now a single bit by itself can't represent very much, just two values to be precise.

So how do we make bits represent more complex data? Well, we simply combine them together. When you combine bits together, it creates a geometric series where the number of different values we can represent is determined by 2 to the power of the number of bits that we have. So 2 to the power of 1 equals 2, which means we can represent 2 things. 2 to the power of 2 is 4, so we can represent 4 things with 2 bits.

But when talking about bits, we usually think about them grouped in series of 8 which is a single byte. A byte would be 2 to the power of 8, which can represent 256 different things. Now the reason we call 8 bits a byte is somewhat arbitrary. It's just a good even number and contains enough space for all the letters of the alphabet and uppercase and lowercase. For example, you may have heard of u t f 8, which stands for 8 bit unicode termination format.

It encodes millions of different characters from languages around the world, including emojis, and does so by combining 1 to 4 8 bit bytes together. So So whenever you use Unicode characters in your code, which is all the time, each character is actually encoded to a binary value, and the computer uses that value to look in this giant table to figure out which character to actually show in the screen or the UI. In fact, here's a cool little trick you can do in your Dart code. Start with a string, and then grab its actual character code from the utf8 table by calling codeunit@a given index in that string. That will give you a base 10 decimal by default.

If you want to convert it to binary called 2 radix string with a base of 2. Radix is just another name for base, so it's taking the original base ten number that we normally use and converting it to a base 2 binary value. So that's how binary works at a high level, but how do we actually use the ones and zeros to represent more complex data? Like, how do we use binary to tell time? You can see we have 6 columns on the clock where each column is used to represent a digit in time.

Blue shows the hours, green the minutes, and pink the seconds. The large colorful numbers represent the time and digits that you would be familiar with. And you'll see our Flutter clock is synced up with the actual device clock. Now each one of the cells or the intersection between a row and a column represents a bit. Notice how inside of every cell, we have a number.

This is the actual value that that bit represents. So the bottom row represents ones, the second row represents twos, 3rd row fours and the top row eights. If none of the cells are highlighted, then it represents a 0. If there's just a single cell highlighted, then you can assume that it represents that number. But if you have multiple cells highlighted, then you get the value by adding them together.

For example, if we look at the 1st column, we don't have any bits highlighted. So that means it's a 0. If we go to the next column, we have an 8 and a 1 highlighted. Add those together, and you get 9. Continue that process for all of the other columns, and that's how you read a binary clock.

You'll notice that some of the columns have 4 rows, but others only have 2 or 3. You'll notice the column with 4 rows represents the one's position for hours, minutes, and seconds. We need 4 bits for these columns because their value can range from 0 to 9, and 4 bits allows us to represent 16 different values. But when it comes to seconds minutes, we only need to represent 6 values because a clock can only go up to 60 seconds or 60 minutes, and we can represent 6 values with 3 bits. And when it comes to hours, there's only 24 hours in a day, which means we only need to represent a 0, 1, or a 2, which we can do with 2 bits.

So now that you know how a binary clock works, let's go ahead and build one from scratch with Flutter. Let's go ahead and get started from a new Flutter project. If you're entering the competition, you can clone the repo from the contest homepage. We do have one dependency for our app, intl, so we'll go ahead and add that to the pubspec. Yaml.

It's used for date formatting and localization of timestamps, which tends to be pretty useful if you're building a clock. Inside the main dot dart file. We'll go ahead and import dart async, dart math, and then we'll use system, chrome, and device orientation from the Flutter services package. The competition requires that the app is in landscape mode. So in our main function, we'll go ahead and use system Chrome to set the preferred orientations to landscape left or landscape right.

Then moving down to the app itself, we have a material app with some basic theme data, and then we have a scaffold whose body is the clock stateful widget. So the entire app will basically be coded inside of this stateful widget that we're giving a name of clock. The first thing we'll wanna do is make our clock tick every second. We'll set up a property name now which is equal to datetime dot now. This is actually the only state that we have on the widget.

And the state will change every second for every tick of the clock. We can set that up during the init state life cycle hook where we set up a periodic timer with a duration of one second. That gives us a callback function where we'll call setState to update the now value. Now because we're building a binary clock, I'm going to drachshund of the logic into my own custom class called Binary Time. This will take the logic of converting a timestamp to binary outside of the widget, which will make it a little easier to maintain and hopefully easier to read.

What we actually want here for our UI is an array of strings where each string represents the ones and zeros needed to display a given column in the clock. We'll call that list binary integers and when this class is instantiated, we'll grab the timestamp and then we'll convert that timestamp to the hour, minutes, second format. Now by default, the hours, minutes, and seconds will be separated by a colon, which we don't need, and we can get rid of the colons by using replace all with an empty string. That will give us a string with a length of 6. And then we'll map each element first to an integer, into a radix string with a radix or base of 2.

If you remember earlier, we talked about how binary values have a base of 2. Radix is just another name for the base. So what it's doing is taking this integer and converting it to a string of ones and zeros. I'd recommend playing around with this a little on DartPad. For example, you can take an integer and convert it to a radix string with a given base, or you can convert a string back to an integer by passing in a radix argument of 2.

So unless you're some kind of psychopath who understands how to convert base 10 to base 2, I'd recommend playing around with this a little bit. The last thing I'm going to do is pad each of the binary integers with zeros on the left side if they don't exist. This just makes them easier to loop over when we get to the UI. And also to make our UI code a little more readable, I'm going to set up a getter for each of the positions in the clock. The clock represents time in a base ten system, So we have the hours 10 position, the hours 1 position, the minutes tens, and so on.

So that's how we convert all of the base 10 digits in a clock to binary. Now we just need to loop over them and show a column in the UI for each of the binary values. So in our Stateful widget, we'll set up a container with a little bit of padding, Then we'll set up a row, and this row will contain 6 clock columns. The clock column will be a custom stateless widget that we'll build next. Instead of creating a loop here, I'm just adding each of the clock columns manually so we can adjust the title, the color, and the number of rows that are actually displayed.

And each column takes a different binary integer based on the value of the clock that it's meant to represent. Now, each column will display 4 rows. So we'll go ahead and implement that logic in this stateless clock column widget. It will take a few input properties, so we can customize the title, color, and things like that, as well as the binary integer that it represents. And one additional property called bits, which will just be an array of the values in the binary integer, which will contain 4 values of ones and zeros.

Inside the build method, we'll go ahead and set up a column. We'll set the main axis alignment to space between, and then the first child of that column will be the title. Now the interesting part here is showing the active cells inside the column. We'll do that by looping over the 4 bits in the column. But one kind of annoying thing about Dart is that it does not allow us to access the index inside of a map operation.

We can overcome this limitation by simply converting the list to a map, grabbing its entries, then we can set local variables for the value and the index. The cell is considered active if the bit equals 1. If it's 0, then it's inactive. You'll also notice in the UI that each individual cell shows the base ten value that that bit represents. So how do we convert a bit to a base ten integer?

Well, if you remember from earlier, it's simply a power of 2. So we'll take the power of 2 and then raise it to 3 minus the index. We do 3 minus the index and not the index directly because we're actually looping in reverse here. We're starting with the highest value and then going down to the lowest value. So that should be all the computation we need for the UI.

So at this point, we'll go ahead and return an animated container, and then we'll set the duration to around 500 milliseconds just so we can animate the color when it goes from active to inactive. If we look at the box decoration for the container, you can see if it's active, we show the color that we passed as an input property. Otherwise, if the index is less than 4 minus the rows, then we'll go ahead and make that invisible by setting the opacity to 0. Otherwise, we'll go ahead and show a black or inactive cell. Then as the child of the animated container, we'll go ahead and show the actual binary value in base 10 and we'll give it some opacity just so it blends in with the existing cell color.

Then down below the cells, I'll go ahead and use integer parse with a radix value of 2. This will convert the binary integer to a decimal in base ten format. And then down below that, we'll go ahead and show the binary integer itself in a smaller font size. And that's all there is to it. We now have a fully functional binary clock built with Flutter.

My hope with this video is that someone watches it, builds their own clock in Flutter, and wins the competition, and there's some pretty decent prizes for the top entries. A thing to keep in mind is that the point of this competition is to build the UI for the Lenovo Smart Display. So a binary clock might not be exactly what they're going for, but here are a few other ideas that you might use to hopefully win this competition. One potential idea is to integrate text into your clock. So instead of showing the digits of 7:30, you would say it is half past 7.

So you just need to write a little dart algorithm that converts your timestamp into a human readable sentence. Another idea is to recreate the classic flip clock. This should be relatively easy to execute with Flutter animation and your own custom graphics. Also consider building a clock that adjusts its color gradient based on the time. So the color gradient will adjust every second becoming darker at night and brighter during the day.

Ultimately, I think the winning design will be something that is clean and modern that incorporates some animation. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and consider becoming a pro member at Fireship IO to get access to the full Flutter course and a bunch of other exclusive content. Thanks for watching, and I will talk to you soon.
Today, we're going to use Flutter to build a clock. And not just any ordinary clock, but a binary clock. Just a few days ago, the Flutter team launched a new competition where the goal is to build the most beautiful clock base. I don't plan on entering this competition myself, so this video is more of a quick start guide to get you started building your own clock from scratch. As you'll see in a few minutes, building a clock in Flutter is really easy. So, in order to make this video a little more challenging, I also want to teach you everything you didn't know about Binary.
And if you're entering the Flutter clock competition. Make sure to watch until the end of the video, because I'll be sharing additional clock ideas there that you're more than welcome to steal from me. If you're new here, like and subscribe, and you can grab the full source code from FireShip. Io. In order to build a binary clock, we need to know a little bit about how binary works. In mathematics, exabinarynumber is just a number that has 2 possible states, which we can represent as a 0 or a 1. You can think of this logically as true or false, electronically as on off. And in computer systems, we call a single binary value a bit. Now a single bit by itself can't represent very much, just two values to be precise. So how do we make bits represent more complex data? Well, we simply combine them together. When you combine bits together, it creates a geometric series where the number of different values we can represent is determined by 2 to the power of the number of bits that we have.
mathematics
games
logic
video gaming
So 2 to the power of 1 equals 2, which means we can represent 2 things. 2 to the power of 2 is 4, so we can represent 4 things with 2 bits. But when talking about bits, we usually think about them grouped in series of 8 which is a single byte.
mathematics
A byte would be 2 to the power of 8, which can represent 256 different things. Now the reason we call 8 bits a byte is somewhat arbitrary. It's just a good even number and contains enough space for all the letters of the alphabet and uppercase and lowercase.
For example, you may have heard of u t f 8, which stands for 8 bit unicode termination format. It encodes millions of different characters from languages around the world, including emojis, and does so by combining 1 to 4 8 bit bytes together. So So whenever you use Unicode characters in your code, which is all the time, each character is actually encoded to a binary value, and the computer uses that value to look in this giant table to figure out which character to actually show in the screen or the UI.
languages
programming
In fact, here's a cool little trick you can do in your Dart code. Start with a string, and then grab its actual character code from the utf8 table by calling codeunit@a given index in that string. That will give you a base 10 decimal by default. If you want to convert it to binary called 2 radix string with a base of 2. Radix is just another name for base, so it's taking the original base ten number that we normally use and converting it to a base 2 binary value. So that's how binary works at a high level, but how do we actually use the ones and zeros to represent more complex data? Like, how do we use binary to tell time? You can see we have 6 columns on the clock where each column is used to represent a digit in time. Blue shows the hours, green the minutes, and pink the seconds. The large colorful numbers represent the time and digits that you would be familiar with. And you'll see our Flutter clock is synced up with the actual device clock. Now each one of the cells or the intersection between a row and a column represents a bit. Notice how inside of every cell, we have a number. This is the actual value that that bit represents. So the bottom row represents ones, the second row represents twos, 3rd row fours and the top row eights. If none of the cells are highlighted, then it represents a 0. If there's just a single cell highlighted, then you can assume that it represents that number. But if you have multiple cells highlighted, then you get the value by adding them together. For example, if we look at the 1st column, we don't have any bits highlighted. So that means it's a 0. If we go to the next column, we have an 8 and a 1 highlighted. Add those together, and you get 9. Continue that process for all of the other columns, and that's how you read a binary clock. You'll notice that some of the columns have 4 rows, but others only have 2 or 3. You'll notice the column with 4 rows represents the one's position for hours, minutes, and seconds. We need 4 bits for these columns because their value can range from 0 to 9, and 4 bits allows us to represent 16 different values. But when it comes to seconds minutes, we only need to represent 6 values because a clock can only go up to 60 seconds or 60 minutes, and we can represent 6 values with 3 bits. And when it comes to hours, there's only 24 hours in a day, which means we only need to represent a 0, 1, or a 2, which we can do with 2 bits. So now that you know how a binary clock works, let's go ahead and build one from scratch with Flutter. Let's go ahead and get started from a new Flutter project.
If you're entering the competition, you can clone the repo from the contest homepage. We do have one dependency for our app, intl, so we'll go ahead and add that to the pubspec. Yaml. It's used for date formatting and localization of timestamps, which tends to be pretty useful if you're building a clock.
software development
software
Inside the main dot dart file. We'll go ahead and import dart async, dart math, and then we'll use system, chrome, and device orientation from the Flutter services package. The competition requires that the app is in landscape mode.
So in our main function, we'll go ahead and use system Chrome to set the preferred orientations to landscape left or landscape right. Then moving down to the app itself, we have a material app with some basic theme data, and then we have a scaffold whose body is the clock stateful widget.
animation
So the entire app will basically be coded inside of this stateful widget that we're giving a name of clock. The first thing we'll wanna do is make our clock tick every second. We'll set up a property name now which is equal to datetime dot now. This is actually the only state that we have on the widget. And the state will change every second for every tick of the clock. We can set that up during the init state life cycle hook where we set up a periodic timer with a duration of one second.
That gives us a callback function where we'll call setState to update the now value. Now because we're building a binary clock, I'm going to drachshund of the logic into my own custom class called Binary Time. This will take the logic of converting a timestamp to binary outside of the widget, which will make it a little easier to maintain and hopefully easier to read. What we actually want here for our UI is an array of strings where each string represents the ones and zeros needed to display a given column in the clock. We'll call that list binary integers and when this class is instantiated, we'll grab the timestamp and then we'll convert that timestamp to the hour, minutes, second format.
programming
Now by default, the hours, minutes, and seconds will be separated by a colon, which we don't need, and we can get rid of the colons by using replace all with an empty string. That will give us a string with a length of 6. And then we'll map each element first to an integer, into a radix string with a radix or base of 2. If you remember earlier, we talked about how binary values have a base of 2. Radix is just another name for the base. So what it's doing is taking this integer and converting it to a string of ones and zeros. I'd recommend playing around with this a little on DartPad. For example, you can take an integer and convert it to a radix string with a given base, or you can convert a string back to an integer by passing in a radix argument of 2. So unless you're some kind of psychopath who understands how to convert base 10 to base 2, I'd recommend playing around with this a little bit. The last thing I'm going to do is pad each of the binary integers with zeros on the left side if they don't exist. This just makes them easier to loop over when we get to the UI. And also to make our UI code a little more readable, I'm going to set up a getter for each of the positions in the clock. The clock represents time in a base ten system, So we have the hours 10 position, the hours 1 position, the minutes tens, and so on. So that's how we convert all of the base 10 digits in a clock to binary. Now we just need to loop over them and show a column in the UI for each of the binary values. So in our Stateful widget, we'll set up a container with a little bit of padding, Then we'll set up a row, and this row will contain 6 clock columns. The clock column will be a custom stateless widget that we'll build next. Instead of creating a loop here, I'm just adding each of the clock columns manually so we can adjust the title, the color, and the number of rows that are actually displayed. And each column takes a different binary integer based on the value of the clock that it's meant to represent. Now, each column will display 4 rows. So we'll go ahead and implement that logic in this stateless clock column widget. It will take a few input properties, so we can customize the title, color, and things like that, as well as the binary integer that it represents.
And one additional property called bits, which will just be an array of the values in the binary integer, which will contain 4 values of ones and zeros. Inside the build method, we'll go ahead and set up a column. We'll set the main axis alignment to space between, and then the first child of that column will be the title.
mathematics
Now the interesting part here is showing the active cells inside the column. We'll do that by looping over the 4 bits in the column. But one kind of annoying thing about Dart is that it does not allow us to access the index inside of a map operation. We can overcome this limitation by simply converting the list to a map, grabbing its entries, then we can set local variables for the value and the index. The cell is considered active if the bit equals 1. If it's 0, then it's inactive. You'll also notice in the UI that each individual cell shows the base ten value that that bit represents. So how do we convert a bit to a base ten integer? Well, if you remember from earlier, it's simply a power of 2. So we'll take the power of 2 and then raise it to 3 minus the index. We do 3 minus the index and not the index directly because we're actually looping in reverse here. We're starting with the highest value and then going down to the lowest value.
So that should be all the computation we need for the UI. So at this point, we'll go ahead and return an animated container, and then we'll set the duration to around 500 milliseconds just so we can animate the color when it goes from active to inactive. If we look at the box decoration for the container, you can see if it's active, we show the color that we passed as an input property.
animation
Otherwise, if the index is less than 4 minus the rows, then we'll go ahead and make that invisible by setting the opacity to 0. Otherwise, we'll go ahead and show a black or inactive cell. Then as the child of the animated container, we'll go ahead and show the actual binary value in base 10 and we'll give it some opacity just so it blends in with the existing cell color. Then down below the cells, I'll go ahead and use integer parse with a radix value of 2. This will convert the binary integer to a decimal in base ten format. And then down below that, we'll go ahead and show the binary integer itself in a smaller font size. And that's all there is to it. We now have a fully functional binary clock built with Flutter. My hope with this video is that someone watches it, builds their own clock in Flutter, and wins the competition, and there's some pretty decent prizes for the top entries.
A thing to keep in mind is that the point of this competition is to build the UI for the Lenovo Smart Display. So a binary clock might not be exactly what they're going for, but here are a few other ideas that you might use to hopefully win this competition.
electronics
One potential idea is to integrate text into your clock. So instead of showing the digits of 7:30, you would say it is half past 7.
So you just need to write a little dart algorithm that converts your timestamp into a human readable sentence. Another idea is to recreate the classic flip clock. This should be relatively easy to execute with Flutter animation and your own custom graphics. Also consider building a clock that adjusts its color gradient based on the time. So the color gradient will adjust every second becoming darker at night and brighter during the day. Ultimately, I think the winning design will be something that is clean and modern that incorporates some animation. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and consider becoming a pro member at Fireship IO to get access to the full Flutter course and a bunch of other exclusive content. Thanks for watching, and I will talk to you soon.
youtube
animation
video gaming
streaming
graphic design
Today, we're going to use Flutter to build a clock. And not just any ordinary clock, but a binary clock. Just a few days ago, the Flutter team launched a new competition where the goal is to build the most beautiful clock base. I don't plan on entering this competition myself, so this video is more of a quick start guide to get you started building your own clock from scratch. As you'll see in a few minutes, building a clock in Flutter is really easy. So, in order to make this video a little more challenging, I also want to teach you everything you didn't know about Binary. And if you're entering the Flutter clock competition. Make sure to watch until the end of the video, because I'll be sharing additional clock ideas there that you're more than welcome to steal from me. If you're new here, like and subscribe, and you can grab the full source code from FireShip. Io. In order to build a binary clock, we need to know a little bit about how binary works. In mathematics, exabinarynumber is just a number that has 2 possible states, which we can represent as a 0 or a 1. You can think of this logically as true or false, electronically as on off. And in computer systems, we call a single binary value a bit. Now a single bit by itself can't represent very much, just two values to be precise. So how do we make bits represent more complex data? Well, we simply combine them together. When you combine bits together, it creates a geometric series where the number of different values we can represent is determined by 2 to the power of the number of bits that we have. So 2 to the power of 1 equals 2, which means we can represent 2 things. 2 to the power of 2 is 4, so we can represent 4 things with 2 bits. But when talking about bits, we usually think about them grouped in series of 8 which is a single byte. A byte would be 2 to the power of 8, which can represent 256 different things. Now the reason we call 8 bits a byte is somewhat arbitrary. It's just a good even number and contains enough space for all the letters of the alphabet and uppercase and lowercase. For example, you may have heard of u t f 8, which stands for 8 bit unicode termination format. It encodes millions of different characters from languages around the world, including emojis, and does so by combining 1 to 4 8 bit bytes together. So So whenever you use Unicode characters in your code, which is all the time, each character is actually encoded to a binary value, and the computer uses that value to look in this giant table to figure out which character to actually show in the screen or the UI. In fact, here's a cool little trick you can do in your Dart code. Start with a string, and then grab its actual character code from the utf8 table by calling codeunit@a given index in that string. That will give you a base 10 decimal by default. If you want to convert it to binary called 2 radix string with a base of 2. Radix is just another name for base, so it's taking the original base ten number that we normally use and converting it to a base 2 binary value. So that's how binary works at a high level, but how do we actually use the ones and zeros to represent more complex data? Like, how do we use binary to tell time? You can see we have 6 columns on the clock where each column is used to represent a digit in time. Blue shows the hours, green the minutes, and pink the seconds. The large colorful numbers represent the time and digits that you would be familiar with. And you'll see our Flutter clock is synced up with the actual device clock. Now each one of the cells or the intersection between a row and a column represents a bit. Notice how inside of every cell, we have a number. This is the actual value that that bit represents. So the bottom row represents ones, the second row represents twos, 3rd row fours and the top row eights. If none of the cells are highlighted, then it represents a 0. If there's just a single cell highlighted, then you can assume that it represents that number. But if you have multiple cells highlighted, then you get the value by adding them together. For example, if we look at the 1st column, we don't have any bits highlighted. So that means it's a 0. If we go to the next column, we have an 8 and a 1 highlighted. Add those together, and you get 9. Continue that process for all of the other columns, and that's how you read a binary clock. You'll notice that some of the columns have 4 rows, but others only have 2 or 3. You'll notice the column with 4 rows represents the one's position for hours, minutes, and seconds. We need 4 bits for these columns because their value can range from 0 to 9, and 4 bits allows us to represent 16 different values. But when it comes to seconds minutes, we only need to represent 6 values because a clock can only go up to 60 seconds or 60 minutes, and we can represent 6 values with 3 bits. And when it comes to hours, there's only 24 hours in a day, which means we only need to represent a 0, 1, or a 2, which we can do with 2 bits. So now that you know how a binary clock works, let's go ahead and build one from scratch with Flutter. Let's go ahead and get started from a new Flutter project. If you're entering the competition, you can clone the repo from the contest homepage. We do have one dependency for our app, intl, so we'll go ahead and add that to the pubspec. Yaml. It's used for date formatting and localization of timestamps, which tends to be pretty useful if you're building a clock. Inside the main dot dart file. We'll go ahead and import dart async, dart math, and then we'll use system, chrome, and device orientation from the Flutter services package. The competition requires that the app is in landscape mode. So in our main function, we'll go ahead and use system Chrome to set the preferred orientations to landscape left or landscape right. Then moving down to the app itself, we have a material app with some basic theme data, and then we have a scaffold whose body is the clock stateful widget. So the entire app will basically be coded inside of this stateful widget that we're giving a name of clock. The first thing we'll wanna do is make our clock tick every second. We'll set up a property name now which is equal to datetime dot now. This is actually the only state that we have on the widget. And the state will change every second for every tick of the clock. We can set that up during the init state life cycle hook where we set up a periodic timer with a duration of one second. That gives us a callback function where we'll call setState to update the now value. Now because we're building a binary clock, I'm going to drachshund of the logic into my own custom class called Binary Time. This will take the logic of converting a timestamp to binary outside of the widget, which will make it a little easier to maintain and hopefully easier to read. What we actually want here for our UI is an array of strings where each string represents the ones and zeros needed to display a given column in the clock. We'll call that list binary integers and when this class is instantiated, we'll grab the timestamp and then we'll convert that timestamp to the hour, minutes, second format. Now by default, the hours, minutes, and seconds will be separated by a colon, which we don't need, and we can get rid of the colons by using replace all with an empty string. That will give us a string with a length of 6. And then we'll map each element first to an integer, into a radix string with a radix or base of 2. If you remember earlier, we talked about how binary values have a base of 2. Radix is just another name for the base. So what it's doing is taking this integer and converting it to a string of ones and zeros. I'd recommend playing around with this a little on DartPad. For example, you can take an integer and convert it to a radix string with a given base, or you can convert a string back to an integer by passing in a radix argument of 2. So unless you're some kind of psychopath who understands how to convert base 10 to base 2, I'd recommend playing around with this a little bit. The last thing I'm going to do is pad each of the binary integers with zeros on the left side if they don't exist. This just makes them easier to loop over when we get to the UI. And also to make our UI code a little more readable, I'm going to set up a getter for each of the positions in the clock. The clock represents time in a base ten system, So we have the hours 10 position, the hours 1 position, the minutes tens, and so on. So that's how we convert all of the base 10 digits in a clock to binary. Now we just need to loop over them and show a column in the UI for each of the binary values. So in our Stateful widget, we'll set up a container with a little bit of padding, Then we'll set up a row, and this row will contain 6 clock columns. The clock column will be a custom stateless widget that we'll build next. Instead of creating a loop here, I'm just adding each of the clock columns manually so we can adjust the title, the color, and the number of rows that are actually displayed. And each column takes a different binary integer based on the value of the clock that it's meant to represent. Now, each column will display 4 rows. So we'll go ahead and implement that logic in this stateless clock column widget. It will take a few input properties, so we can customize the title, color, and things like that, as well as the binary integer that it represents. And one additional property called bits, which will just be an array of the values in the binary integer, which will contain 4 values of ones and zeros. Inside the build method, we'll go ahead and set up a column. We'll set the main axis alignment to space between, and then the first child of that column will be the title. Now the interesting part here is showing the active cells inside the column. We'll do that by looping over the 4 bits in the column. But one kind of annoying thing about Dart is that it does not allow us to access the index inside of a map operation. We can overcome this limitation by simply converting the list to a map, grabbing its entries, then we can set local variables for the value and the index. The cell is considered active if the bit equals 1. If it's 0, then it's inactive. You'll also notice in the UI that each individual cell shows the base ten value that that bit represents. So how do we convert a bit to a base ten integer? Well, if you remember from earlier, it's simply a power of 2. So we'll take the power of 2 and then raise it to 3 minus the index. We do 3 minus the index and not the index directly because we're actually looping in reverse here. We're starting with the highest value and then going down to the lowest value. So that should be all the computation we need for the UI. So at this point, we'll go ahead and return an animated container, and then we'll set the duration to around 500 milliseconds just so we can animate the color when it goes from active to inactive. If we look at the box decoration for the container, you can see if it's active, we show the color that we passed as an input property. Otherwise, if the index is less than 4 minus the rows, then we'll go ahead and make that invisible by setting the opacity to 0. Otherwise, we'll go ahead and show a black or inactive cell. Then as the child of the animated container, we'll go ahead and show the actual binary value in base 10 and we'll give it some opacity just so it blends in with the existing cell color. Then down below the cells, I'll go ahead and use integer parse with a radix value of 2. This will convert the binary integer to a decimal in base ten format. And then down below that, we'll go ahead and show the binary integer itself in a smaller font size. And that's all there is to it. We now have a fully functional binary clock built with Flutter. My hope with this video is that someone watches it, builds their own clock in Flutter, and wins the competition, and there's some pretty decent prizes for the top entries. A thing to keep in mind is that the point of this competition is to build the UI for the Lenovo Smart Display. So a binary clock might not be exactly what they're going for, but here are a few other ideas that you might use to hopefully win this competition. One potential idea is to integrate text into your clock. So instead of showing the digits of 7:30, you would say it is half past 7. So you just need to write a little dart algorithm that converts your timestamp into a human readable sentence. Another idea is to recreate the classic flip clock. This should be relatively easy to execute with Flutter animation and your own custom graphics. Also consider building a clock that adjusts its color gradient based on the time. So the color gradient will adjust every second becoming darker at night and brighter during the day. Ultimately, I think the winning design will be something that is clean and modern that incorporates some animation. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and consider becoming a pro member at Fireship IO to get access to the full Flutter course and a bunch of other exclusive content. Thanks for watching, and I will talk to you soon.
Today,
today
we're
we're
going
going
to
to
use
use
Flutter
flutter
to
to
build
build
a
a
clock.
clock
And
and
not
not
just
just
any
any
ordinary
ordinary
clock,
clock
but
but
a
a
binary
binary
clock.
clock
Just
just
a
a
few
few
days
days
ago,
ago
the
the
Flutter
flutter
team
team
launched
launched
a
a
new
new
competition
competition
where
where
the
the
goal
goal
is
is
to
to
build
build
the
the
most
most
beautiful
beautiful
clock
clock
base.
base
I
i
don't
don't
plan
plan
on
on
entering
entering
this
this
competition
competition
myself,
myself
so
so
this
this
video
video
is
is
more
more
of
of
a
a
quick
quick
start
start
guide
guide
to
to
get
get
you
you
started
started
building
building
your
your
own
own
clock
clock
from
from
scratch.
scratch
As
as
you'll
you'll
see
see
in
in
a
a
few
few
minutes,
minutes
building
building
a
a
clock
clock
in
in
Flutter
flutter
is
is
really
really
easy.
easy
So,
so
in
in
order
order
to
to
make
make
this
this
video
video
a
a
little
little
more
more
challenging,
challenging
I
i
also
also
want
want
to
to
teach
teach
you
you
everything
everything
you
you
didn't
didn't
know
know
about
about
Binary.
binary
And
and
if
if
you're
you're
entering
entering
the
the
Flutter
flutter
clock
clock
competition.
competition
Make
make
sure
sure
to
to
watch
watch
until
until
the
the
end
end
of
of
the
the
video,
video
because
because
I'll
i'll
be
be
sharing
sharing
additional
additional
clock
clock
ideas
ideas
there
there
that
that
you're
you're
more
more
than
than
welcome
welcome
to
to
steal
steal
from
from
me.
me
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
grab
grab
the
the
full
full
source
source
code
code
from
from
FireShip.
fireship
Io.
io
In
in
order
order
to
to
build
build
a
a
binary
binary
clock,
clock
we
we
need
need
to
to
know
know
a
a
little
little
bit
bit
about
about
how
how
binary
binary
works.
works
In
in
mathematics,
mathematics
exabinarynumber
exabinarynumber
is
is
just
just
a
a
number
number
that
that
has
has
2
2
possible
possible
states,
states
which
which
we
we
can
can
represent
represent
as
as
a
a
0
0
or
or
a
a
1.
1
You
you
can
can
think
think
of
of
this
this
logically
logically
as
as
true
true
or
or
false,
false
electronically
electronically
as
as
on
on
off.
off
And
and
in
in
computer
computer
systems,
systems
we
we
call
call
a
a
single
single
binary
binary
value
value
a
a
bit.
bit
Now
now
a
a
single
single
bit
bit
by
by
itself
itself
can't
can't
represent
represent
very
very
much,
much
just
just
two
two
values
values
to
to
be
be
precise.
precise
So
so
how
how
do
do
we
we
make
make
bits
bits
represent
represent
more
more
complex
complex
data?
data
Well,
well
we
we
simply
simply
combine
combine
them
them
together.
together
When
when
you
you
combine
combine
bits
bits
together,
together
it
it
creates
creates
a
a
geometric
geometric
series
series
where
where
the
the
number
number
of
of
different
different
values
values
we
we
can
can
represent
represent
is
is
determined
determined
by
by
2
2
to
to
the
the
power
power
of
of
the
the
number
number
of
of
bits
bits
that
that
we
we
have.
have
So
so
2
2
to
to
the
the
power
power
of
of
1
1
equals
equals
2,
2
which
which
means
means
we
we
can
can
represent
represent
2
2
things.
things
2
2
to
to
the
the
power
power
of
of
2
2
is
is
4,
4
so
so
we
we
can
can
represent
represent
4
4
things
things
with
with
2
2
bits.
bits
But
but
when
when
talking
talking
about
about
bits,
bits
we
we
usually
usually
think
think
about
about
them
them
grouped
grouped
in
in
series
series
of
of
8
8
which
which
is
is
a
a
single
single
byte.
byte
A
a
byte
byte
would
would
be
be
2
2
to
to
the
the
power
power
of
of
8,
8
which
which
can
can
represent
represent
256
256
different
different
things.
things
Now
now
the
the
reason
reason
we
we
call
call
8
8
bits
bits
a
a
byte
byte
is
is
somewhat
somewhat
arbitrary.
arbitrary
It's
it's
just
just
a
a
good
good
even
even
number
number
and
and
contains
contains
enough
enough
space
space
for
for
all
all
the
the
letters
letters
of
of
the
the
alphabet
alphabet
and
and
uppercase
uppercase
and
and
lowercase.
lowercase
For
for
example,
example
you
you
may
may
have
have
heard
heard
of
of
u
u
t
t
f
f
8,
8
which
which
stands
stands
for
for
8
8
bit
bit
unicode
unicode
termination
termination
format.
format
It
it
encodes
encodes
millions
millions
of
of
different
different
characters
characters
from
from
languages
languages
around
around
the
the
world,
world
including
including
emojis,
emojis
and
and
does
does
so
so
by
by
combining
combining
1
1
to
to
4
4
8
8
bit
bit
bytes
bytes
together.
together
So
so
So
so
whenever
whenever
you
you
use
use
Unicode
unicode
characters
characters
in
in
your
your
code,
code
which
which
is
is
all
all
the
the
time,
time
each
each
character
character
is
is
actually
actually
encoded
encoded
to
to
a
a
binary
binary
value,
value
and
and
the
the
computer
computer
uses
uses
that
that
value
value
to
to
look
look
in
in
this
this
giant
giant
table
table
to
to
figure
figure
out
out
which
which
character
character
to
to
actually
actually
show
show
in
in
the
the
screen
screen
or
or
the
the
UI.
ui
In
in
fact,
fact
here's
here's
a
a
cool
cool
little
little
trick
trick
you
you
can
can
do
do
in
in
your
your
Dart
dart
code.
code
Start
start
with
with
a
a
string,
string
and
and
then
then
grab
grab
its
its
actual
actual
character
character
code
code
from
from
the
the
utf8
utf8
table
table
by
by
calling
calling
codeunit@a
codeunit@a
given
given
index
index
in
in
that
that
string.
string
That
that
will
will
give
give
you
you
a
a
base
base
10
10
decimal
decimal
by
by
default.
default
If
if
you
you
want
want
to
to
convert
convert
it
it
to
to
binary
binary
called
called
2
2
radix
radix
string
string
with
with
a
a
base
base
of
of
2.
2
Radix
radix
is
is
just
just
another
another
name
name
for
for
base,
base
so
so
it's
it's
taking
taking
the
the
original
original
base
base
ten
ten
number
number
that
that
we
we
normally
normally
use
use
and
and
converting
converting
it
it
to
to
a
a
base
base
2
2
binary
binary
value.
value
So
so
that's
that's
how
how
binary
binary
works
works
at
at
a
a
high
high
level,
level
but
but
how
how
do
do
we
we
actually
actually
use
use
the
the
ones
ones
and
and
zeros
zeros
to
to
represent
represent
more
more
complex
complex
data?
data
Like,
like
how
how
do
do
we
we
use
use
binary
binary
to
to
tell
tell
time?
time
You
you
can
can
see
see
we
we
have
have
6
6
columns
columns
on
on
the
the
clock
clock
where
where
each
each
column
column
is
is
used
used
to
to
represent
represent
a
a
digit
digit
in
in
time.
time
Blue
blue
shows
shows
the
the
hours,
hours
green
green
the
the
minutes,
minutes
and
and
pink
pink
the
the
seconds.
seconds
The
the
large
large
colorful
colorful
numbers
numbers
represent
represent
the
the
time
time
and
and
digits
digits
that
that
you
you
would
would
be
be
familiar
familiar
with.
with
And
and
you'll
you'll
see
see
our
our
Flutter
flutter
clock
clock
is
is
synced
synced
up
up
with
with
the
the
actual
actual
device
device
clock.
clock
Now
now
each
each
one
one
of
of
the
the
cells
cells
or
or
the
the
intersection
intersection
between
between
a
a
row
row
and
and
a
a
column
column
represents
represents
a
a
bit.
bit
Notice
notice
how
how
inside
inside
of
of
every
every
cell,
cell
we
we
have
have
a
a
number.
number
This
this
is
is
the
the
actual
actual
value
value
that
that
that
that
bit
bit
represents.
represents
So
so
the
the
bottom
bottom
row
row
represents
represents
ones,
ones
the
the
second
second
row
row
represents
represents
twos,
twos
3rd
3rd
row
row
fours
fours
and
and
the
the
top
top
row
row
eights.
eights
If
if
none
none
of
of
the
the
cells
cells
are
are
highlighted,
highlighted
then
then
it
it
represents
represents
a
a
0.
0
If
if
there's
there's
just
just
a
a
single
single
cell
cell
highlighted,
highlighted
then
then
you
you
can
can
assume
assume
that
that
it
it
represents
represents
that
that
number.
number
But
but
if
if
you
you
have
have
multiple
multiple
cells
cells
highlighted,
highlighted
then
then
you
you
get
get
the
the
value
value
by
by
adding
adding
them
them
together.
together
For
for
example,
example
if
if
we
we
look
look
at
at
the
the
1st
1st
column,
column
we
we
don't
don't
have
have
any
any
bits
bits
highlighted.
highlighted
So
so
that
that
means
means
it's
it's
a
a
0.
0
If
if
we
we
go
go
to
to
the
the
next
next
column,
column
we
we
have
have
an
an
8
8
and
and
a
a
1
1
highlighted.
highlighted
Add
add
those
those
together,
together
and
and
you
you
get
get
9.
9
Continue
continue
that
that
process
process
for
for
all
all
of
of
the
the
other
other
columns,
columns
and
and
that's
that's
how
how
you
you
read
read
a
a
binary
binary
clock.
clock
You'll
you'll
notice
notice
that
that
some
some
of
of
the
the
columns
columns
have
have
4
4
rows,
rows
but
but
others
others
only
only
have
have
2
2
or
or
3.
3
You'll
you'll
notice
notice
the
the
column
column
with
with
4
4
rows
rows
represents
represents
the
the
one's
one's
position
position
for
for
hours,
hours
minutes,
minutes
and
and
seconds.
seconds
We
we
need
need
4
4
bits
bits
for
for
these
these
columns
columns
because
because
their
their
value
value
can
can
range
range
from
from
0
0
to
to
9,
9
and
and
4
4
bits
bits
allows
allows
us
us
to
to
represent
represent
16
16
different
different
values.
values
But
but
when
when
it
it
comes
comes
to
to
seconds
seconds
minutes,
minutes
we
we
only
only
need
need
to
to
represent
represent
6
6
values
values
because
because
a
a
clock
clock
can
can
only
only
go
go
up
up
to
to
60
60
seconds
seconds
or
or
60
60
minutes,
minutes
and
and
we
we
can
can
represent
represent
6
6
values
values
with
with
3
3
bits.
bits
And
and
when
when
it
it
comes
comes
to
to
hours,
hours
there's
there's
only
only
24
24
hours
hours
in
in
a
a
day,
day
which
which
means
means
we
we
only
only
need
need
to
to
represent
represent
a
a
0,
0
1,
1
or
or
a
a
2,
2
which
which
we
we
can
can
do
do
with
with
2
2
bits.
bits
So
so
now
now
that
that
you
you
know
know
how
how
a
a
binary
binary
clock
clock
works,
works
let's
let's
go
go
ahead
ahead
and
and
build
build
one
one
from
from
scratch
scratch
with
with
Flutter.
flutter
Let's
let's
go
go
ahead
ahead
and
and
get
get
started
started
from
from
a
a
new
new
Flutter
flutter
project.
project
If
if
you're
you're
entering
entering
the
the
competition,
competition
you
you
can
can
clone
clone
the
the
repo
repo
from
from
the
the
contest
contest
homepage.
homepage
We
we
do
do
have
have
one
one
dependency
dependency
for
for
our
our
app,
app
intl,
intl
so
so
we'll
we'll
go
go
ahead
ahead
and
and
add
add
that
that
to
to
the
the
pubspec.
pubspec
Yaml.
yaml
It's
it's
used
used
for
for
date
date
formatting
formatting
and
and
localization
localization
of
of
timestamps,
timestamps
which
which
tends
tends
to
to
be
be
pretty
pretty
useful
useful
if
if
you're
you're
building
building
a
a
clock.
clock
Inside
inside
the
the
main
main
dot
dot
dart
dart
file.
file
We'll
we'll
go
go
ahead
ahead
and
and
import
import
dart
dart
async,
async
dart
dart
math,
math
and
and
then
then
we'll
we'll
use
use
system,
system
chrome,
chrome
and
and
device
device
orientation
orientation
from
from
the
the
Flutter
flutter
services
services
package.
package
The
the
competition
competition
requires
requires
that
that
the
the
app
app
is
is
in
in
landscape
landscape
mode.
mode
So
so
in
in
our
our
main
main
function,
function
we'll
we'll
go
go
ahead
ahead
and
and
use
use
system
system
Chrome
chrome
to
to
set
set
the
the
preferred
preferred
orientations
orientations
to
to
landscape
landscape
left
left
or
or
landscape
landscape
right.
right
Then
then
moving
moving
down
down
to
to
the
the
app
app
itself,
itself
we
we
have
have
a
a
material
material
app
app
with
with
some
some
basic
basic
theme
theme
data,
data
and
and
then
then
we
we
have
have
a
a
scaffold
scaffold
whose
whose
body
body
is
is
the
the
clock
clock
stateful
stateful
widget.
widget
So
so
the
the
entire
entire
app
app
will
will
basically
basically
be
be
coded
coded
inside
inside
of
of
this
this
stateful
stateful
widget
widget
that
that
we're
we're
giving
giving
a
a
name
name
of
of
clock.
clock
The
the
first
first
thing
thing
we'll
we'll
wanna
wanna
do
do
is
is
make
make
our
our
clock
clock
tick
tick
every
every
second.
second
We'll
we'll
set
set
up
up
a
a
property
property
name
name
now
now
which
which
is
is
equal
equal
to
to
datetime
datetime
dot
dot
now.
now
This
this
is
is
actually
actually
the
the
only
only
state
state
that
that
we
we
have
have
on
on
the
the
widget.
widget
And
and
the
the
state
state
will
will
change
change
every
every
second
second
for
for
every
every
tick
tick
of
of
the
the
clock.
clock
We
we
can
can
set
set
that
that
up
up
during
during
the
the
init
init
state
state
life
life
cycle
cycle
hook
hook
where
where
we
we
set
set
up
up
a
a
periodic
periodic
timer
timer
with
with
a
a
duration
duration
of
of
one
one
second.
second
That
that
gives
gives
us
us
a
a
callback
callback
function
function
where
where
we'll
we'll
call
call
setState
setstate
to
to
update
update
the
the
now
now
value.
value
Now
now
because
because
we're
we're
building
building
a
a
binary
binary
clock,
clock
I'm
i'm
going
going
to
to
drachshund
drachshund
of
of
the
the
logic
logic
into
into
my
my
own
own
custom
custom
class
class
called
called
Binary
binary
Time.
time
This
this
will
will
take
take
the
the
logic
logic
of
of
converting
converting
a
a
timestamp
timestamp
to
to
binary
binary
outside
outside
of
of
the
the
widget,
widget
which
which
will
will
make
make
it
it
a
a
little
little
easier
easier
to
to
maintain
maintain
and
and
hopefully
hopefully
easier
easier
to
to
read.
read
What
what
we
we
actually
actually
want
want
here
here
for
for
our
our
UI
ui
is
is
an
an
array
array
of
of
strings
strings
where
where
each
each
string
string
represents
represents
the
the
ones
ones
and
and
zeros
zeros
needed
needed
to
to
display
display
a
a
given
given
column
column
in
in
the
the
clock.
clock
We'll
we'll
call
call
that
that
list
list
binary
binary
integers
integers
and
and
when
when
this
this
class
class
is
is
instantiated,
instantiated
we'll
we'll
grab
grab
the
the
timestamp
timestamp
and
and
then
then
we'll
we'll
convert
convert
that
that
timestamp
timestamp
to
to
the
the
hour,
hour
minutes,
minutes
second
second
format.
format
Now
now
by
by
default,
default
the
the
hours,
hours
minutes,
minutes
and
and
seconds
seconds
will
will
be
be
separated
separated
by
by
a
a
colon,
colon
which
which
we
we
don't
don't
need,
need
and
and
we
we
can
can
get
get
rid
rid
of
of
the
the
colons
colons
by
by
using
using
replace
replace
all
all
with
with
an
an
empty
empty
string.
string
That
that
will
will
give
give
us
us
a
a
string
string
with
with
a
a
length
length
of
of
6.
6
And
and
then
then
we'll
we'll
map
map
each
each
element
element
first
first
to
to
an
an
integer,
integer
into
into
a
a
radix
radix
string
string
with
with
a
a
radix
radix
or
or
base
base
of
of
2.
2
If
if
you
you
remember
remember
earlier,
earlier
we
we
talked
talked
about
about
how
how
binary
binary
values
values
have
have
a
a
base
base
of
of
2.
2
Radix
radix
is
is
just
just
another
another
name
name
for
for
the
the
base.
base
So
so
what
what
it's
it's
doing
doing
is
is
taking
taking
this
this
integer
integer
and
and
converting
converting
it
it
to
to
a
a
string
string
of
of
ones
ones
and
and
zeros.
zeros
I'd
i'd
recommend
recommend
playing
playing
around
around
with
with
this
this
a
a
little
little
on
on
DartPad.
dartpad
For
for
example,
example
you
you
can
can
take
take
an
an
integer
integer
and
and
convert
convert
it
it
to
to
a
a
radix
radix
string
string
with
with
a
a
given
given
base,
base
or
or
you
you
can
can
convert
convert
a
a
string
string
back
back
to
to
an
an
integer
integer
by
by
passing
passing
in
in
a
a
radix
radix
argument
argument
of
of
2.
2
So
so
unless
unless
you're
you're
some
some
kind
kind
of
of
psychopath
psychopath
who
who
understands
understands
how
how
to
to
convert
convert
base
base
10
10
to
to
base
base
2,
2
I'd
i'd
recommend
recommend
playing
playing
around
around
with
with
this
this
a
a
little
little
bit.
bit
The
the
last
last
thing
thing
I'm
i'm
going
going
to
to
do
do
is
is
pad
pad
each
each
of
of
the
the
binary
binary
integers
integers
with
with
zeros
zeros
on
on
the
the
left
left
side
side
if
if
they
they
don't
don't
exist.
exist
This
this
just
just
makes
makes
them
them
easier
easier
to
to
loop
loop
over
over
when
when
we
we
get
get
to
to
the
the
UI.
ui
And
and
also
also
to
to
make
make
our
our
UI
ui
code
code
a
a
little
little
more
more
readable,
readable
I'm
i'm
going
going
to
to
set
set
up
up
a
a
getter
getter
for
for
each
each
of
of
the
the
positions
positions
in
in
the
the
clock.
clock
The
the
clock
clock
represents
represents
time
time
in
in
a
a
base
base
ten
ten
system,
system
So
so
we
we
have
have
the
the
hours
hours
10
10
position,
position
the
the
hours
hours
1
1
position,
position
the
the
minutes
minutes
tens,
tens
and
and
so
so
on.
on
So
so
that's
that's
how
how
we
we
convert
convert
all
all
of
of
the
the
base
base
10
10
digits
digits
in
in
a
a
clock
clock
to
to
binary.
binary
Now
now
we
we
just
just
need
need
to
to
loop
loop
over
over
them
them
and
and
show
show
a
a
column
column
in
in
the
the
UI
ui
for
for
each
each
of
of
the
the
binary
binary
values.
values
So
so
in
in
our
our
Stateful
stateful
widget,
widget
we'll
we'll
set
set
up
up
a
a
container
container
with
with
a
a
little
little
bit
bit
of
of
padding,
padding
Then
then
we'll
we'll
set
set
up
up
a
a
row,
row
and
and
this
this
row
row
will
will
contain
contain
6
6
clock
clock
columns.
columns
The
the
clock
clock
column
column
will
will
be
be
a
a
custom
custom
stateless
stateless
widget
widget
that
that
we'll
we'll
build
build
next.
next
Instead
instead
of
of
creating
creating
a
a
loop
loop
here,
here
I'm
i'm
just
just
adding
adding
each
each
of
of
the
the
clock
clock
columns
columns
manually
manually
so
so
we
we
can
can
adjust
adjust
the
the
title,
title
the
the
color,
color
and
and
the
the
number
number
of
of
rows
rows
that
that
are
are
actually
actually
displayed.
displayed
And
and
each
each
column
column
takes
takes
a
a
different
different
binary
binary
integer
integer
based
based
on
on
the
the
value
value
of
of
the
the
clock
clock
that
that
it's
it's
meant
meant
to
to
represent.
represent
Now,
now
each
each
column
column
will
will
display
display
4
4
rows.
rows
So
so
we'll
we'll
go
go
ahead
ahead
and
and
implement
implement
that
that
logic
logic
in
in
this
this
stateless
stateless
clock
clock
column
column
widget.
widget
It
it
will
will
take
take
a
a
few
few
input
input
properties,
properties
so
so
we
we
can
can
customize
customize
the
the
title,
title
color,
color
and
and
things
things
like
like
that,
that
as
as
well
well
as
as
the
the
binary
binary
integer
integer
that
that
it
it
represents.
represents
And
and
one
one
additional
additional
property
property
called
called
bits,
bits
which
which
will
will
just
just
be
be
an
an
array
array
of
of
the
the
values
values
in
in
the
the
binary
binary
integer,
integer
which
which
will
will
contain
contain
4
4
values
values
of
of
ones
ones
and
and
zeros.
zeros
Inside
inside
the
the
build
build
method,
method
we'll
we'll
go
go
ahead
ahead
and
and
set
set
up
up
a
a
column.
column
We'll
we'll
set
set
the
the
main
main
axis
axis
alignment
alignment
to
to
space
space
between,
between
and
and
then
then
the
the
first
first
child
child
of
of
that
that
column
column
will
will
be
be
the
the
title.
title
Now
now
the
the
interesting
interesting
part
part
here
here
is
is
showing
showing
the
the
active
active
cells
cells
inside
inside
the
the
column.
column
We'll
we'll
do
do
that
that
by
by
looping
looping
over
over
the
the
4
4
bits
bits
in
in
the
the
column.
column
But
but
one
one
kind
kind
of
of
annoying
annoying
thing
thing
about
about
Dart
dart
is
is
that
that
it
it
does
does
not
not
allow
allow
us
us
to
to
access
access
the
the
index
index
inside
inside
of
of
a
a
map
map
operation.
operation
We
we
can
can
overcome
overcome
this
this
limitation
limitation
by
by
simply
simply
converting
converting
the
the
list
list
to
to
a
a
map,
map
grabbing
grabbing
its
its
entries,
entries
then
then
we
we
can
can
set
set
local
local
variables
variables
for
for
the
the
value
value
and
and
the
the
index.
index
The
the
cell
cell
is
is
considered
considered
active
active
if
if
the
the
bit
bit
equals
equals
1.
1
If
if
it's
it's
0,
0
then
then
it's
it's
inactive.
inactive
You'll
you'll
also
also
notice
notice
in
in
the
the
UI
ui
that
that
each
each
individual
individual
cell
cell
shows
shows
the
the
base
base
ten
ten
value
value
that
that
that
that
bit
bit
represents.
represents
So
so
how
how
do
do
we
we
convert
convert
a
a
bit
bit
to
to
a
a
base
base
ten
ten
integer?
integer
Well,
well
if
if
you
you
remember
remember
from
from
earlier,
earlier
it's
it's
simply
simply
a
a
power
power
of
of
2.
2
So
so
we'll
we'll
take
take
the
the
power
power
of
of
2
2
and
and
then
then
raise
raise
it
it
to
to
3
3
minus
minus
the
the
index.
index
We
we
do
do
3
3
minus
minus
the
the
index
index
and
and
not
not
the
the
index
index
directly
directly
because
because
we're
we're
actually
actually
looping
looping
in
in
reverse
reverse
here.
here
We're
we're
starting
starting
with
with
the
the
highest
highest
value
value
and
and
then
then
going
going
down
down
to
to
the
the
lowest
lowest
value.
value
So
so
that
that
should
should
be
be
all
all
the
the
computation
computation
we
we
need
need
for
for
the
the
UI.
ui
So
so
at
at
this
this
point,
point
we'll
we'll
go
go
ahead
ahead
and
and
return
return
an
an
animated
animated
container,
container
and
and
then
then
we'll
we'll
set
set
the
the
duration
duration
to
to
around
around
500
500
milliseconds
milliseconds
just
just
so
so
we
we
can
can
animate
animate
the
the
color
color
when
when
it
it
goes
goes
from
from
active
active
to
to
inactive.
inactive
If
if
we
we
look
look
at
at
the
the
box
box
decoration
decoration
for
for
the
the
container,
container
you
you
can
can
see
see
if
if
it's
it's
active,
active
we
we
show
show
the
the
color
color
that
that
we
we
passed
passed
as
as
an
an
input
input
property.
property
Otherwise,
otherwise
if
if
the
the
index
index
is
is
less
less
than
than
4
4
minus
minus
the
the
rows,
rows
then
then
we'll
we'll
go
go
ahead
ahead
and
and
make
make
that
that
invisible
invisible
by
by
setting
setting
the
the
opacity
opacity
to
to
0.
0
Otherwise,
otherwise
we'll
we'll
go
go
ahead
ahead
and
and
show
show
a
a
black
black
or
or
inactive
inactive
cell.
cell
Then
then
as
as
the
the
child
child
of
of
the
the
animated
animated
container,
container
we'll
we'll
go
go
ahead
ahead
and
and
show
show
the
the
actual
actual
binary
binary
value
value
in
in
base
base
10
10
and
and
we'll
we'll
give
give
it
it
some
some
opacity
opacity
just
just
so
so
it
it
blends
blends
in
in
with
with
the
the
existing
existing
cell
cell
color.
color
Then
then
down
down
below
below
the
the
cells,
cells
I'll
i'll
go
go
ahead
ahead
and
and
use
use
integer
integer
parse
parse
with
with
a
a
radix
radix
value
value
of
of
2.
2
This
this
will
will
convert
convert
the
the
binary
binary
integer
integer
to
to
a
a
decimal
decimal
in
in
base
base
ten
ten
format.
format
And
and
then
then
down
down
below
below
that,
that
we'll
we'll
go
go
ahead
ahead
and
and
show
show
the
the
binary
binary
integer
integer
itself
itself
in
in
a
a
smaller
smaller
font
font
size.
size
And
and
that's
that's
all
all
there
there
is
is
to
to
it.
it
We
we
now
now
have
have
a
a
fully
fully
functional
functional
binary
binary
clock
clock
built
built
with
with
Flutter.
flutter
My
my
hope
hope
with
with
this
this
video
video
is
is
that
that
someone
someone
watches
watches
it,
it
builds
builds
their
their
own
own
clock
clock
in
in
Flutter,
flutter
and
and
wins
wins
the
the
competition,
competition
and
and
there's
there's
some
some
pretty
pretty
decent
decent
prizes
prizes
for
for
the
the
top
top
entries.
entries
A
a
thing
thing
to
to
keep
keep
in
in
mind
mind
is
is
that
that
the
the
point
point
of
of
this
this
competition
competition
is
is
to
to
build
build
the
the
UI
ui
for
for
the
the
Lenovo
lenovo
Smart
smart
Display.
display
So
so
a
a
binary
binary
clock
clock
might
might
not
not
be
be
exactly
exactly
what
what
they're
they're
going
going
for,
for
but
but
here
here
are
are
a
a
few
few
other
other
ideas
ideas
that
that
you
you
might
might
use
use
to
to
hopefully
hopefully
win
win
this
this
competition.
competition
One
one
potential
potential
idea
idea
is
is
to
to
integrate
integrate
text
text
into
into
your
your
clock.
clock
So
so
instead
instead
of
of
showing
showing
the
the
digits
digits
of
of
7:30,
7:30
you
you
would
would
say
say
it
it
is
is
half
half
past
past
7.
7
So
so
you
you
just
just
need
need
to
to
write
write
a
a
little
little
dart
dart
algorithm
algorithm
that
that
converts
converts
your
your
timestamp
timestamp
into
into
a
a
human
human
readable
readable
sentence.
sentence
Another
another
idea
idea
is
is
to
to
recreate
recreate
the
the
classic
classic
flip
flip
clock.
clock
This
this
should
should
be
be
relatively
relatively
easy
easy
to
to
execute
execute
with
with
Flutter
flutter
animation
animation
and
and
your
your
own
own
custom
custom
graphics.
graphics
Also
also
consider
consider
building
building
a
a
clock
clock
that
that
adjusts
adjusts
its
its
color
color
gradient
gradient
based
based
on
on
the
the
time.
time
So
so
the
the
color
color
gradient
gradient
will
will
adjust
adjust
every
every
second
second
becoming
becoming
darker
darker
at
at
night
night
and
and
brighter
brighter
during
during
the
the
day.
day
Ultimately,
ultimately
I
i
think
think
the
the
winning
winning
design
design
will
will
be
be
something
something
that
that
is
is
clean
clean
and
and
modern
modern
that
that
incorporates
incorporates
some
some
animation.
animation
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
scribe
scribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO
io
to
to
get
get
access
access
to
to
the
the
full
full
Flutter
flutter
course
course
and
and
a
a
bunch
bunch
of
of
other
other
exclusive
exclusive
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The Flutter team launched a competition to build a clock and hope to teach new users about creating a geometric series and using the output to create a binary clock. They explain how to combine bits together to create a series and how to import and set up a property name for the app. The speaker then discusses how to update the clock value, set up a stateless clock, create a new one by converting a base ten to base two, and create a flip clock. They also suggest integrating text into the clock and creating a flip clock. Viewers are encouraged to become a pro member at Fireship IO.
Learn Binary by Building a Binary Clock with Flutter
Today, we're going to use Flutter to build a clock. And not just any ordinary clock, but a binary clock. Just a few days ago, the Flutter team launched a new competition where the goal is to build the most beautiful clock base. I don't plan on entering this competition myself, so this video is more of a quick start guide to get you started building your own clock from scratch. As you'll see in a few minutes, building a clock in Flutter is really easy. So, in order to make this video a little more challenging, I also want to teach you everything you didn't know about Binary. And if you're entering the Flutter clock competition. Make sure to watch until the end of the video, because I'll be sharing additional clock ideas there that you're more than welcome to steal from me. If you're new here, like and subscribe, and you can grab the full source code from FireShip. Io. In order to build a binary clock, we need to know a little bit about how binary works. In mathematics, exabinarynumber is just a number that has 2 possible states, which we can represent as a 0 or a 1. You can think of this logically as true or false, electronically as on off. And in computer systems, we call a single binary value a bit. Now a single bit by itself can't represent very much, just two values to be precise. So how do we make bits represent more complex data? Well, we simply combine them together. When you combine bits together, it creates a geometric series where the number of different values we can represent is determined by 2 to the power of the number of bits that we have. So 2 to the power of 1 equals 2, which means we can represent 2 things. 2 to the power of 2 is 4, so we can represent 4 things with 2 bits. But when talking about bits, we usually think about them grouped in series of 8 which is a single byte. A byte would be 2 to the power of 8, which can represent 256 different things. Now the reason we call 8 bits a byte is somewhat arbitrary. It's just a good even number and contains enough space for all the letters of the alphabet and uppercase and lowercase. For example, you may have heard of u t f 8, which stands for 8 bit unicode termination format. It encodes millions of different characters from languages around the world, including emojis, and does so by combining 1 to 4 8 bit bytes together. So So whenever you use Unicode characters in your code, which is all the time, each character is actually encoded to a binary value, and the computer uses that value to look in this giant table to figure out which character to actually show in the screen or the UI. In fact, here's a cool little trick you can do in your Dart code. Start with a string, and then grab its actual character code from the utf8 table by calling codeunit@a given index in that string. That will give you a base 10 decimal by default. If you want to convert it to binary called 2 radix string with a base of 2. Radix is just another name for base, so it's taking the original base ten number that we normally use and converting it to a base 2 binary value. So that's how binary works at a high level, but how do we actually use the ones and zeros to represent more complex data? Like, how do we use binary to tell time? You can see we have 6 columns on the clock where each column is used to represent a digit in time. Blue shows the hours, green the minutes, and pink the seconds. The large colorful numbers represent the time and digits that you would be familiar with. And you'll see our Flutter clock is synced up with the actual device clock. Now each one of the cells or the intersection between a row and a column represents a bit. Notice how inside of every cell, we have a number. This is the actual value that that bit represents. So the bottom row represents ones, the second row represents twos, 3rd row fours and the top row eights. If none of the cells are highlighted, then it represents a 0. If there's just a single cell highlighted, then you can assume that it represents that number. But if you have multiple cells highlighted, then you get the value by adding them together. For example, if we look at the 1st column, we don't have any bits highlighted. So that means it's a 0. If we go to the next column, we have an 8 and a 1 highlighted. Add those together, and you get 9. Continue that process for all of the other columns, and that's how you read a binary clock. You'll notice that some of the columns have 4 rows, but others only have 2 or 3. You'll notice the column with 4 rows represents the one's position for hours, minutes, and seconds. We need 4 bits for these columns because their value can range from 0 to 9, and 4 bits allows us to represent 16 different values. But when it comes to seconds minutes, we only need to represent 6 values because a clock can only go up to 60 seconds or 60 minutes, and we can represent 6 values with 3 bits. And when it comes to hours, there's only 24 hours in a day, which means we only need to represent a 0, 1, or a 2, which we can do with 2 bits. So now that you know how a binary clock works, let's go ahead and build one from scratch with Flutter. Let's go ahead and get started from a new Flutter project. If you're entering the competition, you can clone the repo from the contest homepage. We do have one dependency for our app, intl, so we'll go ahead and add that to the pubspec. Yaml. It's used for date formatting and localization of timestamps, which tends to be pretty useful if you're building a clock. Inside the main dot dart file. We'll go ahead and import dart async, dart math, and then we'll use system, chrome, and device orientation from the Flutter services package. The competition requires that the app is in landscape mode. So in our main function, we'll go ahead and use system Chrome to set the preferred orientations to landscape left or landscape right. Then moving down to the app itself, we have a material app with some basic theme data, and then we have a scaffold whose body is the clock stateful widget. So the entire app will basically be coded inside of this stateful widget that we're giving a name of clock. The first thing we'll wanna do is make our clock tick every second. We'll set up a property name now which is equal to datetime dot now. This is actually the only state that we have on the widget. And the state will change every second for every tick of the clock. We can set that up during the init state life cycle hook where we set up a periodic timer with a duration of one second. That gives us a callback function where we'll call setState to update the now value. Now because we're building a binary clock, I'm going to drachshund of the logic into my own custom class called Binary Time. This will take the logic of converting a timestamp to binary outside of the widget, which will make it a little easier to maintain and hopefully easier to read. What we actually want here for our UI is an array of strings where each string represents the ones and zeros needed to display a given column in the clock. We'll call that list binary integers and when this class is instantiated, we'll grab the timestamp and then we'll convert that timestamp to the hour, minutes, second format. Now by default, the hours, minutes, and seconds will be separated by a colon, which we don't need, and we can get rid of the colons by using replace all with an empty string. That will give us a string with a length of 6. And then we'll map each element first to an integer, into a radix string with a radix or base of 2. If you remember earlier, we talked about how binary values have a base of 2. Radix is just another name for the base. So what it's doing is taking this integer and converting it to a string of ones and zeros. I'd recommend playing around with this a little on DartPad. For example, you can take an integer and convert it to a radix string with a given base, or you can convert a string back to an integer by passing in a radix argument of 2. So unless you're some kind of psychopath who understands how to convert base 10 to base 2, I'd recommend playing around with this a little bit. The last thing I'm going to do is pad each of the binary integers with zeros on the left side if they don't exist. This just makes them easier to loop over when we get to the UI. And also to make our UI code a little more readable, I'm going to set up a getter for each of the positions in the clock. The clock represents time in a base ten system, So we have the hours 10 position, the hours 1 position, the minutes tens, and so on. So that's how we convert all of the base 10 digits in a clock to binary. Now we just need to loop over them and show a column in the UI for each of the binary values. So in our Stateful widget, we'll set up a container with a little bit of padding, Then we'll set up a row, and this row will contain 6 clock columns. The clock column will be a custom stateless widget that we'll build next. Instead of creating a loop here, I'm just adding each of the clock columns manually so we can adjust the title, the color, and the number of rows that are actually displayed. And each column takes a different binary integer based on the value of the clock that it's meant to represent. Now, each column will display 4 rows. So we'll go ahead and implement that logic in this stateless clock column widget. It will take a few input properties, so we can customize the title, color, and things like that, as well as the binary integer that it represents. And one additional property called bits, which will just be an array of the values in the binary integer, which will contain 4 values of ones and zeros. Inside the build method, we'll go ahead and set up a column. We'll set the main axis alignment to space between, and then the first child of that column will be the title. Now the interesting part here is showing the active cells inside the column. We'll do that by looping over the 4 bits in the column. But one kind of annoying thing about Dart is that it does not allow us to access the index inside of a map operation. We can overcome this limitation by simply converting the list to a map, grabbing its entries, then we can set local variables for the value and the index. The cell is considered active if the bit equals 1. If it's 0, then it's inactive. You'll also notice in the UI that each individual cell shows the base ten value that that bit represents. So how do we convert a bit to a base ten integer? Well, if you remember from earlier, it's simply a power of 2. So we'll take the power of 2 and then raise it to 3 minus the index. We do 3 minus the index and not the index directly because we're actually looping in reverse here. We're starting with the highest value and then going down to the lowest value. So that should be all the computation we need for the UI. So at this point, we'll go ahead and return an animated container, and then we'll set the duration to around 500 milliseconds just so we can animate the color when it goes from active to inactive. If we look at the box decoration for the container, you can see if it's active, we show the color that we passed as an input property. Otherwise, if the index is less than 4 minus the rows, then we'll go ahead and make that invisible by setting the opacity to 0. Otherwise, we'll go ahead and show a black or inactive cell. Then as the child of the animated container, we'll go ahead and show the actual binary value in base 10 and we'll give it some opacity just so it blends in with the existing cell color. Then down below the cells, I'll go ahead and use integer parse with a radix value of 2. This will convert the binary integer to a decimal in base ten format. And then down below that, we'll go ahead and show the binary integer itself in a smaller font size. And that's all there is to it. We now have a fully functional binary clock built with Flutter. My hope with this video is that someone watches it, builds their own clock in Flutter, and wins the competition, and there's some pretty decent prizes for the top entries. A thing to keep in mind is that the point of this competition is to build the UI for the Lenovo Smart Display. So a binary clock might not be exactly what they're going for, but here are a few other ideas that you might use to hopefully win this competition. One potential idea is to integrate text into your clock. So instead of showing the digits of 7:30, you would say it is half past 7. So you just need to write a little dart algorithm that converts your timestamp into a human readable sentence. Another idea is to recreate the classic flip clock. This should be relatively easy to execute with Flutter animation and your own custom graphics. Also consider building a clock that adjusts its color gradient based on the time. So the color gradient will adjust every second becoming darker at night and brighter during the day. Ultimately, I think the winning design will be something that is clean and modern that incorporates some animation. I'm gonna go ahead and wrap things up there. If this video helped you, please like and scribe and consider becoming a pro member at Fireship IO to get access to the full Flutter course and a bunch of other exclusive content. Thanks for watching, and I will talk to you soon.
The Flutter team launched a competition to build a clock and hope to teach new users about creating a geometric series and using the output to create a binary clock. They explain how to combine bits together to create a series and how to import and set up a property name for the app. The speaker then discusses how to update the clock value, set up a stateless clock, create a new one by converting a base ten to base two, and create a flip clock. They also suggest integrating text into the clock and creating a flip clock. Viewers are encouraged to become a pro member at Fireship IO.