An Introduction to Flutter: Basic Flutter Layout Concepts

What is Flutter?

The Flutter tutorials teach will help you how to use the Flutter framework to build mobile applications for iOS and Android. Flutter is actually a combination of two things: A SDK (software development kit) and a framework built upon Dart. Flutter aims to make cross-platform Mobile App development. The goal is to allow you to have one codebase that generates apps for multiple platforms (like iOS and Android and also Web). To achieve this goal, Flutter is compiled to native machine code and Flutter also offers a lot of utility tools and features to speed up your development work process.

In particular, Flutter is all about so-called widgets- reusable building blocks you can use to compose beautiful user interfaces. Unlike alternatives React Native, Flutter does not use the platform primitives (i.e. the default UI building blocks for android/ iOS give you) but controls every pixel on the screen itself. This gives Flutter (and ultimately you) more control over the user interface.

What is Dart?

Dart is the programming language used by Flutter. Flutter uses Dart because it’s a fast and efficient language that is compiled into native machine code.

Widgets, Widgets, Widgets:-

As mentioned, Flutter is all about widgets! Widgets are building blocks with which you compose the user interface for your mobile application. A button would be a widget, so would a text output be. You also have “invisible” widgets which you don’t see directly on the screen but which you use to structure and control other (visible) widgets.

For example, there is a “Column” widget in Flutter, with which you can order other widgets in a column, sitting above each other. You build your user interface in code only -there is no visual drag and drop editor or anything like that. Instead, you build a so-called “widget tree”, which means that you have one top-most widget which then takes another widget as arguments and so on. You also build your own widgets in Flutter- actually, your entire app is wrapped in one core widget that you build. Your widgets then are composed of other built-in or custom widgets.

Let’s make it more clear by creating a project.

Open VS Code On Your Machine:-

Make sure you have installed Flutter and dart extensions-

Hit ctrl + shift + p to open the command palette as below and select Flutter: New Application Project-

Congratulations, on your first Flutter project created by you. Isn’t it so simple?

Now tap on Run and then choose either Run with Debug or without debug mode-

Once the build process is completed this is what you will see as an output on your emulator. A brand new app developed by you.

Thank you and I hope you found Flutter interesting and worth learning.