Month: September 2020

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. 

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