How To Use Flutter Layout

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