Learning Flutter (Part 1)

Flutter is an open-source, mobile app SDK to help developers and designers build modern mobile apps for iOS and Android, which is developed and maintained by Google. Flutter applications are written in the Dart programming language, and can connect to platform languages such as Java, Kotlin, Swift, and Objective-C. Flutter itself is built with C, C++, Dart, and Skia (a 2D rendering engine).

Prerequisites

1. Dart
2. Object Oriented Programming Concepts
3. Flutter SDK
4. Android Studio or Visual Studio Code
5. Android Emulator or a phone with USB Debugging enabled.

You can go to the flutter docs and checkout how to set up flutter.

To confirm if you have installed flutter and the SDK has been added to path, open up your terminal and run: flutter doctor

It's fine if you don't have your device connected or emulator running.

Getting Started

To crerate a Flutter project: Create a project folder and open a terminal there and execute

flutter create tutorial

'tutorial' is the name of the project here.

Browse to lib → main.dart and delete all the code there and paste the code below.

import 'package:flutter/material.dart';

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Text('Hello World!'),
        )
    );
  }
}

Look at the ouput in codepen

• Dart and Flutter both use packages which lets you use import statements to use the classes in the libraries that you need. You'll probably need material.dart in most of your flutter apps.

You can find the official list of classes used by flutter here.

• The entry point of Flutter apps is the main method, which should always contain runApp() that takes a widget which is a class that will contain all the other parts of our app.

I have used MaterialApp() class which is provided by flutter, but you can choose to create your own class like the one below.

void main(){
runApp(MyWidget());
}

Since our main method is short, we can use arrow syntax like so to make it more readable:

void main() => runApp(MyWidget());

MyWidget() does not exist yet, so let's make a stateless widget.

Widgets

Flutter uses various widgets to build the laytout of your app, all the text, icons, buttons that you see are all widgets. A widget is simply a Dart class that extends a flutter class.

class MyWidget extends StatelessWidget{
...
...
}

MyWidget is a widget that inherits from the class StatelessWidget which is a Flutter class.

Check out some of the basic widgets recommended to learn by flutter community.

Layout

An app will basically have content that remains the same i.e statc and the contents that change with a trigger or an event. A layout can be classified into two types:

1. Static Layout: Static layout contain widgets which always remain the same, like a text or an image. Flutter provides us with with StatelessWidget to implement this layout.
2. Dynamic Layout: Dynamic layout contain widgets which change state based on a trigger or an event, like adding a todo list with the press of a button or deleting the todo with the press of a button or a swipe gesture. Flutter provides us with with StatelessWidget to implement this layout.

We'll be focusing on Stateless widgets for now. You can also visit flutter docs to add interactivity to your Flutter app.

Resuming with code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('app bar'),
        ),
        body: Center(
            child: Text(
          'Hi, This is the body',
        )
			),
      ),
    );
  }
}

We have come to know that widget is just a class that extends from flutter. I have used a statelessWidget class which is provided by flutter. We'll override the build method provided by flutter.

Every widget is created using a build method, and every build method takes a BuildContext as an argument. The BuildContext describes where you are in the tree of widgets of the app.

We'll have to return a widget in this build method, I have used MaterialApp widget which is a container that can be used to develop material design apps.

Material design is a design language developed by Google based on materials. Learn more about it at material.io.

I have added a Scaffold widget to the home of the MaterialApp. Scaffold contains the layout of a material app like the appBar, body, floatingActionButtion, and persistentFooterButtons .

Let's build a layout containing all the widgets in Scaffold.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('App bar'),
          ),
          body: Center(
            child: Text(
              'Body',
              style: TextStyle(
                fontSize: 24,
              ),
            ),
          ),
          floatingActionButton: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                print('runs in console');
              }),
        persistentFooterButtons:<Widget>[
          IconButton(
          icon: Icon(Icons.add_comment),
          onPressed:(){},
          ),
          IconButton(
          icon: Icon(Icons.add_alarm),
          onPressed:(){},
          ),
          IconButton(
          icon: Icon(Icons.add_location),
          onPressed:(){},
          ),
        ]
      ),
    );
  }
}

The above code illustrates how you can create a simple Material app using Flutter.

Themes

You might have noticed that the color of the appBar and the floatingActionButton are blue. This is because it is the primary color set by MaterialApp class to your widget. You can change it by passing ThemeData widget to Theme class. There are various styles you can apply using ThemeData.

You can find the live demo of the code above here

Links to resources

You can also find guided tutorial by the Flutter community on Codelabs.

Awesome Flutter has a list of all the resources you need to build an app.