Azure in Mobile Apps - Introduction to Flutter

Hello and welcome to another blog in this series.
This series is about implementing azure technologies into mobile apps.
We'll be using flutter mobile sdk for the development, and hence the need for introduction.

What is flutter?

Flutter is an open-source UI software development kit used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

Easy right?
Let's scoot over to the fun part!

How does flutter work?

Flutter is built in a whole new way, compared to other frameworks, working more like a gaming engine, than a traditional application framework.
From a very high level, your app is composed of Widgets(mark this), that are rendered onto a Skia canvas, and sent to the platform. The platform shows the canvas, and sends events back as required.
Your app runs on the platform natively, Ahead of Time complied.

Confused? No worries. Just note that flutter apps are composed of widgets.

Widgets?

A widget is a basic UI element.
Lets take a look at some examples.
Example 1
You want to add text to your app. You'll create a Text widget in flutter and pass in a string as a parameter like this:

Text('Hello world')

Example 2
How to add a button. There are many types of buttons in flutter, FlatButton being among them. Let us create a FlatButtonWidget:

FlatButton(  
     child: Text('LogIn'),  
     color: Colors.blueAccent,  
     textColor: Colors.white,  
     onPressed: () {},  
)

Note the parameters of the Flatutton widget. We have a 'child' parameter with its value as a Text widget. This means we can nest other widgets as children inside other widgets. Cool right?
Other parameters you can add are 'color', 'textColor' and 'onPressed' which is a function that will be triggered when the button is pressed. These parameters are separated by commas.

Creating a simple app

Below is a flutter app code that displays 'hello world'

step 1
This line of code imports dart material package that is responsible for providing all widgets.

import 'package:flutter/material.dart';

step 2
Creating the main method. This is the starting point of the app, and will be :

import 'package:flutter/material.dart';

void main() {

}

step 3

• The first function is the runApp() function, which accepts a Widget as parameter. Let's add it to the main method, and pass in a MaterialApp() widget.
• Flutter provides a number of widgets that help you build apps that follow Material Design.
• The MaterialApp() widget provides all it's children widgets with these material design components.
• This widget takes in multiple parameters, but we'll stick to two in this case i.e title and home The code becomes:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: ,
      home: ,
      ),
    ),
  );
}

Step 4
The title parameter requires a string, which is basically the app's name.
The home parameter requires a widget, and acts more like the child parameter.
After filling in the string as title, we'll place a Text widget into the home parameter.
The resulting code will be:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'MyApp',
      home: Text('Hello World'),
      ),
    ),
  );
}

step 5
Let's run the app and see the results:

The UI is...

... crappy.

Let's see what we can do about that.

step 6

• In the home parameter from the MaterialApp widget, let's add in a widget called a Scaffold before the text, and add the text as it's child.
• The Scaffold widget simply adds appBar, body and other necessary elements to the application.
• This prevents widgets placing themselves in unnecessary positions (as in the previous code), by specifying which part you want to place them.
• In this case, we want the text widget to be in the body. Let's add it and see it in action:

void main() {
  runApp(
    MaterialApp(
      title: 'MyApp',
      home: Scaffold(
        appBar: AppBar(),
        body: Text('Hello World'),
      ),
    ),
  );
}

Now that's better.
Now you understand how flutter works, I'll leave it there for you to absorb the content.
Stick around to learn on how we can add more widgets to make more beautiful and interesting apps.

Conclusion

Building an app in flutter is easy. You can see how we created a simple layout in few lines of code.
For further understanding of flutter, visit the official documentation site: https://flutter.dev/docs

Next: Setting up your flutter environment.