Starting with Flutter

What is Flutter ??

Let me explain this with an example. If you are an android developer and you made a very popular app then there will always be a question like when it is coming to iOS. Then you will learn shift and develop an iOS app so that your app will also available on app store. But the main problem is when you want to push some updates to your app then you should do it separately for both android and iOS, and to do that you want to maintain two code bases for that. And one of the major disadvantage is that every phone has its own size so that the layout differs from phone to phone and users may complain more about your work than appreciation. To overcome all these problems, one want to use Flutter. In recent times technology is growing rapidly and we can see dispalys every where like on the wall, mirror etc. which are of different sizes and aspect ratio. With Flutter we can easily develop beautiful interfaces for all these sort of different devices. Flutter comes with pre built widgets like row, column, stack, padding, center etc. to layout the apps. The only thing Flutter wants is a blank screen on the device.

Why Flutter ??

The primary reason is it has one code place to maintain, debug and update. Generally we use shift for iOS, java or kotlin for android and javascript for web apps but in Flutter there is only one powerful language called Dart. We can use Dart and create apps for all sort of devices. Generally we use constraints to build the apps and if the number of elements in the screen increases then our constraints will also increases. For an example 5 years back we can see phones of 3.5 or 4 inch screens but now there is no limit for the screen size and we also have bezel less dispalys. So as the screen size increases the contents in the screen also increases. Flutter gets the inspiration from web where we can change the size of the window as our wish and the contents of the screen will arranges accordingly to the size of the screen. The main advantages of Flutter are :

1. Its user interface which change accordingly with the size of the screen
2. Reloading after saving the code is similar to the refresh button where the changes can be seen very fast.
3. When we are working with Flutter we can access the original source code because it is an open source which means if you want to see how code is implemented you can just keep the curser on it and can see the changes. So that you can easily understand how the widget works.

Anatomy of Flutter app

As mentioned above it is of building widgets upon widgets. The basic app structure is : We have a blank screen and it is called as "Scaffold" and at the top of it we have "App bar" it is a pre built widget. Below the app bar we have a "Container" which holds our content, in the container we have a "Column" and the column is divided into two parts. The top part contains a "Row" and it contains text or an icon, and the bottom part contains "Piece of text" or an "Image" for image we need its url. This becomes a widget tree.

scaffold{ appbar, container{ column{ row{ text, icon,} text or image } } }