IDE (editors) are software programs that allow the user to create and edit text files. In the development field, editors usually refer to the source code editors that include many special features for writing and editing code. We can create Flutter apps using any text editor that can easily combine with our command-line tools. However, it is recommended to use editor plugins (IDE) for a better experience. These plugins come with Syntax highlighting, code completion, widget editing assists, run & debug support, and many other features. Flutter supports several IDE to build the apps. Some of them are discussed below, but you can go ahead if you want to use a different editor. The most popular IDEs that give the most effective support for the Flutter application development are: Let us see each IDE one by one. Android Studio It is free, open-source, and the fastest tool used to build an app on every type of android device. It provides a complete experience for developing Flutter applications such as code completion, navigation, syntax highlighting, refactoring, widget editing assists, and run & debug support, etc. The main purpose of the android studio is to accelerate the development process and build high-quality apps for all android devices. It allows the developer to fix certain code issues automatically. To download the android studio,. IntelliJ Idea IntelliJ IDEA is the most powerful and popular IDE among developers, which is developed and maintained by JetBrains Company. It is licensed by Apache 2.0. It supports many languages to develop applications. It will become a favorite IDE for many developers because it supports excellent plugins and a comprehensive built-in feature set. If you are going to develop an application with Dart language, it acts as a prime leader compared to other IDEs. It offers a complete experience for app development such as smart coding assistance for Dart that includes code completion, formatting, navigation, intentions, refactoring, built-in debugger, integration with pub and the Dart Analysis Server. It allows us to fix certain code issues automatically. IntelliJ Idea is mainly available in two editions: To download IntelliJ Idea,. Visual Studio Code Visual Studio Code or VS Code IDE is a famous editor in the market for developing the Flutter application. It is free and easy to use. Most developers use this IDE for Flutter application development because Microsoft’s trusted company backs it. It has relatively high growth and support. It provides a simple Dart plugin that makes the app development faster (within 10 minutes or less). It offers features such as Syntax highlighting, Code Completion, Realtime errors/warnings/TODOs, Pub Get Packages command, Pub Upgrade Packages command, Type Hierarchy, etc. The VS code editor can work on macOS, Windows, and Linux. To download the VS Code, . Emacs (Dart Mode) It is a lightweight IDE that provides support for app development using Flutter and Dart. It is a free and open-source plugin on GitHub. It can be used directly in our Emacs installation for coding in Dart. It is an extensible, customizable, self-documenting, and real-time display editor that supports over 10000 built-in commands. Emacs can work with several operating systems, such as GNU, GNU/Linux, MacOS, Windows, FreeBSD, OpenBSD, and Solaris. To download the Emacs, . Codemagic It is also a useful tool to develop, test, and deliver Flutter application in record time. If we use the Flutter framework to develop an app, it will boost the development process. It provides Cinemagic to test and release the app. It also helps in marketing our app without facing many issues. It is a free and open-source IDE. It also allows us to contribute anything to improve its documentation.

In this section, we are going to discuss state management and how we can handle it in the Flutter. We know that in Flutter, everything is a widget. The widget can be classified into two categories, one is a Stateless widget, and another is a Stateful widget. The Stateless widget does not have any internal state. It means once it is built, we cannot change or modify it until they are initialized again. On the other hand, a Stateful widget is dynamic and has a state. It means we can modify it easily throughout its lifecycle without reinitialized it again. What is State? A state is information that can be read when the widget is built and might change or modified over a lifetime of the app. If you want to change your widget, you need to update the state object, which can be done by using the setState() function available for Stateful widgets. The setState() function allows us to set the properties of the state object that triggers a redraw of the UI. The state management is one of the most popular and necessary processes in the lifecycle of an application. According to official documentation, Flutter is declarative. It means Flutter builds its UI by reflecting the current state of your app. The following figure explains it more clearly where you can build a UI from the application state. Let us take a simple example to understand the concept of state management. Suppose you have created a list of customers or products in your app. Now, assume you have added a new customer or product dynamically in that list. Then, there is a need to refresh the list to view the newly added item into the record. Thus, whenever you add a new item, you need to refresh the list. This type of programming requires state management to handle such a situation to improve performance. It is because every time you make a change or update the same, the state gets refreshed. In Flutter, the state management categorizes into two conceptual types, which are given below: Ephemeral State This state is also known as UI State or local state. It is a type of state which is related to the specific widget, or you can say that it is a state that contains in a single widget. In this kind of state, you do not need to use state management techniques. The common example of this state is Text Field. Example In the above example, the _name is an ephemeral state. Here, only the setState() function inside the StatefulWidget’s class can access the _name. The build method calls a setState() function, which does the modification in the state variables. When this method is executed, the widget object is replaced with the new one, which gives the modified variable value. App State It is different from the ephemeral state. It is a type of state that we want to share across various parts of our app and want to keep between user sessions. Thus, this type of state can be used globally. Sometimes it is also known as application state or shared state. Some of the examples of this state are User preferences, Login info, notifications in a social networking app, the shopping cart in an e-commerce app, read/unread state of articles in a news app, etc. The following diagram explains the difference between the ephemeral state and the app state more appropriately. The simplest example of app state management can be learned by using the provider package. The state management with the provider is easy to understand and requires less coding. A provider is a third-party library. Here, we need to understand three main concepts to use this library. ChangeNotifier ChangeNotifier is a simple class, which provides change notification to its listeners. It is easy to understand, implement, and optimized for a small number of listeners. It is used for the listener to observe a model for changes. In this, we only use the notifyListener() method to inform the listeners. For example, let us define a model based on ChangeNotifier. In this model, the Counter is extended with ChangeNotifier, which is used to notify its listeners when we call notifyListeners(). It is the only method that needs to implement in a ChangeNotifier model. In this example, we declared two functions the increment and decrement, which are used to increase and decrease the value. We can call notifyListeners() method any time the model changes in a way that might change your app’s UI. ChangeNotifierProvider ChangeNotifierProvider is the widget that provides an instance of a ChangeNotifier to its descendants. It comes from the provider package. The following code snippets help to understand the concept of ChangeNotifierProvider. Here, we have defined a builder who will create a new instance of the Counter model. ChangeNotifierProvider does not rebuild Counter unless there is a need for this. It will also automatically call the dispose() method on the Counter model when the instance is no longer needed. If there is a need to provide more than one class, you can use MultiProvider. The MultiProvider is a list of all the different Providers being used within its scope. Without using this, we would have to nest our Providers with one being the child of another and another. We can understand this from the below code. Consumer It is a type of provider that does not do any fancy work. It just calls the provider in a new widget and delegates its build implementation to the builder. The following code explains it more clearly./p> In the above example, you can see that the consumer widget only requires a builder function, which is called whenever the ChangeNotifier changes. The builder function contains three arguments, which are context, count, and child. The first argument, context, contain in every build() method. The second argument is the instance of the ChangeNotifier, and the third argument is the child that is used for optimization. It is the best idea to put the consumer widget as deep as in the tree as possible.

Gestures are an interesting feature in Flutter that allows us to interact with the mobile app (or any touch-based device). Generally, gestures define any physical action or movement of a user in the intention of specific control of the mobile device. Some of the examples of gestures are: We use all these gestures in everyday life to interact with your phone or touch-based device. Flutter divides the gesture system into two different layers, which are given below: Pointers Pointers are the first layer that represents the raw data about user interaction. It has events, which describe the location and movement of pointers such as touches, mice, and style across the screens. Flutter does not provide any mechanism to cancel or stop the pointer-events from being dispatched further. Flutter provides a Listener widget to listen to the pointer-events directly from the widgets layer. The pointer-events are categories into mainly four types: PointerDownEvents: It allows the pointer to contact the screen at a particular location. PointerMoveEvents: It allows the pointer to move from one location to another location on the screen. PointerUpEvents: It allows the pointer to stop contacting the screen. PointerCancelEvents: This event is sent when the pointer interaction is canceled. Gestures It is the second layer that represents semantic actions such as tap, drag, and scale, which are recognized from multiple individual pointer events. It is also able to dispatch multiple events corresponding to gesture lifecycle like drag start, drag update, and drag end. Some of the popularly used gesture are listed below: Tap: It means touching the surface of the screen from the fingertip for a short time and then releasing them. This gesture contains the following events: Double Tap: It is similar to a Tap gesture, but you need to tapping twice in a short time. This gesture contains the following events: Drag: It allows us to touch the surface of the screen with a fingertip and move it from one location to another location and then releasing them. Flutter categories the drag into two types: Long Press: It means touching the surface of the screen at a particular location for a long time. This gesture contains the following events: Pan: It means touching the surface of the screen with a fingertip, which can move in any direction without releasing the fingertip. This gesture contains the following events: Pinch: It means pinching (move one’s finger and thumb or bring them together on a touchscreen) the surface of the screen using two fingers to zoom into or out of a screen. Gesture Detector Flutter provides a widget that gives excellent support for all types of gestures by using the GestureDetector widget. The GestureWidget is non-visual widgets, which is primarily used for detecting the user’s gesture. The basic idea of the gesture detector is a stateless widget that contains parameters in its constructor for different touch events. In some situations, there might be multiple gesture detectors at a particular location on the screen, and then the framework disambiguates which gesture should be called. The GestureDetector widget decides which gesture is going to recognize based on which of its callbacks are non-null. Let us learn how we can use these gestures in our application with a simple onTap() event and determine how the GestureDetector processes this. Here, we are going to create a box widget, design it according to our desired specification, and then add the onTap() function to it. Now, create a new Flutter project and replace the following code in main.dart file. Output When you run this dart file in Android Studio, it will give the following output in the emulator. In the above image, you can see a button with rounded edges on the center of the screen. When you tap on this, it behaves like a button, and the output can be seen in the console. Flutter also provides a set of widgets that can allow you to do a specific as well as advanced gestures. These widgets are given below: Dismissible: It is a type of widget that supports the flick gesture to dismiss the widget. Draggable: It is a type of widget that supports drag gestures to move the widget. LongPressDraggable: It is a type of widget that supports drag gesture to move a widget along with its parent widget. DragTarget: It is a type of widget that can accept any Draggable widget IgnorePointer: It is a type of widget that hides the widget and its children from the gesture detection process. AbsorbPointer: It is a type of widget that stops the gesture detection process itself. Due to this, any overlapping widget cannot able to participate in the gesture detection process, and thus, no event is raised. Scrollable: It is a type of widget that supports scrolling of the content which is available inside the widget. Multiple Gesture Example In this section, we are going to see how multiple gestures work in flutter applications. This demo app consists of two containers parent and child. Here, everything is handled manually by using ‘RawGestureDetector’ and a custom ‘GestureRecognizer’ The custom GestureRecognizer provide ‘AllowMultipleGestureRecognizer’ property to the gesture list and creates a ‘GestureRecognizerFactoryWithHandlers’. Next, when the onTap() event is called, it prints text to the console. Open the flutter project and replace the following code in the main.dart file, Output When you run the app, it will give the following output. Next, tap on the orange box, the following output appears on your console.

The main concept of the layout mechanism is the widget. We know that flutter assume everything as a widget. So the image, icon, text, and even the layout of your app are all widgets. Here, some of the things you do not see on your app UI, such as rows, columns, and grids that arrange, constrain, and align the visible widgets are also the widgets. Flutter allows us to create a layout by composing multiple widgets to build more complex widgets. For example, we can see the below image that shows three icons with a label under each one. In the second image, we can see the visual layout of the above image. This image shows a row of three columns, and these columns contain an icon and label. In the above image, the container is a widget class that allows us to customize the child widget. It is mainly used to add borders, padding, margins, background color, and many more. Here, the text widget comes under the container for adding margins. The entire row is also placed in a container for adding margin and padding around the row. Also, the rest of the UI is controlled by properties such as color, text.style, etc. Layout a widget Let us learn how we can create and display a simple widget. The following steps show how to layout a widget: Step 1: First, you need to select a Layout widget. Step 2: Next, create a visible widget. Step 3: Then, add the visible widget to the layout widget. Step 4: Finally, add the layout widget to the page where you want to display. Types of Layout Widgets We can categories the layout widget into two types: Single Child Widgets The single child layout widget is a type of widget, which can have only one child widget inside the parent layout widget. These widgets can also contain special layout functionality. Flutter provides us many single child widgets to make the app UI attractive. If we use these widgets appropriately, it can save our time and makes the app code more readable. The list of different types of single child widgets are: Container: It is the most popular layout widget that provides customizable options for painting, positioning, and sizing of widgets. Padding: It is a widget that is used to arrange its child widget by the given padding. It contains EdgeInsets and EdgeInsets.fromLTRB for the desired side where you want to provide padding. Center: This widget allows you to center the child widget within itself. Align: It is a widget, which aligns its child widget within itself and sizes it based on the child’s size. It provides more control to place the child widget in the exact position where you need it. SizedBox: This widget allows you to give the specified size to the child widget through all screens. AspectRatio: This widget allows you to keep the size of the child widget to a specified aspect ratio. Baseline: This widget shifts the child widget according to the child’s baseline. ConstrainedBox: It is a widget that allows you to force the additional constraints on its child widget. It means you can force the child widget to have a specific constraint without changing the properties of the child widget. CustomSingleChildLayout: It is a widget, which defers from the layout of the single child to a delegate. The delegate decides to position the child widget and also used to determine the size of the parent widget. FittedBox: It scales and positions the child widget according to the specified fit. Output FractionallySizedBox: It is a widget that allows to sizes of its child widget according to the fraction of the available space. IntrinsicHeight and IntrinsicWidth: They are a widget that allows us to sizes its child widget to the child’s intrinsic height and width. LimitedBox: This widget allows us to limits its size only when it is unconstrained. Offstage: It is used to measure the dimensions of a widget without bringing it on to the screen. OverflowBox: It is a widget, which allows for imposing different constraints on its child widget than it gets from a parent. In other words, it allows the child to overflow the parent widget. Example Output Multiple Child widgets The multiple child widgets are a type of widget, which contains more than one child widget, and the layout of these widgets are unique. For example, Row widget laying out of its child widget in a horizontal direction, and Column widget laying out of its child widget in a vertical direction. If we combine the Row and Column widget, then it can build any level of the complex widget. Here, we are going to learn different types of multiple child widgets: Row: It allows to arrange its child widgets in a horizontal direction. Example Output Column: It allows to arrange its child widgets in a vertical direction. ListView: It is the most popular scrolling widget that allows us to arrange its child widgets one after another in scroll direction. GridView: It allows us to arrange its child widgets as a scrollable, 2D array of widgets. It consists of a repeated pattern of cells arrayed in a horizontal and vertical layout. Expanded: It allows to make the children of a Row and Column widget to occupy the maximum possible area. Table: It is a widget that allows us to arrange its children in a table based widget. Flow: It allows us to implements the flow-based widget. Stack: It is an essential widget, which is mainly used for overlapping several children widgets. It allows you to put up the multiple layers onto the screen. The following example helps to understand it. Output Building Complex Layout In this section, we are going to learn how you can create a complex user interface using both single and multiple child layout widgets. The layout framework allows you to create a complex user interface layout by nesting the rows and columns inside of rows and columns. Let us see an example of a complex user interface by creating the product list. For this purpose, you need first to replace the code of main.dart file with the following code snippet. In the above code, we create widget ProductBox that contains the details of the

In this section, we are going to learn the concept of a widget, how to create it, and their different types available in the Flutter framework. We have learned earlier that everything in Flutter is a widget. If you are familiar with React or Vue.js, then it is easy to understand the Flutter. Whenever you are going to code for building anything in Flutter, it will be inside a widget. The central purpose is to build the app out of widgets. It describes how your app view should look like with their current configuration and state. When you made any alteration in the code, the widget rebuilds its description by calculating the difference of previous and current widget to determine the minimal changes for rendering in UI of the app. Widgets are nested with each other to build the app. It means the root of your app is itself a widget, and all the way down is a widget also. For example, a widget can display something, can define design, can handle interaction, etc. The below image is a simple visual representation of the widget tree. We can create the Flutter widget like this: Hello World Example Types of Widget We can split the Flutter widget into two categories: Visible widget The visible widgets are related to the user input and output data. Some of the important types of this widget are: Text A Text widget holds some text to display on the screen. We can align the text widget by using textAlign property, and style property allow the customization of Text that includes font, font weight, font style, letter spacing, color, and many more. We can use it as like below code snippets. Button This widget allows you to perform some action on click. Flutter does not allow you to use the Button widget directly; instead, it uses a type of buttons like a FlatButton and a RaisedButton. We can use it as like below code snippets. In the above example, the onPressed property allows us to perform an action when you click the button, and elevation property is used to change how much it stands out. Image This widget holds the image which can fetch it from multiple sources like from the asset folder or directly from the URL. It provides many constructors for loading image, which are given below: To add an image in the project, you need first to create an assets folder where you keep your images and then add the below line in pubspec.yaml file. Now, add the following line in the dart file. The complete source code for adding an image is shown below in the hello world example. When you run the app, it will give the following output. Icon This widget acts as a container for storing the Icon in the Flutter. The following code explains it more clearly. Invisible widget The invisible widgets are related to the layout and control of widgets. It provides controlling how the widgets actually behave and how they will look onto the screen. Some of the important types of these widgets are: Column A column widget is a type of widget that arranges all its children’s widgets in a vertical alignment. It provides spacing between the widgets by using the mainAxisAlignment and crossAxisAlignment properties. In these properties, the main axis is the vertical axis, and the cross axis is the horizontal axis. Example The below code snippets construct two widget elements vertically. Row The row widget is similar to the column widget, but it constructs a widget horizontally rather than vertically. Here, the main axis is the horizontal axis, and the cross axis is the vertical axis. Example The below code snippets construct two widget elements horizontally. Center This widget is used to center the child widget, which comes inside it. All the previous examples contain inside the center widget. Example Padding This widget wraps other widgets to give them padding in specified directions. You can also provide padding in all directions. We can understand it from the below example that gives the text widget padding of 6.0 in all directions. Example Scaffold This widget provides a framework that allows you to add common material design elements like AppBar, Floating Action Buttons, Drawers, etc. Stack It is an essential widget, which is mainly used for overlapping a widget, such as a button on a background gradient. State Management Widget In Flutter, there are mainly two types of widget: StatefulWidget A StatefulWidget has state information. It contains mainly two classes: the state object and the widget. It is dynamic because it can change the inner data during the widget lifetime. This widget does not have a build() method. It has createState() method, which returns a class that extends the Flutters State Class. The examples of the StatefulWidget are Checkbox, Radio, Slider, InkWell, Form, and TextField. Example StatelessWidget The StatelessWidget does not have any state information. It remains static throughout its lifecycle. The examples of the StatelessWidget are Text, Row, Column, Container, etc. Example