Have you just started learning mobile app development? Looking to explore cross-platform app development? If yes, then you need to learn Flutter. Flutter is a robust framework that is used to seamlessly build stunning and feature-packed mobile apps. In this blog, we will dive into the exciting world of Flutter for beginners, equipping you with the knowledge and skills needed to kickstart your mobile development journey. From understanding the basics of Dart programming language to mastering Flutter’s widget-based UI design. This article will cover the basics of flutter to give you an idea about what flutter actually is and why it is gaining so much popularity.

Introduction To Flutter

Flutter is one of the open-source frameworks developed by Google for building beautiful user interfaces, natively compiled, and multi-platform applications from a single codebase. To make a project in Flutter you need to know Dart, the language used to develop apps in Flutter. Dart is an object-oriented programming language developed by Google. This language is based on C and is very easy to understand and learn. By using Dart in Flutter, it avoids the use of two separate layouts for declaring UI and interacting with those UI components such as JSX or XML.

Flutter provides a large variety of benefits and advantages because of which it has been one of the most Highly used frameworks in the world. Some of the benefits are listed below : 

• Hybrid Development: Flutter can be used to design cross-platform applications. With the help of Flutter, we can develop apps that can be run on multiple platforms just with a single codebase. This saves a lot of time and effort for the developers as they don’t have to type different codebases for running the same application on different platforms.
• Reduce Code Reload Time: For any dart application, the initial compilation and the build requires a good amount of time, maybe in minutes. In order to solve this issue and to reduce development time, flutter upbrings two features: Hot Reload and Hot Restart, which compile the code and show the updated UI within seconds. 
• Native Platform Performance: Flutter does not depend on intermediate compilations, unlike other Hybrid languages. The Flutter compiles and produces the build directly into the machine code, which restricts any performance problems associated with the intermediate interpretation process and provides the performance as the app was built natively.
• Customizable and Expressive UI: Flutter offers a customizable layered architecture.  Its large variety of ready-to-use widgets makes it so easy to build highly customizable and beautiful application designs with highly interactive UI. 

Creating a new Flutter project on VS Code

1. Open the Command Palette ( For Windows: Ctrl + Shift + P )( For mac:  Cmd + Shift + P ).
2. Select Flutter: New Project command and press Enter.
3. Select the Application.
4. Select a Project path where you want to store the project.
5. Enter your Project name.

Following the above steps will open a simple default  Flutter Project which contains an AppBar on the top, a button to increase the number which is displayed on the center of the page.

You can run this project on a simulator if you’ve Mac or on an emulator if you’ve Windows. You can use the emulator by downloading Android studio and can make your own Android Virtual Device. 

Let’s dive into the files of the project.

To begin with there are two main files that you should know as these are files you’ll interact with initially:

Main.dart: Once your project is created, you’ll see a “lib” folder. This is the folder where you’ll work and create files. Opening the lib folder, you’ll have a main.dart() file. 

This is the root file of the project. Without this file, your project will not run. You should not delete or rename this file, it should remain as it is present but you can update the contents of this file according to your wish. This function contains the following functions:

1. main() : We know that any programming language has a main entry point from where the execution starts. Main() function is where our program first gets programmatically executed. This function starts the program. Flutter does not allow us to write any program without the main() function.  In this function, you’ll see runApp().
2. runApp(): Using runApp(), we return the root of the widget that is the first widget of the first screen from where the application starts. runApp() returns the root of the widget tree and is called in the main function which is the driver of the project.
3. Pubspec.yml: The pubspec.yaml file which is also known as ‘pubspec’, is basically the configuration file of the flutter project. This is located at the top of the widget tree so that all the dependencies can be rendered before rendering the widget tree. This file contains declaration of the dependencies like packages and plugins along with their versions, fonts, etc., that a project requires. During working with the Flutter project, this file will be required a lot. This file is written in YAML, which can be read by humans.
   This file also contains name of the project, description,version etc and assets used in the project if any.

Flutter’s Widgets

Let’s get to the topic without which Flutter application cannot be developed, Widgets!

Everything in flutter is a widget. Generally, a Flutter app consists of a number of widgets. A widget is a way to declare and construct user interfaces. In Flutter, you must develop a widget in order to build anything. Everything in flutter is comprised of widgets from bottom to top.  Flutter runs by nesting widgets on into another. As soon as you modify the widget’s code, it will update the UI with the new modifications been entered. 

There are two types of widgets in Flutter: Stateless Widgets and Stateful Widgets.

• Stateless Widget: Stateless widgets are static and as the name says, they don’t store any state. The widget that does nothing and cannot rebuild itself is a stateless widget. Thus, they don’t save values that may change in the UI. If you want to make a widget that does not change or gets updated, then use a stateless widget.
• Stateful Widget:  Stateful widgets are dynamic, which means they can monitor changes and update the UI accordingly. Stataful widget contains a function setState() which will re-render itself as soon as their a change in the UI. If you want to update the UI either on User interaction or on any API response, we use Stateful widgets. 

Conclusion

So this was it for Flutter. This article was to give you an idea about what a flutter project looks like and why people use it. You can explore various widgets and develop apps with your own unique ideas. You can refer to the official flutter document for learning different widgets and can use it.