Flutter For Beginners#2 - Flutter Overview

SO WHAT EXACTLY IS FLUTTER?

Flutter began its life under the name “Sky” in 2015 at the Dart developer summit

don’t forget that word, Dart (you might already have an idea of what it is, if you read the flutter intro, we’ll be coming back to Dart in our next article on this series).

One of the key decisions Google made when designing Flutter is something that made it unique from most other mobile development options, and that’s the fact that Flutter renders its own UI components. In simpler concise words, when you tell flutter for example, to render a button in a UI, it won’t go on asking the underlying OS to render the button, Flutter itself renders that button. This has the benefit, that new UI features can be added to Flutter, quickly and easily without worrying about whether the underlying platform supports them.

Flutter can be seen as being comprised of four main parts, which are:

  • Dart programming language, this is the programming language flutter uses.

    Don’t worry about Dart now, it deserves its own article. we will discuss it in our next article on this series.

  • The main Flutter engine, the Skia graphics engine which flutter uses to do its rendering. Skia is a compact, open-source graphics library, also written in C++, that has grown to have excellent performance across all supported platforms.

  • The foundation library, this is an interface over the native SDKs of each platform, in other words, if for example you want to launch camera, you don’t need to worry about how to launch the camera app on Apple iOS vs. how you launch it on Android OS vs how you launch it on Windows OS, you don’t need to think about what API to use on one platform vs. another. You merely need to know the Flutter API call to make to launch the camera app, and it’ll work on each platform.
  • The final part is the widgets, but like Dart, they too deserve their own article.

ITS ALL ABOUT WIDGETS

In Flutter, everything is a widget. So What exactly is a widget? Well, they are chunks of your UI. A widget is also, obviously, a chunk of code, for example:

Center (
   child: Container(
      child : Row(
        Text("Child 1"),
        Text("Child 2"),
        RaisedButton(
           onPress : function() {// Do something.},
           child : Text("Click me"
       )
     )
   )
 )
)

Given that everything is a widget, a natural effect is that in Flutter, your code, turns out to be nothing but a giant hierarchy of widgets and this hierarchy in Flutter is called the “widget tree”. You see, most widgets are containers, meaning they can have children. Some widgets can have but a single child while others can have many. And then, those children can each have one or more children, and so on and so on – its widgets all the way down!. At a code level, a widget is just a Dart class. A Flutter widget extends one of a handful of standard classes, which Flutter itself provides. The class extended determines what kind of widget we’re dealing with at a fundamental level. There are two types that you’ll use 99% of the time: StatefulWidget and StatelessWidget.

And What Exactly are StatefulWidgets and StatelessWidgets? A StatefulWidget is a widget that changes when a user interacts with it. A Slider, CheckBox, TextField, these are well known examples of stateful widgets. When you code such a widget, you actually have to create two classes: the stateful widget class itself, and a state class to go along with it. Here’s a Boilerplate code sample of a StatefulWidget.

class MyApp extends StatefulWidget {
  MyApp({Key ?key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: child,
    );
  }
}

A StatelessWidget never changes and is called a stateless widget because it has no state, things like Text widgets which displays strings of text, are said to be stateless widgets. Here’s a Boilerplate code sample of a StatelessWidget:

class ProductName extends StatelessWidget {
  const ProductName({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
    );
  }
}

you are not expected to understand this code yet, don’t be hung up on the details yet, we will go into dart in our next article

The core difference between a stateful and a stateless widget though is that a stateless widget doesn’t automatically get re-rendered by the Flutter core framework when its “state” changes, whereas a stateful widget does.

There are two main things you probably should have noticed at this point that are important about all of this.

1-Flutter UI’s are built by composing widgets. 2-Flutter UIs are built from code. There’s only a single language to learn & a single paradigm to comprehend.

We’ll get into more detail starting in the article after Dart Programming language introduction, we will tour the Flutter widget catalog!

Advantages of Flutter

  • Same UI and Business Logic in All Platforms
  • Reduced Code Development Time
  • Increased Time-to-Market Speed
  • Similar to Native App Performance
  • Custom, Animated UI of Any Complexity Available
  • Own Rendering Engine
  • The Ability to Go Beyond Mobile

Disadvantages of Flutter -The cons are insignificant that I biasedly decided not to add the few

Ok, Let’s Get Going with Flutter!

Oops, before we can get to start coding, we probably should get Flutter installed, plus whatever tooling we’re going to need. Fortunately, getting our development environment set up for Flutter is pretty easy. Head over to flutter.dev/docs/get-started/install , which is your “one-stop shopping” location for Flutter installation. You’ll find yourself on the Install page where you can select which operating system you’re using (Windows, Chromebook, MacOS, or Linux). If you are a windows user and want to follow my kind of procedure and setup like mine( as at the time of writing this, I test apps I build, on a physical android device), go through this article I wrote ( How To Setup Flutter To Work With Physical Android Device )

Basic Flutter Application Structure

One final topic to touch on in this introductory chapter is the overall structure of the application that was generated for you. See image below:

2021-06-09 13_23_34-flutter_application_1 - Visual Studio Code.png

As you can see, there are five top-level directories. They are

  • android - This contains Android-specific code and resources, things like application icons, Kotlin code, and Gradle configuration and transient resources (Gradle being the build system Android uses).
  • ios - Just like the android directory, this directory contains project code specific to ios. The critical content here is the ios/Runner/Assets.xcassets directory, which is where the iOS-specific icons for your app are found, and the Info.plist file in ios/Runner, which roughly serves the same purpose as the AndroidManifest.xml file for Android apps.
  • lib - Tis where you will spend 99.8% of development time, This is where your application code will live! You are relatively free to organize your code any way you wish here, creating whatever directory structure suits you, though you’ll need one file to serve as your entry point and most of the time that’ll be the main.dart file that was generated for you.
  • test - Here you will write Dart codes for executing tests against your app.
  • web - Just like the android directory, this directory contains project code specific to web.
  • Although hidden by default in Android Studio, there is also an .idea directory, which stores Android Studio configuration information and as such you can ignore it (note that Android Studio is based on the IntelliJ IDEA IDE, hence the name).
  • .gitignore - The file Git version control uses to know what files, if any, to ignore.
  • .metadata - Data that Android Studio to track your project.
  • .packages - Flutter comes with its own package manager to manage dependencies within your project. This package manager is called Pub, and this file is what it uses to track dependencies in your project.
  • *.iml - This file should be named after your project and is Android Studio’s project configuration file.
  • pubspec.lock and pubspec.yaml - pubspec.yaml is how you will describe your project for Pub, including dependencies it has. The pubspec.lock file is a file Pub uses internally. You’ll definitely edit pubspec.yaml, but not pubspec.lock.
  • README.md – A readme file that you are free to use however you wish. Typically, this Markdown file is what sites like GitHub use to show information about your project when you browse to a repository where this file is in the root.

Summary

In this Article, you started your Flutter journey! You learned about what Flutter is, what it offers. You learned about critical concepts like widgets. You learned how to set up your development environment to be able to work on Flutter code. In the next article, you’ll learn more about Dart, getting a good foundation in it, so that we can move on to building real world apps with Flutter!

No Comments Yet