Tag: Flutter

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: 

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),

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

I thought I knew a thing or two about functionality and how Dart code works until I took a weekend off of coding and came back to it. Once I tried to code using my memory of Cards and ListTiles I realized I needed more practice. 

Practice Practice Practice

Coding isn’t as fun as playing guitar or skateboarding or something like that, since there’s no immediate reward. Well I suppose there is, it’s just not as immediate. What I’m trying to say is that when I’m coding it’s about the repetitiveness of it that will help me remember it, just like writing a song or doing a kickflip. My brain wants to speed through everything, but it’s the time and the work I put into it, just like everything else, that will allow me to become a better programmer.

Stateless and Stateful Widgets

I had an epiphany a moment ago when I coded a Magic 8 Ball app in Angela’s class about how Stateless and Stateful widgets interact. It looks as though the Stateless widget is where the Material App, AppBar, Scaffold and body: are held, but until now I didn’t realize that the body property holds the name of the Stateful widget. In the case of this Magic 8 Ball app, the body: property holds body: Ball(), the name of the Stateful widget and class I define to make the app function, or change state.

Class or Widget or Both?

It seems to me that the name of the widget is defined by using a class. I name my Stateful widget Ball and it changes the name of the state as well, for example:

class Ball extends StatefulWidget {

  @override

  _BallState createState() => _BallState();

}

class _BallState extends State<Ball> {

  int ballNumber = 1;

  @override

  Widget build(BuildContext context) {

    return Center(

It’s in between the class _BallState extends State<Ball> { curly braces that I define my programs variables and functions. Here, I created a variable called ballNumber and I set it to 1.

I am returning the rest of my apps body in the return Center(), portion of this Stateful widget. Which is loaded in my Stateless widget by just calling on the name of the Stateful class I titled Ball:

class BallPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: Colors.lightBlue,

      appBar: AppBar(

        backgroundColor: Colors.blue,

        title: Text(‘Ask Me Anything’),

      ),

      body: Ball(),

    );

  }

}

The name of this Stateless widget is called BallPage, and a lot like how I call on my Stateful widget in my body property I do the same with my Stateless widget in the runApp==> Material App widget, like so:

void main() => runApp(

      MaterialApp(

        home: BallPage(),

      ),

    );

I’m telling Dart, run this app that’s built with your MaterialApp framework and the contents of this app can be found in the following Stateless widget titled, BallPage. With your home: property you will find home: BallPage(), which makes sense when you analyze how each widget inherits the code preceding it. 

So remember that the Stateless widget holds the body of your Stateful widget, and the Material App needs to load both of those by calling on the name of the Stateless widget you define with the home: property. Make sense? Maybe re-read that a few more times. It’s computer language, you begin to realize how meticulous computer languages are. 

Stateless widgets hold no functionality and Stateful widgets do. Your Stateless widget needs to know about your Stateful widget with the body: property and your Stateful widget needs to return the Center or Container widget tree of the functional app you’re creating, got it?

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

void main() => runApp(
      MaterialApp(
        home: BallPage(),
      ),
    );

class BallPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlue,
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text('Ask Me Anything'),
      ),
      body: Ball(),
    );
  }
}

class Ball extends StatefulWidget {
  @override
  _BallState createState() => _BallState();
}

class _BallState extends State<Ball> {

  int ballNumber = 1;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FlatButton(
          onPressed: () {
            setState(() {
              ballNumber = Random().nextInt(5) + 1;
            });
            print(ballNumber);
          },
          child: Image.asset('images/ball$ballNumber.png'),
         ),
    );
  }
}

If you have any questions leave a comment below or reach out to me on instagram @kyleknob

I’ve learned a lot since my last entry, and it is all making very good sense. Since my last module with Angela I’ve become a bit more adapted to writing in Dart. I’m feeling pretty good about it. I suspect this is what I miss about being a student in conventional school. You’re introduced to something you want to know more about, you’re told to study that subject, you make notes that you can understand as you study, and you go over that for an hour a night until the test, you pass the test because it’s all so familiar, you get a good grade, you’re excited to tell your parents, and experience for the first time the pride in learning new things. 

Before I look at my notes, I’m going to try to remember some of the new things that I think are important for you to remember.

1. Start new functions with void. Like —  void nameFunc () { //do something}; — remember the syntax, () and {};
2. Variables can be called by it’s data type instead of calling out var use the data type to call it out — int = 12; — string = ‘Hello’; — remember the syntax = and close with ; 
3. Card widgets are formatted for a Icon leading horizontal box, use can make children [ ] within the widget that hold ListTile (), — ListTile widgets are followed by leading: property for Icons.icon, a title: property for Text(‘Some Text.’ style: TextStyle(fontFamily’Sans’),), — and a trailing: image or icon — wrap it all in a Padding() widget for some padding
4. Images can be called using child: Image.Asset(‘images/name.png’)— with string interpolation you can use the $myVarName to pass in the data of the var — Image.Asset(‘images/$myVarName.png’),
5. Stateful widgets are for functionality, stateless are for displaying content only — in the class page state method you want to call out your vars and functions — in the build method is where you hot reload your app and return a widget to begin the widget tree ie. return Center (),
6. An Expanded() widget in a Row() is meant to take up the entire width of the Row — Use Expanded widget instead of container to fit to width of any size device
7. FlatButton(), is used to wrap an object in a button. It needs to include onPressed(){ } to tell it what to do when you press the button. This is where you can check to see if it’s working with a print (‘Hello’), statement — you can’t really update the state of the button without putting setSate((){} inside of onPressed(){ } — setState tells the app to update what’s on the page when button is pressed.
8. Import ‘dart:math’; at the very beginning of your code to use the math library, I used this so far to call a Random function to my variables — varName = Random().nextint(max) + 1; randomizes the image in the images/ asset folder according to a number from 1 – 6, so I replace the max with a 6 and + 1 because it counts from zero

I only looked at my notes when I started to forget around number 6, but writing down notes and writing it out for you in a blog really helps cement the knowledge in my brain. If I keep this up I’ll be a pretty resourceful developer. I’m excited to learn more, but I’m going to study the layout of this code some more and I hope that you’re excited to learn more as well, us beginners need to help each other. I’m happy to share this journey with you. 

If you have any questions or comments leave them below, otherwise reach out to me on Instagram @kyleknob. 

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

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          title: Text('Dicee'),
          backgroundColor: Colors.red,
        ),
        body: DicePage(),
      ),
    ),
  );
}

class DicePage extends StatefulWidget {
  @override
  _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {

  int leftDiceNumber = 1;
  int rightDiceNumber = 2;

  void diceChange (){
    setState(() {
      leftDiceNumber = Random().nextInt(6) + 1;
      rightDiceNumber = Random().nextInt(6) + 1;
    });

  }

  @override
  Widget build(BuildContext context) {


    return Center(
      child: Row(
        children: [
          Expanded(
            child: FlatButton(
              onPressed: (){

                  diceChange();



              },
              child: Image.asset('images/dice$leftDiceNumber.png'
              ),
            ),
          ),
          Expanded(
            child: FlatButton(
              onPressed: (){

                  diceChange();

              },
              child: Image.asset('images/dice$rightDiceNumber.png'
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Each app begins with the runApp() function. It calls on the MaterailApp() Google designer framework that loads in all of the components to build an app with flutter. Using the home: property I call on the Scaffold() widget. Inside those parentheses I continue the widget tree with MaterialApp() as the father and home: Scaffold() within that.

Here I can add a backgroundColor defining it using Colors.nameofcolor you can find colors at material.io or just pick a basic color like Colors.red. Following the widget tree, beneath my background color of the entire app I use the property appBar: to call on the AppBar() widget within those parentheses I call out a title: property to use a Text() widget. Inside those parentheses I use a single quote ‘ to write my text string, in this case (‘This is a mushroom’). To call out the background color of the appBar I call it out just like I did for the Scaffold’s background. 

Now to add stuff to the body beneath the AppBar() I must remember to be outside of the AppBar closing parentheses ). Here I call on the body: property and I want the Center() widget for it to be centered in my Scaffold(). I must make it a child of the Center() widget by calling out child: property. Here I want an Image() widget. In these parentheses I tell the child: Image( that I want an image: that is a AssetImage() or a NetworkImage().

If it’s an AssetImage() I must open the pubspec.YAML file and under the assets portion of this YAML file I call out a folder I created in my flutter document called images. So pubspec.yaml looks something like:

Flutter:

  Assets:

    – images/nameofimage.png or simply leave it images/

Everything in this YAML file is read using double spaces, that’s important. So now that I called out an image in my Center() widget I can say I’ve successfully understand how the Scaffold() widget works and how things are placed in the body of the app. It’s a little tricky at first but the more I look over the code and try it from scratch over and over again, the more the syntax of dart starts to make sense. I would say this shouldn’t be too complicated once we get into interactivity by adding buttons and lists and so on, but if I continue to take my learning one step at a time, and then taking the time to understand it by writing it out to for you (my reader) I will eventually understand the concepts enough to code freely and solve issues as I run into them.

import 'package:flutter/material.dart';

//main is the start of all flutter apps
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black45,
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text('This is a Mushroom'),
        ),
        body: Center(
          child: Image(
            image: AssetImage('images/cordycepts.png')
          ),
        ),
      ),
    ),
  );
}

To use hot reload with Flutter you got to put your MaterialApp in a StatelessWidget{}, you can type out stateless and select StatelessWidget. This creates a class for your app, so change the class to MyApp or the name of your app, and change the code it provides you to return the MaterialApp() widget. 

Now that you set that up, you can build your Scaffold() widget tree. So within your parentheses of your MaterialApp() use the property home: and add Scaffold() like this: home: Scaffold(), Remember to use the comma after every end parentheses so Flutter can appropriately format the code. You can change the backgroundColor: property using Colors.white, but what’s important is to remember to use the body: property to call out the SafeArea() widget. Inside this SafeArea() is where you will start adding a child Column() widget, or Row() widget.

For instance, you can call out child: Column() to start another widget tree within that Column() parent, however to add multiple Container() widgets within the child: Column(), you will need to use the children: property with square brackets. I’m not sure why we use square brackets, but we do. Within those brackets is where we call out our containers and add properties to them like size, color and text.

Use mainAxisAlignment: property to align them in your Column() thus in your SafeArea(). MainAxisAlignment.spaceevenly will space your Container()’s evenly on your screen, there’s a lot more MainAxisAlignment and CrossAxisAlignment spacing techniques you can try, Flutter helps with that when you start typing it recommends what you might be trying to do. 

The power of Flutter and its MaterialApp framework is proving to be tricky, but not impossible to understand. I’m taking my time with my lesson with Angela on Udemy to fully understand what I’m coding, and I’m taking this effort to explain to you to further cement my knowledge of the Dart language in my brain. I’m making a conscious effort not to try to speed through these lessons and it’s paying off. I tried taking her class on Swift development and was trying to learn at some unreasonable pace that eventually when it got too difficult I gave up. If you’re like me and you can spot out your weaknesses, then do what you can to approach confronting them carefully. It is easy to be disappointed, but it takes real patience and practice to learn new things, and it’s real important to have a passion project you want to create to keep the fire going. I want to learn Flutter to build out my iOSs app readySketch, so that I can bring it to Android, expand it’s capabilities, gamify it a little more and learn to monetize it. I’m a long way from getting there, but everyday I make an effort to learn Flutter I’m one day closer than before. 

I hope this helps inspire you to keep learning and go easy on yourself. Our little human minds need time to absorb new languages. Remember you’re on the right path, and app development is one of the most exciting areas to gain knowledge in. Go after it, just pace yourself. I’m only on module 2. Feel free to reach out to me by leaving a comment below or on instagram @kyleknob

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Container(
            height: 100.0,
              width: 100.0,
            margin: EdgeInsets.only(left:30),
            padding: EdgeInsets.all(20),
            child: Text('Goofy'),
            color: Colors.white
          ),
        ),
      ),
    );
  }
}