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]. color
property 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 theMaterialApp
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.
Top comments (0)