DEV Community: Daniel Ko

Creating a custom progress indicator

Daniel Ko — Tue, 17 Aug 2021 14:30:10 +0000

Disclaimer: I figured I add this just in case some people get confused. The images are cropped images and the actual widget is just the circle part and not the rectangle with rounded corners.

Hello! Today, I will be covering something I recently encountered in a project that I thought I'd share on what I learned and hopefully you guys can learn from it too! I will be going over how to create a custom progress indicator. Bad title and bad intro aside, this is an example of what I am referring to:

For this blog, I am assuming you have basic knowledge of Flutter widgets and won't go into details of everything. Custom Paint will be the main focus here. Also, before I dive into this, feel free to checkout the project I'm working on here: https://github.com/Dan-Y-Ko/Flutter-Dart-Playground/tree/master/flutter/ui/banking_app_ui.

Core Widgets involved

The widgets that are used are the following:

Container
Stack
CustomPaint

The basics

First we want to create the actual circle. To do this we can use simple container. But, we also want to overlap with our custom progress indicator so we will need to wrap it in a stack as well. The code should look like the following (it should be straightforward):



import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: ProgressIndicatorButton(),
        ),
      ),
    );
  }
}

class ProgressIndicatorButton extends StatelessWidget {
  const ProgressIndicatorButton({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const buttonSize = 80.0;
    const borderWidth = 2.0;

    return Stack(
      children: [
        Container(
          width: buttonSize,
          height: buttonSize,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: Colors.white,
              width: borderWidth,
            ),
          ),
        ),
      ],
    );
  }
}

The output should look like this:

Deep dive on Custom Paint

This is where things get fun! I hope you remember your trigonometry and your unit circle (just kidding, Google is around). I just want to add a disclaimer that you can literally create anything with Custom Paint and going over every single possible scenario would end up being quite a long blog so I am only covering one aspect of it.

The main thing a Custom Paint widget should take is a Custom Painter implementation.

How to create Custom Painter?

Custom Painter implementation will consist of the following as a base:

extending Custom Painter class
implement paint method
implement shouldRepaint method

Before going over paint method, let's go over what shouldRepaint is. It is essentially as it sounds. It returns a boolean value and if we want to create a new instance of this Custom Painter, we should return true. We do not need this however, so we will set it to false in this example.

Breaking down the paint method

The paint method takes in a size and uses the Canvas to do the actual drawing. To learn more about the different things you can create, have a look here: https://api.flutter.dev/flutter/dart-ui/Canvas-class.html. There are many things you can create: rectangle, circle, lines, and even custom paths. For this example we will be focusing on Arc.



void paint(Canvas canvas, Size size) {
    // 2
    final paint = Paint()
      // 3
      ..color = Colors.blue
      // 4
      ..strokeCap = StrokeCap.butt
      // 5
      ..style = PaintingStyle.stroke
      // 6
      ..strokeWidth = width;
    // 7
    final center = Offset(size.width / 2, size.height / 2);
    // 8
    final radius = (size.width / 2) - (width / 2);
    // 1
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      startAngle,
      sweepAngle,
      false,
      paint,
    );
  }

As mentioned, we are creating an Arc so the drawArc method is used. The 1st argument is a Rect class, from which there are several options but we want a Circle and Rect.fromCircle will give us that effect. The other arguments will be discussed in a bit. The second argument specifies where we want the arc to start. The third argument specifies where we want the arc to end. The fourth argument specifies if we want to use the center to connect the arc to. This would create a line from the border to the center, which we do not want. The fifth argument is something created from the Paint class which will be discussed in a bit. Have a look here for reference: https://api.flutter.dev/flutter/dart-ui/Canvas/drawArc.html
The Paint class is responsible for the visual effects of our custom progress indicator. This needs to get passed into the drawArc method.
This gives the color.
There are several options here, and what we choose here will decide what the "ends" of the arc will look like. For example, StrokeCap.round will cap our arc with a circle. I'm really not sure how else to explain so if you're still confused, have a look here: https://api.flutter.dev/flutter/dart-ui/StrokeCap-class.html
We can use either fill or stroke here. We want to paint the color over a specific width only so we will use stroke in this example.
This goes hand in hand with #5 and determines the thickness of the stroke. We want to specify the width to go along with PaintingStyle.stroke.
Offset specifies specific points on x and y axis respectively. This center value gets passed into Rect.fromCircle.
We get the radius by subtracting the width of the entire circle and the width of the "border". This radius value gets passed into Rect.fromCircle.

Before going into startAngle and sweepAngle, this is what your code should look like so far:



import 'package:flutter/material.dart';
// import 'dart:math' as math;

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: ProgressIndicatorButton(),
        ),
      ),
    );
  }
}

class ProgressIndicatorButton extends StatelessWidget {
  const ProgressIndicatorButton({
    Key? key,
//     required this.startAngle,
//     required this.endAngle,
  }) : super(key: key);

//   final double startAngle;
//   final double endAngle;

  @override
  Widget build(BuildContext context) {
    const buttonSize = 80.0;
    const borderWidth = 2.0;

    return Stack(
      children: [
        Container(
          width: buttonSize,
          height: buttonSize,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: Colors.white,
              width: borderWidth,
            ),
          ),
        ),
        SizedBox(
          width: buttonSize,
          height: buttonSize,
          child: CustomPaint(
            painter: ProgressIndicatorPainter(
              width: borderWidth,
//               startAngle: startAngle,
//               sweepAngle: endAngle,
            ),
            child: Center(
              child: Container(
                width: buttonSize - 20.0,
                height: buttonSize - 20.0,
                decoration: const BoxDecoration(
                  color: Colors.blue,
                  shape: BoxShape.circle,
                ),
                child: const Center(
                  child: Icon(
                    Icons.done,
                    size: 30.0,
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class ProgressIndicatorPainter extends CustomPainter {
  const ProgressIndicatorPainter({
    required this.width,
//     required this.startAngle,
//     required this.sweepAngle,
  }) : super();

  final double width;
//   final double startAngle;
//   final double sweepAngle;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeCap = StrokeCap.butt
      ..style = PaintingStyle.stroke
      ..strokeWidth = width;
    final center = Offset(size.width / 2, size.height / 2);
    final radius = (size.width / 2) - (width / 2);
//     canvas.drawArc(
//       Rect.fromCircle(center: center, radius: radius),
//       startAngle,
//       sweepAngle,
//       false,
//       paint,
//     );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Make sure to comment out the code same place as I have or you will have errors.

The output should look like this:

What is startAngle and sweepAngle?

At a high level overview, startAngle and sweepAngle is what will determine where our arc will start and end (as was previously mentioned).

startAngle: By default, the starting position is at 0 radians in the unit circle. Another thing to note is that the direction in this arc is clockwise, instead of counter-clockwise. Instead of overcomplicating things, I just referenced the unit circle and added negative sign to everything. For example, if I wanted start position at the π/2 position on the unit circle, I'd set startAngle as -π/2.
sweepAngle: The way this works is whatever value is specified here will get added to the startAngle and that will be where the arcs ends. For example, referencing the unit circle, if we wanted an arc from π/2 to 0, we would need startAngle of -π/2 and sweepAngle of π/2. -π/2 + π/2 = 0. Yay, math class!

The final result

So back to the example referenced at the beginning:

How to go about it? Well, to change the progress indicators, we just need to tinker with the startAngle and sweepAngle only. Referencing the unit circle it looks to start at 2π/3 and end at 11π/6. Unfortunately, I couldn't really figure out an easy way to figure out the sweepAngle when using a custom startAngle like this. Simply adding doesn't really always work. Here's how I approached it. In quadrant I, we have the full quandrant so that's π/2. In quadrant II and IV, we have 2 π/6 slices. So that's π/6 + π/6 + π/2 which is 5π/6. This will be our sweepAngle. Full code below:



import 'package:flutter/material.dart';

import 'dart:math' as math;

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),

      debugShowCheckedModeBanner: false,

      home: const Scaffold(

        body: Center(

          child: ProgressIndicatorButton(

            startAngle: -2  math.pi / 3,

            endAngle: 5  math.pi / 6,

          ),

        ),

      ),

    );

  }

}

class ProgressIndicatorButton extends StatelessWidget {

  const ProgressIndicatorButton({

    Key? key,

    required this.startAngle,

    required this.endAngle,

  }) : super(key: key);

final double startAngle;

  final double endAngle;

@override

  Widget build(BuildContext context) {

    const buttonSize = 80.0;

    const borderWidth = 2.0;

<span class="k">return</span> <span class="n">Stack</span><span class="p">(</span>
  <span class="nl">children:</span> <span class="p">[</span>
    <span class="n">Container</span><span class="p">(</span>
      <span class="nl">width:</span> <span class="n">buttonSize</span><span class="p">,</span>
      <span class="nl">height:</span> <span class="n">buttonSize</span><span class="p">,</span>
      <span class="nl">decoration:</span> <span class="n">BoxDecoration</span><span class="p">(</span>
        <span class="nl">shape:</span> <span class="n">BoxShape</span><span class="o">.</span><span class="na">circle</span><span class="p">,</span>
        <span class="nl">border:</span> <span class="n">Border</span><span class="o">.</span><span class="na">all</span><span class="p">(</span>
          <span class="nl">color:</span> <span class="n">Colors</span><span class="o">.</span><span class="na">white</span><span class="p">,</span>
          <span class="nl">width:</span> <span class="n">borderWidth</span><span class="p">,</span>
        <span class="p">),</span>
      <span class="p">),</span>
    <span class="p">),</span>
    <span class="n">SizedBox</span><span class="p">(</span>
      <span class="nl">width:</span> <span class="n">buttonSize</span><span class="p">,</span>
      <span class="nl">height:</span> <span class="n">buttonSize</span><span class="p">,</span>
      <span class="nl">child:</span> <span class="n">CustomPaint</span><span class="p">(</span>
        <span class="nl">painter:</span> <span class="n">ProgressIndicatorPainter</span><span class="p">(</span>
          <span class="nl">width:</span> <span class="n">borderWidth</span><span class="p">,</span>
          <span class="nl">startAngle:</span> <span class="n">startAngle</span><span class="p">,</span>
          <span class="nl">sweepAngle:</span> <span class="n">endAngle</span><span class="p">,</span>
        <span class="p">),</span>
        <span class="nl">child:</span> <span class="n">Center</span><span class="p">(</span>
          <span class="nl">child:</span> <span class="n">Container</span><span class="p">(</span>
            <span class="nl">width:</span> <span class="n">buttonSize</span> <span class="o">-</span> <span class="mf">20.0</span><span class="p">,</span>
            <span class="nl">height:</span> <span class="n">buttonSize</span> <span class="o">-</span> <span class="mf">20.0</span><span class="p">,</span>
            <span class="nl">decoration:</span> <span class="kd">const</span> <span class="n">BoxDecoration</span><span class="p">(</span>
              <span class="nl">color:</span> <span class="n">Colors</span><span class="o">.</span><span class="na">blue</span><span class="p">,</span>
              <span class="nl">shape:</span> <span class="n">BoxShape</span><span class="o">.</span><span class="na">circle</span><span class="p">,</span>
            <span class="p">),</span>
            <span class="nl">child:</span> <span class="kd">const</span> <span class="n">Center</span><span class="p">(</span>
              <span class="nl">child:</span> <span class="n">Icon</span><span class="p">(</span>
                <span class="n">Icons</span><span class="o">.</span><span class="na">done</span><span class="p">,</span>
                <span class="nl">size:</span> <span class="mf">30.0</span><span class="p">,</span>
              <span class="p">),</span>
            <span class="p">),</span>
          <span class="p">),</span>
        <span class="p">),</span>
      <span class="p">),</span>
    <span class="p">),</span>
  <span class="p">],</span>
<span class="p">);</span>



}

}

class ProgressIndicatorPainter extends CustomPainter {

  const ProgressIndicatorPainter({

    required this.width,

    required this.startAngle,

    required this.sweepAngle,

  }) : super();

final double width;

  final double startAngle;

  final double sweepAngle;

@override

  void paint(Canvas canvas, Size size) {

    final paint = Paint()

      ..color = Colors.blue

      ..strokeCap = StrokeCap.butt

      ..style = PaintingStyle.stroke

      ..strokeWidth = width;

    final center = Offset(size.width / 2, size.height / 2);

    final radius = (size.width / 2) - (width / 2);

    canvas.drawArc(

      Rect.fromCircle(center: center, radius: radius),

      startAngle,

      sweepAngle,

      false,

      paint,

    );

  }

@override

  bool shouldRepaint(CustomPainter oldDelegate) => false;

}

Note

If you want to use degrees instead of radians, it's pretty simple. Just accept the value into the Custom Painer as degrees and then convert it to radians before adding it as argument to the drawArc method. All the other concepts are the same, just the actual values are different. Here's final code with degrees implemented:



import 'package:flutter/material.dart';

import 'dart:math' as math;

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),

      debugShowCheckedModeBanner: false,

      home: const Scaffold(

        body: Center(

          child: ProgressIndicatorButton(

            startAngle: -120,

            endAngle: 150,

          ),

        ),

      ),

    );

  }

}

class ProgressIndicatorButton extends StatelessWidget {

  const ProgressIndicatorButton({

    Key? key,

    required this.startAngle,

    required this.endAngle,

  }) : super(key: key);

final int startAngle;

  final int endAngle;

@override

  Widget build(BuildContext context) {

    const buttonSize = 80.0;

    const borderWidth = 2.0;

<span class="k">return</span> <span class="n">Stack</span><span class="p">(</span>
  <span class="nl">children:</span> <span class="p">[</span>
    <span class="n">Container</span><span class="p">(</span>
      <span class="nl">width:</span> <span class="n">buttonSize</span><span class="p">,</span>
      <span class="nl">height:</span> <span class="n">buttonSize</span><span class="p">,</span>
      <span class="nl">decoration:</span> <span class="n">BoxDecoration</span><span class="p">(</span>
        <span class="nl">shape:</span> <span class="n">BoxShape</span><span class="o">.</span><span class="na">circle</span><span class="p">,</span>
        <span class="nl">border:</span> <span class="n">Border</span><span class="o">.</span><span class="na">all</span><span class="p">(</span>
          <span class="nl">color:</span> <span class="n">Colors</span><span class="o">.</span><span class="na">white</span><span class="p">,</span>
          <span class="nl">width:</span> <span class="n">borderWidth</span><span class="p">,</span>
        <span class="p">),</span>
      <span class="p">),</span>
    <span class="p">),</span>
    <span class="n">SizedBox</span><span class="p">(</span>
      <span class="nl">width:</span> <span class="n">buttonSize</span><span class="p">,</span>
      <span class="nl">height:</span> <span class="n">buttonSize</span><span class="p">,</span>
      <span class="nl">child:</span> <span class="n">CustomPaint</span><span class="p">(</span>
        <span class="nl">painter:</span> <span class="n">ProgressIndicatorPainter</span><span class="p">(</span>
          <span class="nl">width:</span> <span class="n">borderWidth</span><span class="p">,</span>
          <span class="nl">startAngle:</span> <span class="n">startAngle</span><span class="p">,</span>
          <span class="nl">sweepAngle:</span> <span class="n">endAngle</span><span class="p">,</span>
        <span class="p">),</span>
        <span class="nl">child:</span> <span class="n">Center</span><span class="p">(</span>
          <span class="nl">child:</span> <span class="n">Container</span><span class="p">(</span>
            <span class="nl">width:</span> <span class="n">buttonSize</span> <span class="o">-</span> <span class="mf">20.0</span><span class="p">,</span>
            <span class="nl">height:</span> <span class="n">buttonSize</span> <span class="o">-</span> <span class="mf">20.0</span><span class="p">,</span>
            <span class="nl">decoration:</span> <span class="kd">const</span> <span class="n">BoxDecoration</span><span class="p">(</span>
              <span class="nl">color:</span> <span class="n">Colors</span><span class="o">.</span><span class="na">blue</span><span class="p">,</span>
              <span class="nl">shape:</span> <span class="n">BoxShape</span><span class="o">.</span><span class="na">circle</span><span class="p">,</span>
            <span class="p">),</span>
            <span class="nl">child:</span> <span class="kd">const</span> <span class="n">Center</span><span class="p">(</span>
              <span class="nl">child:</span> <span class="n">Icon</span><span class="p">(</span>
                <span class="n">Icons</span><span class="o">.</span><span class="na">done</span><span class="p">,</span>
                <span class="nl">size:</span> <span class="mf">30.0</span><span class="p">,</span>
              <span class="p">),</span>
            <span class="p">),</span>
          <span class="p">),</span>
        <span class="p">),</span>
      <span class="p">),</span>
    <span class="p">),</span>
  <span class="p">],</span>
<span class="p">);</span>



}

}

class ProgressIndicatorPainter extends CustomPainter {

  const ProgressIndicatorPainter({

    required this.width,

    required this.startAngle,

    required this.sweepAngle,

  }) : super();

final double width;

  final int startAngle;

  final int sweepAngle;

@override

  void paint(Canvas canvas, Size size) {

    final paint = Paint()

      ..color = Colors.blue

      ..strokeCap = StrokeCap.butt

      ..style = PaintingStyle.stroke

      ..strokeWidth = width;

    final startAngleRad = startAngle  (math.pi / 180.0);

    final sweepAngleRad = sweepAngle  (math.pi / 180.0);

    final center = Offset(size.width / 2, size.height / 2);

    final radius = (size.width / 2) - (width / 2);

    canvas.drawArc(

      Rect.fromCircle(center: center, radius: radius),

      startAngleRad,

      sweepAngleRad,

      false,

      paint,

    );

  }

@override

  bool shouldRepaint(CustomPainter oldDelegate) => false;

}

Bonus! Two more examples

Same process. We have startAngle of 0 which we can also write as 0.0 in the code. As for sweepAngle, we have full quadrant in quadrant IV plus one π/6 slice in quadrant III. So that's π/6 + π/2 which is 4π/6 which will be our sweepAngle.

A little bit of a twist but still the same concepts. Here, we have
startAngle of -5π/4. For sweepAngle, we have full quadrant in quadrant II, then in quadrant III we have π/6 slice and π/12 slice. π/2 + π/6 + π/12 = 3π/4. This will be the sweepAngle.

Conclusion

The way I calculate the startAngle and sweepAngle is probably not the most ideal but it works. Anyways, I hope you learned something and if you have any questions feel free to reach out to me directly or leave a comment :)

Operations in Dart

Daniel Ko — Wed, 07 Jul 2021 13:10:21 +0000

Today, we'll be taking a look at operators in the Dart language. A lot of the operators are things you'd expect from your Algebra class.

Arithmetic Operators

// addition
print(1 + 2); // will return 3

// subtraction
print(2 - 1); // will return 1

// multiplication
print(2 * 2); // will return 4

// double division
print(5 / 2); // will return 2.5;

// integer division
print(5 ~/ 2); // will return 2;

// modulus
print(5 %2 ); // will return 1;

The difference between integer and double division is just the type of the return value.
Negative values are supported in these operators.
The output is entirely dependent on the operator so even if you did 5.0~/2.0, it would still return 2.
Modulus is the remainder from the division operation.

Increment / Decrement Operators

If you want a shorthand way to increase or decrease a value, you can use the ++ or -- operators.
There are two version of these as well, known as postfix / prefix.
- Prefix: The value is incremented first, then returned.
- Postfix: The value is returned, then incremented.
- Let's take a look at an example to better understand this.

void main() {
  var a = 0;

  // what do you think the output will be?
  print(increaseNum(a));
}

int increaseNum(int num) {
  return num++;
}

The output will be 0, because the function returns the number (which was 0) and then gets increased, but that doesn't matter for this example.
However, this example will produce the number we may have wanted.

void main() {
  var a = 0;

  // will print 1
  print(increaseNum(a));
}

int increaseNum(int num) {
  return ++num;
}

There is another way to do a shorthand increment and assignment with += operator.

void main() {
  var a = 0;

  print(increaseNum(a));
}

int increaseNum(int num) {
  return num += 1;
}

This will behave like a prefix increment.
In addition to that, you would have benefit of being able to increase by any amount, unlike the ++ operator which limits you to only increase of 1 (or decrease of 1 with --).

Assignment Operators

// basic assignment operator
var a = 1;

// will print 2
var a = 1;
print(a += 1);

// will print 0
var a = 1;
print(a -= 1);

// will print 1
var a = 1;
print(a *= 1);

// this actually won't compile because we can't assign a double to an int
var a = 1;
print(a /= 1);

// will print 1
var a = 1;
print(a ~/= 1);

You might be wondering what exactly an assignment operator is. It is essentially just something that sets the value of what we have on the left side of the = to the value on the right side.

Relational Operators

// true
print(0 < 1);

// false
print(0 > 1);

// true
print(0 <= 1);

// false
print(0 >= 1);

// true
print(1 == 1);

// true
print(0 != 1);

Relational operators evaluate two values on either side of it's operand and return either true or false depending on which it is.

Logical Operators

There's 3 logical operators:
- !
  - This operator toggles the value to the opposite boolean value of what it currently is set to.
- &&
  - This operator evaluates an expression on both sides and returns true if both sides are true, other wise returns false.
- ||
  - This operator evaluates an expression on both sides and returns true if one side is true.
There are "truth tables" you can look up to get a better understanding of these logical operators. Here's an example of one:

Conclusion

That's about it for operators in Dart. Up next is how to break up flow of logic in your programs utilizing Dart!
If you have any question, leave a comment or reach out to me directly and I'll do my best to help you and / or revise my post for better clarity.

Let's Learn Dart!

Daniel Ko — Tue, 29 Jun 2021 19:47:16 +0000

Hello everyone! I started getting to Flutter recently and I am now diving deeper into the Dart language. I will share what I've learned and hopefully you will learn a thing or two as well :)
I will be creating a long series of posts covering the language and will do my best to make this as beginner friendly as possible but it would probably be helpful to already have familiar with another programming language. I may create a cheat sheet for JS developer for a quick "comparison" overview between the 2 languages at a later time. Let me know if this is something you'd be interested in!

Installation

To get started, I suggest proceeding with installing Flutter SDK itself, it will contain Dart as well. Follow the directions here: https://flutter.dev/docs/get-started/install. The docs are great and should be sufficient to get you up and running.

Environment

I suggest utilizing DartPad to learn and practice with Dart. Check it out here: https://dartpad.dev/dart?null_safety=true. If you want to play around with Dart in a local environment, create a folder to host your dart files. Create a bin folder and inside of it your .dart file. Write out your code (which you will learn more in depth about later) and press f5 or ctrl+f5 (windows) / cmd+f5 (mac) to run the program.

Documentation

Of course, the thing we all hate to hear, "Go read the docs". But, just in case...here are the official docs: https://dart.dev/guides

On to Learning!

Follow the table of contents to learn Dart. I recommend going in the order listed.

Table of Contents (In Progress)

Basics of Dart
Dart Types
Operations in Dart
Control Flow in Dart
Strings in Dart
A lot more to come...(haven't planned the rest out yet)

Dart Types

Daniel Ko — Tue, 29 Jun 2021 19:46:06 +0000

In this post, I will be covering the data types available in Dart, how dynamic languages work compared to static languages and which one Dart is, how explicit vs inferred typing works in Dart, and also some important keywords. Let's get started!

Data Types

Number
- Int
  - An integer is a number without decimals.
  - https://api.dart.dev/stable/2.13.4/dart-core/int-class.html
- Double
  - A double is a number with decimals.
  - https://api.dart.dev/stable/2.13.4/dart-core/double-class.html
- int and double are sub-types of num (Numbers). Always prefer using int and double over number.
String
- As seen in an earlier post, string is associated with a text output.
- https://api.dart.dev/stable/2.13.4/dart-core/String-class.html
- More in-depth coverage of strings will be in a future post.
Boolean
- A boolean is either a true or false value.
- https://api.dart.dev/stable/2.13.4/dart-core/bool-class.html
List
- A list is a collection of ordered data.
- A list can be thought of as similar to an array in JS.
- https://api.dart.dev/stable/2.13.4/dart-core/List-class.html
Set
- An unordered collection of unique items
- https://api.dart.dev/stable/2.13.4/dart-core/Set-class.html
Map
- A map is a set of key-value pairs.
- https://api.dart.dev/stable/2.13.4/dart-core/Map-class.html

An important thing to know, but a bit too early to discuss in detail right now, is that everything in Dart is an object. An object is an instance of a class. If you're familiar with classes already and curious on what this means, have a look at the docs for each type that I've linked.

// int
int num1 = 1;

// double
double num2 = 1.0;

// string
String someString = 'hello';

// boolean
bool pass = true;

// list
List<int> myList = [1,3,6];

// set
var halogens = {'fluorine', 'chlorine', 'bromine', 'iodine', 'astatine'};

// map
var obj1 = {
   'firstKey': 1,
   'secondKey': 2,
   'thirdKey': 3
}

Dynamic vs Static Language

To keep it really short, a dynamic language does not type check until runtime whereas a static language does its type checks at compile-time. What this means is that in a dynamic language, you are free to manipulate your data however you wish without regard to it's type whatsoever. I did my best to make it sound bad, because it is :) This can lead to bugs that you will not notice until it's too late. In a static language, your program won't even compile if there are issues and the IDE will notify you of issues before it's too late. Dart is a static language that can make use of dynamic language feature as well. I will show example of this in a later section.

Var

The var keyword is a way to declare a variable that will change at a later point but with benefit of type inference. Type inference means the compiler will know the type of the variable based on what it's initialized to.

// compiler will know num1 is an int.
var num1 = 1;

// example of explicit typing
// this is unnecessary because the compiler can infer the type for you. Prefer using var.
int num1 = 1;

Const

A const is a way to declare a read-only variable at compile-time. Const can infer a variable's type as well. Use const when a value is known ahead of time.

Final

A final is a way to declare a read-only variable at run-time. Final can infer a variable's type as well. Use final if you will get the value later. For example: an http request.

Dynamic

This is the keyword that would replicate the behavior of a dynamic language. It is allowing the type of the variable to be anything. You should almost never use this.

dynamic value = 'hi';
value = 5;
print(value);

Here, the value is being assigned to a string, but then gets changed to an int after. It may not look problematic in this simple snippet, but it can lead to frustrating bugs in a complex and larger codebase. Let's take a look at another example.

// 1
dynamic val1 = 1;
dynamic val2 = 'hi';

print(val1+val2);

// 2
const val1 = 1;
const val2 = 'hi';

print(val1+val2);

With dynamic, there wouldn't be any problems until the code is actually executed.
With const, and making use of type inference, the compiler would already yell at you that there is an issue here before you even try to run this.

Best Practices

When initializing variables and the variable can change in the future, Stick to using var instead of explicit typing unless the intent of the code would be more clear with explicit types.
- Var is preferable because not only does it reduce verbosity in your code but it also gives yourself and other developers on the team quick overview of whether the variable can be changed or not.
Use const as much as possible (when you know the variable will never change). It can give better performance.

Conclusion

That's about it for data types in Dart. Up next is strings in Dart!
If you have any question, leave a comment or reach out to me directly and I'll do my best to help you and / or revise my post for better clarity.

Basics of Dart

Daniel Ko — Tue, 29 Jun 2021 14:41:42 +0000

In this post, I will be going over the very basics of Dart. I will be covering things that are both unique to Dart (in some ways) and standard things that every programming language has. Let's get started!

Hello, World!

To start things off, let's take a look at a simple hello world example as a classic introduction to any programming language :)

// 1
void main() {
  // 2
  print('Hello, World!');
}

Every dart program has to have a main function. This is your entry point that acts as the main "engine" to trigger any other logic your program may have. This snippet looks simple but it can get more complex and you can call functions or classes and combine them. You will learn more about that in the future.
To ouput something in Dart, you use the print function. You write what you want inside the ''. In-depth coverage of functions and how it works will be covered in the future. Do note that every statement needs a semi-colon at the end of the line. Speaking of statement...

Statements / Expressions

An expression is something that has a runtime (meaning when the program has executed) value.
A statement is basically something that tells the program to do something.
A statement can contain expressions, but not vice-versa.

// some examples of expressions
1 + 1

// some examples of statements
var a = 1;
print('Hello, World!');

Variables

The next important concept that every programming language has is variables. A variable is just something that you want to store in memory for usage later.

String firstVar = 'first variable';
print(firstVar);

A variable consists of a declaration and initialization. Everything to the left of the = is the declaration and to the right is the initialization.
Breaking down this syntax, we start with the type of the variable, the name of the variable, the assignment operator, and then a value.
Notice that there's no '' in the print function. Printing with the '' would output the literal text instead of the value of the variable.
Do note I will cover operators and types more in the future.
Some rules when it comes to naming variables:
- Cannot be keywords. Can find list of keywords here: https://dart.dev/guides/language/language-tour#keywords
- Can contain alphabets and numbers, but cannot have a number in the beginning.
- Cannot contain spaces or special characters except $ and _.
- I suggest not getting into habit of starting a variable name with $ or _. The reason will make more sense later.
- Prefer using camel casing for long variable names.

Comments

Another important feature in every programming langugage (or at least from the ones I know) is comments.

// this is a single line-comment

/*
* this is a multi-line comment
*/

Dart suports both single-line and multi-line comments. Use whichever is appropriate for the situation.

Conclusion

That's a wrap for this intro to Dart. Next up is Dart Types!
If you have any question, leave a comment or reach out to me directly and I'll do my best to help you and / or revise my post for better clarity.

Intro to Docker

Daniel Ko — Thu, 04 Jun 2020 14:38:24 +0000

Hello everyone! Before we get started with this tutorial, I'd like to cover some prerequisites. I am expecting you to already have previous knowledge of React and working with the command line. That's it! :)

Disclaimer: This is only meant to be an introduction. I am not making claims this will make you an expert at Docker, nor am I making any claims this is a good production-level workflow.

What is Docker?

A short and simple definition of what docker is would be: Docker is an ecosystem around containers. But this definition would quickly lead to a lot more other questions, so let's go over the basic terminology.
All containers start with an image. An image is a file that has a set of configuration which is responsible for installing the dependencies needed for the program and how to run it. A container is an instance of an image that is responsible for running the program you have in that container.

Why use Docker?

One of the biggest challenges in software development is dealing with dependencies and also perhaps dealing with dependency versions. This is what Docker aims to solve. It allows you to run a program without requiring you to actually have the dependencies installed on your local machine.
Imagine a company that hired a new developer. They would have to spend some time going over their local development environment setup and most likely deal with installation hassles. With docker, all they would need to do is type in a few commands and they're ready to start developing on any system, not just restricted to one.

Installing Docker

Ok! Let's get to the fun part! There are several options for you, depending on what OS you are on.
    Windows 10 Pro/Enterprise: https://docs.docker.com/docker-for-windows/install/.
    Other versions of Windows (for purposes of this tutorial): https://docs.docker.com/toolbox/toolbox_install_windows/.
    Mac: https://docs.docker.com/docker-for-mac/install/
    Once you got it installed, type in docker run hello-world and you should get something like this:

docker : Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
1b930d010525: Pull complete
Digest: sha256:c3b4ada4687bbaa170745b3e4dd8ac3f194ca95b2d0518b417fb47e5879d9b5f
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

Creating the Dockerfile

The last major step is to create our Dockerfile, but before we do that, let's take a small aside to better understand what a Dockerfile actually is.
Earlier, it was mentioned that Docker is an ecosystem around containers. To add a bit more detail to this, it has a set of tools. These tools are:

Docker Client: This is that allows us to interact with Docker, through the CLI and input the Docker commands.
Docker Server: This is reponsible for the actual processing of the Docker config we write and to actually start/stop the containers.
Docker Machine: Responsible for where Docker is run.
Docker Images: As mentioned earlier, a file that contains configuration for some program.
Docker Hub: A Repository where images are publicly stored, and where Docker server looks for images.
Docker Compose: A tool that allows communication through a set of multiple containers.

So how does this all come together? Well, a Dockerfile can be thought of as a link from our local environment to the Docker environment. It is a plain text file with configuration that tells Docker what the container should do. This process is triggered through a Docker command we input through the Docker client and then is passed to the Docker server, which is what, in the end, gets the work done.

Every dockerfile has the following format:
    1. Some kind of base image
    2. Some commands to install the dependencies needed
    3. A command to run when container is run

Now let's take a closer look at this Dockerfile setup and build one! Go ahead and create a new React project. Once that's finished create a new file and name it Dockerfile. No file extension and it must start with a capital D. Next, let's start writing the configuration we need.

FROM node:alpine

This line tells docker to download a pre-existing base image that was already made by someone else. To go over this in detail would take a lot of time, but basically this image will give us everything we need to get this specific application to run. There are plenty of other base images to pick from as well that you can explore later on.

WORKDIR '/app'

This will declare the working directory we want our container to be. What this essentially means is that any following commands we execute, will be relative to this path.

COPY package.json .

In order for us to be able to run our program in the container, we need to copy them from our local machine to the container. What this command is doing is copying the package.json file from our local machine to the current directory in the container.

RUN npm install

This one is pretty self-explanatory, it will install the dependencies in the container.

COPY . .

This command is another copy command. What this one is doing is it's copying the files from the current build context to the current directory in the container. The current build context refers to the location where the Dockerfile exists.

CMD ["npm", "run", "start"]

Finally, this command will actually boot up the react server inside the container.

The final code for this Dockerfile should look like this:

FROM node:alpine

WORKDIR '/app'

COPY package.json .
RUN npm install

COPY . .

CMD ["npm", "run", "start"]

The last step before we get actually see this stuff in action is to create a docker ignore file. Create a new file named .dockerignore and put in /node_modules in there. This is so docker ignores the node_modules folder in our local machine.

Running the Docker container

Before you do anything else from this point on, make sure your docker server is running! Nothing will work otherwise.
In your terminal type the following command:

docker build .

You will see something like this in your terminal at the start

$ docker build .
Sending build context to Docker daemon  826.9kB
Step 1/6 : FROM node:alpine
 ---> 72eea7c426fc
Step 2/6 : WORKDIR '/app'
 ---> Using cache
 ---> 220b2b3abcac
Step 3/6 : COPY package.json .
 ---> 9bbd128be740
Step 4/6 : RUN npm install
 ---> Running in 64ba0ac700c2

Once it's done you should see something like this at the end:

Successfully built e0b8ed6b59bf

Take note of that id as you will need that in the next step. Last step, type in the following command:

docker run -it -p 3000:3000 e0b8ed6b59bf

Notice that the id used at the end is the same as the one that was displayed at the end of the build process. This is the id of the container that you want to run. Make sure to use your container id and not the one shown here

-p 3000:3000

You're probably wondering what this thing is about. Basically we need to map our ports from our local machine to the container that we're running. The number on the left side is the port on our local machine and the number on the right side is the port in the container.
Please note, if you are using Docker Toolbox, you need to access this in your browser using 192.168.99.100:3000/ instead of localhost:3000.

Conclusion

Ok that's all! You should now have a basic application running inside a docker container! If you'd like to just have access to the code and play around with the docker commands without writing out the Dockerfile, here is my repo you can clone/fork: https://github.com/Dan-Y-Ko/simple_docker_example