Hitchhikers Guide to flutter from the JS world
Tags: flutter, dart, beginners, opensource
Published: 2020-02-05 00:41:51

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](https://flutter.dev/docs/development/tools/sdk/releases) 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](https://dart.dev/) 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](https://skia.org/) 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](https://flutter.dev/docs/get-started/install). 
> 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](https://pub.dev)**.

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

Flutter supports [Android studio ide, IntelliJ IDEA ide](https://flutter.dev/docs/get-started/editor?tab=androidstudio) and the most loved **[VScode](https://flutter.dev/docs/get-started/editor?tab=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](https://dartpad.dev/31a6e82694f2e28b851ec7abb60843d2)**, 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.
{% gist https://gist.github.com/narenarjun/168b48dc0b6388d2a0e84a2cfd639d90 %}

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. 
{% gist https://gist.github.com/narenarjun/94a8160eb65906a58a30aa8e4ad58bfd %}


Here, we need to override the build with the `@override` decorator every time inside `StatefulWidget` and `StatelessWidget`.
>The annotation [@override](https://api.dart.dev/stable/2.7.1/dart-core/override-constant.html) 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](https://dartpad.dev/ecabc097cb627cdc8db1b6835a9b3aab) Look at the top left corner to see our `hello world`, so tiny, we'll style it.

{% gist https://gist.github.com/narenarjun/ecabc097cb627cdc8db1b6835a9b3aab  %}    


>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](https://dartpad.dev/772524a3660aeb83aedffe648446471e)
{% gist https://gist.github.com/narenarjun/772524a3660aeb83aedffe648446471e %}

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]. `color`property takes in full 8 hexadecimal digits or with rgba or with rgbo or with a `Colors` enum. Let's set them [here] (https://dartpad.dev/4b5593acb859fb28a4a36e44633e1b69).
{% gist https://gist.github.com/narenarjun/4b5593acb859fb28a4a36e44633e1b69 %}

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](https://dartpad.dev/a7a53b96a3c7f5fdf02183dc8d60917a) 

```
 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](https://dartpad.dev/18b533e16552a211de7da7815579427f)

{% gist https://gist.github.com/narenarjun/18b533e16552a211de7da7815579427f  %}

>`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.


>this is my first ever blog. Looking forward to your feedback and comments.