Intro to flutter

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 - its an interesting online editor for dart, kinda like jsbin, repl.it and others
pub.dev - a single repository for flutter packages
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.

Liquid error: internal