DEV Community

Tony Kharioki
Tony Kharioki

Posted on

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],
        ),
      ),
    ));
Enter fullscreen mode Exit fullscreen mode
  • 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();
  }
}
Enter fullscreen mode Exit fullscreen mode

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],
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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'),
)
Enter fullscreen mode Exit fullscreen mode

Icons and Buttons

flutter uses material icons from the material design library

.
icon

Icon(
  Icons.airport_shuttle,
  color: Colors.teal,
  size: 50.0,
)
Enter fullscreen mode Exit fullscreen mode

button

Center(
  child: RaisedButton(
    onPressed: () {
      // function goes here
    },
    child: Text('click me'),
  ),
)
Enter fullscreen mode Exit fullscreen mode

button with icon

RaisedButton.icon(
  onPressed: () {
    // function goes here
  },
  icon: Icon(Icons.mail),
  label: Text('mail me'),
)
Enter fullscreen mode Exit fullscreen mode

icon button

IconButton(
   onPressed: () {},
   icon: Icon(Icons.alternate_email),
   color: Colors.amber,
)
Enter fullscreen mode Exit fullscreen mode

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

You can view more of my work on my Github
You can get more materials on some great courses at App Brewery and also on YouTube


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

Top comments (0)