Intro to flutter
Published: 2020-05-14 18:38:06

### What is flutter?
* Flutter is a mobile UI framework for creating Native apps for iOS and Android
* Flutter uses a single codebase (dart language) meaning we write once and run on multiple devices.

*disclaimer: this is not a write up about dart - I will do that some other time*

#### why flutter?
* again, single codebase
* layout is responsible for web
* smooth and quick experience when running apps
* works out of the box with firebase
* uses Dart - a language that is easy to grasp and understand
* uses Material design right out-of-the box
* amazing documentation

#### What made it easy for me to pick up flutter?
An understanding of at least one language (mine was javascript and python)
A basic understanding of programming principles:
- classes and constructors
- functions and methods
- variables
- asynchronous code

### Tools and hacks
Necessary tools
- Android studio - and android virtual device (emulator)
- git
- xcode - ios simulator
- flutter - installed on your pc or mac

Nice to have
- vscode editor - I will do a write up on all the extensions that have made mine really interesting
- a physical device to test on

other interesting tools...
- [DartPad](https://dartpad.dartlang.org/) - its an interesting online editor for dart, kinda like jsbin, repl.it and others
- [pub.dev](https://pub.dev/) - a single repository for flutter packages
- [books](https://dart.dev/resources/books) - books about dart

## Overview...
***
### Basic concepts

Widgets
- everything inside a flutter app is basically a widget. the main app root is usually a material widget(root widget) which may contain other widgets such as appBar, container, text, button, row, column, image etc.
*example*
```
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Avengers'),
          centerTitle: true,
          backgroundColor: Colors.pinkAccent[400],
        ),
        body: Center(
          child: Text(
            'Hello avengers!',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              fontFamily: 'IndieFlower',
              letterSpacing: 2.0,
              color: Colors.grey[600],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Text('click'),
          backgroundColor: Colors.pinkAccent[400],
        ),
      ),
    ));
```
- widgets are basically classes and have properties and methods associated with them
- widgets can either be:
  - *Stateless* - the state of the widget **cannot** be changed over time (they can contain data but that data can't change after the widget has been initialized)
  - *stateful* - the state of the widget **can** change over time.

```
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
```

> *by using stateless and stateful widgets we are able to use flutter's hot-reload function to perform a hot restart the screen every time we make updates to the widget tree*
```
void main() => runApp(
      MaterialApp(
        home: Home(),
      ),
    );

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Avengers'),
        centerTitle: true,
        backgroundColor: Colors.pinkAccent[400],
      ),
      body: Center(
        child: Text(
          'Hello avengers!!',
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            fontFamily: 'IndieFlower',
            letterSpacing: 2.0,
            color: Colors.grey[600],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Text('click'),
        backgroundColor: Colors.pinkAccent[400],
      ),
    );
  }
}
```

> The `@override` function is used to mean that the `Widget build(BuildContext context)` will override the inherited functionality extended from the class `StatelessWidget` 


Images

>using images in flutter is quite easy. Images can be applied as both `AssetImage` widgets and `NetworkImage` widgets.
>images can also be displayed with `Image.network` for Network images or `Image.asset` for Asset images. example below:

```
Center(
  child: Image.asset('assets/space-3.jpg'),
)
```

Icons and Buttons
>flutter uses material icons from the material design library

.
*icon*
```
Icon(
  Icons.airport_shuttle,
  color: Colors.teal,
  size: 50.0,
)
```
*button*
```
Center(
  child: RaisedButton(
    onPressed: () {
      // function goes here
    },
    child: Text('click me'),
  ),
)
```
*button with icon*
```
RaisedButton.icon(
  onPressed: () {
    // function goes here
  },
  icon: Icon(Icons.mail),
  label: Text('mail me'),
)
```
*icon button*
```
IconButton(
   onPressed: () {},
   icon: Icon(Icons.alternate_email),
   color: Colors.amber,
)
```
*****************************************************************

## whats the verdict?

While I may not be able to cover most of the widgets, I suggest you try flutter today. 
I only picked up flutter about a month ago and in that period I have been able to build cool and amazing apps. 
I believe in learning as I build and I suggest you do the same.
I come from a React and React Native background and I am really excited about the future of flutter.

{% twitter 1251484743172001793 %}

{% twitter 1253245608347009026 %}

You can view more of my work on my [Github](https://github.com/kharioki)
You can get more materials on some great courses at [App Brewery](https://www.appbrewery.co/) and also on [YouTube](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ)

___________________________________________________________________

so until next time, Have a great time and take care.