Hitchhikers Guide to flutter from the JS world

Narendran — Wed, 05 Feb 2020 00:41:51 +0000

Every day it's the dawn of a new framework that has the potential to overthrow the existing one. This will be a series that focus on introducing flutter to the mass of the JS world. This series will be building from the ground up to the advanced level and I'll be guiding you through this journey. So, let our journey begin...

Epilogue

The year is 2020, a year over since the first stable release of Flutter. Flutter is changing the way we look at developing for multiple platforms with a single code base. With the stable version of flutter, we can create **IOS* & Android apps and support for creating apps for the web is in beta version and for macOS in alpha(which is under active development). The flutter team is working hard to get support for Linux and Windows support too.*

Lets understand the ecosystem of the flutter

Flutter is an opensource framework that is built on top of Dart programming language. Being said, Dart is a c syntax, statically typed, Object-oriented programming (OOP) language which adds lots of benefits to the flutter.
Flutter comes with hot reload the much-liked attribute of reactjs for us in the JS world, which makes us see the changes made to the app instantly.
Flutter repaints every widget*{? yes, the building blocks of flutter app, just like components in reactjs}* on the screen at 60 FPS, which makes the User Interface feel smooth. It's due to Flutter comes with skia an open-source 2D graphics library, which makes animations snappier and crisp.
Flutter comes with much-loved Google's material design built-in, which makes UI development a lot faster.
To install flutter in your system please follow this guide.

The latest stable version of flutter is v1.12.13+hotfix.7

For us folks in the JS world, we are well aware of package.json and npm registry {no problem managed or never pressure me} as they are the management system for packages in our builds and experiments.

In flutter world, external packages are called as pub packages and they are managed in pubspec.yaml file {yes, flutter team went with YAML file format than the ever beloved JSON file }. There's a central pub package registry, it's the pub.dev.

In short: package.json --> pubspec.yaml , npmjs.com --> pub.dev

Flutter supports Android studio ide, IntelliJ IDEA ide and the most loved VScode editor for development.

I love writing flutter code in vscode (I'm based on it, leave your comments on what you think.){when I say "writing flutter code" I actually mean writing dart code }

Good news to us curious folks out there who want to experiment with flutter environment before going through all the hassle installing (something like code sandbox for flutter) of was announced during flutter interact 2019 (which happened in 11 DEC 2019).Completely revamped DartPad, where we can try on.(dartpad has its limitations such as doesn’t support dart:io or libraries from pub.dev)

Since this is the epilogue we'll stick to dartpad to get familiar with flutter.

Buckle up for our journey to Flutter

Dart is the language of the flutter world, yet when dealing with flutter we have to know the framework-specific syntax way to write clean code.
Back in our JS world, we are much familiar with stateful & stateless class components.In flutter, we have StatefulWidget & StatelessWidget class widgets which are the basic building blocks.

Let's write our first flutter app.
We have to import flutter's material package to take advantage of the built-in Material design, import 'package:flutter/material.dart';.Since Dart is statically typed language we need to have a main() function which will invoke the app. In flutter, our app is started by calling the root widget runApp() in main()-function.

As mentioned above, everything in flutter is a widget, either the class extends a StatefulWidget or StatelessWidget to build that. In reactjs, we'll render each and every component to the screen, whereas in flutter we build it with passing the BuildContext context.BuildContext is used by flutter to manage the internal state of the widget in the widget tree. Every widget has its own buildContext.

Here, we need to override the build with the @override decorator every time inside StatefulWidget and StatelessWidget.

The annotation @override marks an instance member as overriding a superclass member with the same name.

Here comes the fun part. We return MaterialApp widget which is imported from the inbuilt material package import 'package:flutter/material.dart';.The MaterialApp widget has given us the power of Google's material design.
MaterialApp widget comes with loads of properties, yet our focus will remain on home widget which is for the default route of the app. To home, we assign the Scaffold widget which comes with the pre-configured material visual layout which is highly customizable.
Scaffold has the body property, which is responsible for the painting the body of the page(all the area below appBar).
To write something on the body, we use the Text widget, which takes a string as the input. (To carry forward the tradition of programming, let's give "Hello world"). Check out the live version here Look at the top left corner to see our hello world, so tiny, we'll style it.

In dart, for most cases we don't have to explicitly import methods from the package as we do in JS world. But there are certain cases where we need to do explicit imports, now we don't need to worry about it.

Let's style our app

In the JS world, we have all sorts of way to style {for eg. inline styles, css-in-js, css modules, SASS,LESS, etc}.In flutter, we style our widgets there and then, if you are used to css-in-js type styling you'll love the styling in flutter.
Let's first center our hello world with the help of Center widget, we assign a widget to another by using child or children property depending on the number of widgets it accepts.
Center widget takes only one child widget, so let's refactor like this

Now let's tweak the color, font size, font weight, font style.Text widget has style property which takes TextStyle class, where we can set these.
fontSize property takes a double value (float value for us from JS world), fontStyle property takes a FontStyle enum, fontWeight takes values from FontWeight.[ w100,w200,w300,w400,w500,w600,w700,w800,w900,bold,normal]. colorproperty takes in full 8 hexadecimal digits or with rgba or with rgbo or with a Colors enum. Let's set them here.

We have done some basic styles and built a simple widget with flutter. Now, let's create our own Beautiful widget called SmoothWidget which is a StatelessWidget.
Let's put @override and Widget build(BuildContext context) and then return our new Container widget. Container can be considered as div equivalent in the JS world, it returns a single child. There's a lot of property Container exposes which are easy and useful. We can set the width and height of the container with width & height property respectively, they take double as their value. We can decorate the Container with decoration, which accepts BoxDecoration where we can set the color, borderRadius,border etc.
Cut out the Center widget along with its child and put it as the child of Container. Vola, our new widget is ready

 class SmoothWidget extends StatelessWidget{
   @override
   Widget build(BuildContext context){
     return Container(
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25.0),
          color: Colors.cyan,
          border: Border.all(color: Colors.black, width: 6.0),
        ),
        child: Center(
          child: Text(
            "Hello World",
            style: TextStyle(
                fontSize: 26.0,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.bold,
                color: Colors.amber),
          ),
        ),
     );
  } 
}

But we see a problem, it's fixed to the top-left. It's easy to fix, wrap the return with the center widget and assign container as a child to it.Now, it's fixed

debugShowCheckedModeBanner is one of the properties exposed by the MaterialApp widget, it takes a boolean value by default it is true. Explicit assigning of false takes away the debug sticker from the top right corner.

Are we there?

This is the simple introduction to the flutter ecosystem, there's a lot to cover in the upcoming post such as Dart language, other awesome flutter widgets, stateFulWidgets lifecycle, Animations, Beautiful UI, platform-specific integration, etc. From the upComing post, we'll switch to a local flutter environment and we'll have our beloved Dash bird (flutter mascot) be with us to guide to his planet.
Till then, see you.