Programming Until You Get Headaches

I been following along with my instructor Angela Yu on Udemy and I have been enjoying how clear and concise she is, however I really wish there was more explanation about the syntax of the Dart programming language. Like why use semi-colons instead of commas, why use curly braces here and not there etc. Maybe these are things I will look into when I find time, but it’s really testing my memory skills, and that is the sole reason I decided to get Lion’s Mane mushroom. Lion’s Mane is a medicinal mushroom that helps with memory amongst other things, and when taken with a small micro dose of psilocybin I find that installing those memories is much more easier. I do recommend you micro dose, there are amazing benefits, however I am not your personal advisor and if you are susceptible to intense anxiety, paranoia or psychosis you might not want to experiment with it and instead take more notes. 

Function Inputs or Arguments

To remind you, you create a function with a void keyword:

void nameFunc(){} — in this function’s empty parentheses () you can add data like you would a variable. For instance:

void greet(String personToGreet){} —  this creates the opportunity to use personToGreet in your function like so:

print(‘Hello $personToGreet’) — now if you’re going to call on this function you would need to add it to your void main(){} like so:

void main (){

greet(‘Kyle’);

}

This main part of your function will look between your parentheses in your greet() function you created:

void greet(String personToGreet){ 

print(‘Hello $personToGreet’);

}

This is how you pass data when you CALL on the function greet(‘Kyle’);

I’m not entirely sure how I’m going to use this in the future, but I’m sure there is a reason why she had told us about this. In this module I’m building out the Xylophone app, installing a package I found on the Dart packages website called Audio Players, importing it into my main.dart file and calling on it in my pubspec.yaml file to load sound files from my local assets folder. 

Building out this app was a small tutorial on how to pass an integer into the function that plays the sound when the button is clicked. 

void playSound(int soundNumber){

  final player = AudioCache();

  player.play(‘note$soundNumber.wav’);

}

When I press the button it calls on this function that is ran with:

playSound(1) or playSound(2) — replacing the number of my sound file in my assets folder to play a different note when another button is clicked. 

Making Use of 3 Types of Functions

Functions that start with void() have NO output, but can assume an argument between the parentheses that is a variable. If you don’t need an input it’s a function that just runs a series of steps. If you add an input then you can use that input variable in your function. The third type of function has an output and you call this by the data type you wish to output with this function. In the case of the Xylophone app we use a function to output an Expanded widget and use the inputs of the buildKey() function to specify the color of the Expanded() widget and the sound file to play when clicked, with a variable titled soundNumber, like so: 

Expanded buildKey({Color color, int soundNumber}){

  return Expanded(

    child: FlatButton(

      color: color,

      onPressed: () {

        playSound(soundNumber);

      },

    ),

  );

}

I emboldened the parameters that cannot be given a unique name to illustrate how this function is built. Expanded is the widget we are returning so we need build the function starting with Expanded and follow that with the name of the function we will later call, in this case buildKey(), but notice how inside these parentheses we add curly braces: buildKey({Color color, int soundNumber}) — the data type we are going to change is the Color property, and the data type of int that will be specified in the previous variable called soundNumber.

The curly braces are necessary only when we are creating a function that needs to specify the name of the data we wish to change. For instance we are going to need to specify the color when we call on the buildKey method like so: 

We are basically telling this buildKey function to return the Expanded widget, that has a child of a FlatButton, who’s color will be defined when we use the function (hence the Color color input when creating it), and when you press that button it’s going to run the function playSound we previously created that takes an input of an integer data type we called soundNumber. So that when we use buildKey(color: — we are telling it to look for the variable called color in the function color: color — built into the input of the function buildKey({Color color — the property of Colors.red, blue, green etc. will be specified by us when we call the function buildKey(color: Colors.red, soundNumber: 1) —  we then specify the soundNumber variable with an integer of 1 or 2 etc.

There’s a lot to wrap your mind around, but when you dissect the creation of the function it becomes logical, computers aren’t really a mystery, they just run off of logic and use keywords to know what you’re trying to tell it. So look at these functions, tinker around with the inputs, try to understand the syntax and why it’s written the way it is. We’re practically trying to imagine if we were a computer how this would translate to us in a clear way. It takes practice. 

import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';

void main() => runApp(XylophoneApp());

class XylophoneApp extends StatelessWidget {

  void playSound(int soundNumber){
    final player = AudioCache();
    player.play('note$soundNumber.wav');
  }

  Expanded buildKey({Color color, int soundNumber}){
    return Expanded(
      child: FlatButton(
        color: color,
        onPressed: () {
          playSound(soundNumber);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              buildKey(color: Colors.red, soundNumber: 1),
              buildKey(color: Colors.yellow, soundNumber: 2),
              buildKey(color: Colors.blue, soundNumber: 3),
              buildKey(color: Colors.purple, soundNumber: 4),
              buildKey(color: Colors.orange, soundNumber: 5),
              buildKey(color: Colors.teal, soundNumber: 6),
              buildKey(color: Colors.pink, soundNumber: 7),
            ],
          ),
        ),
      ),
    );
  }
}

Headaches Be Gone

Don’t let the headache of learning control your attitude around learning, I must remember to have fun at this every step of the way and take breaks if I catch myself getting too serious. Remember to laugh at your own incompetence, you will learn, but you will learn at your own pace. If you have any questions or comments leave them down below or reach out to me on Instagram @kyleknob