Azure in Mobile Apps - Introduction to Flutter
Published: 2021-01-13 15:46:55

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/askffyobufkm881fmyue.jpg)


The UI is...
![The UI](https://dev-to-uploads.s3.amazonaws.com/i/0jf21vp9fkh3qs6smwpk.jpg)
          ... 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'),
      ),
    ),
  );
}

```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ersbl55rov9zpoylbvh.jpg)
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.