Understanding Google Flutter & Dart Programming

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