• Native Frameworks
• Hybrid Apps
• Developing Mobile Apps using Web Apps

In case of Native Apps we use native tools as

• for developing Android device we use Java and Kotlin.
• for developing Ios we use objective C and Swift.
• Native Frameworks is used by Google and Apple thats why they gets updated with new features in regular intervals.

• When we develope native application, we have to create two seperate application for both platforms.
• Which means we have to made two code base for each platforms, which requires a lot of time and resources.
• It also cost a lot of money.

• Html, Css and Javascript used to build responsive websites for android and Ios Display.

• In case of Hybrid Application, we can made or build it using one or more Code Base.
• Xamarin, Cordava, Ionic, ReactNative are some frameworks used in building of Hybrid Apps but in case of Advanced features they are not compatible. So, we use flutter which have a lot of features that is lacking in other frameworks.

Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code and is used by developers and organizations around the world. It is free and open source. We think Flutter will help you create beautiful, fast apps, with a productive, extensible and open development model.

• It is a Single Code Base(Dart) which means we only have to write our app once for multiple devices.

• Only i code base.
• Good layout methodology borrowed from responsive web
• Very smooth and quick experience when running apps
• Works well with Firebase as a backend.
• Uses Dart, Which is a really easy language to pick up
• Uses Material Design out of the box.

• Flutter used Dart as a language so we basically develope flutter using Dart
• Dart is strongly typed object oriented language developed by Google
• Dart has very fast development cycle because it supports JIT(Just in Time) Compilation which is a kind of compilation that results in faster compilation of code during application developement that is whenever we make any changes to our code, we can able to reload our application in our device very fastly in no time. It is called as a Heart reload of the Application.
• When app is ready to launch in market Dart supports AOT(Ahead of Time) Compilation.
• In this type of compilation while runnin application on device, it is much much faster , so for end user it provides seemless user experience.
• So we can say for developers, JIT helps in faster app development and after development for app users, AOT provides faster application execution.
• So as flutter uses Dart so it made flutter different from other frameworks and helps in faster development.
• Flutter provides similar user experience compared to Native Apps like Android and IOS.
• Maintaing code for user is very very easy due to having single code base property.

• Go to https://flutter.dev/get-started/ Install Flutter
• Then Click on Window/Mac/IOS
• Then scroll a little down and You will see a new release flutter_windows-stable.zip SDK.
• Click on it and downloading will Start

For announcements about new releases and breaking changes, follow the [email protected] mailing list or see the breaking changes page.

We want to enable designers to deliver their full creative vision without being forced to water it down due to limitations of the underlying framework. Flutter's layered architecture gives you control over every pixel on the screen and its powerful compositing capabilities let you overlay and animate graphics, video, text, and controls without limitation. Flutter includes a full set of widgets that deliver pixel-perfect experiences on both iOS and Android.

Flutter is fast. It's powered by the same hardware-accelerated 2D graphics library that underpins Chrome and Android: Skia. We architected Flutter to support glitch-free, jank-free graphics at the native speed of your device. Flutter code is powered by the world-class Dart platform, which enables compilation to 32-bit and 64-bit ARM machine code for iOS and Android, as well as JavaScript for the web and Intel x64 for desktop devices.

Flutter offers stateful hot reload, allowing you to make changes to your code and see the results instantly without restarting your app or losing its state.

Flutter works with any development tool (or none at all) but includes editor plug-ins for both Visual Studio Code and IntelliJ / Android Studio. Flutter provides thousands of packages to speed your development, regardless of your target platform. And accessing other native code is easy, with support for both FFI and platform-specific APIs.

As you know App is build by using lots of widgets or we can say .... widget are the backbone of flutter App. Here we use Widget as a child, root, siblings... Its a tree of widgets.

Scaffold Widget is gona allow us to implement a basic layout for our App. It helps us to setup a appBar on the top of our App and some FloatingActionButtons like Textbutton, Flatbutton and many more. What we gona do is

• first remove all the stuff after home:
• then write Scaffold() after it.
• and in the Scaffold widget we gona add a appBar property which will help in building app bar at top.
• where we will give new AppBar to appBar property.. which also contains a lot of property and widgets whatever we want like title, all the text, button, layout, shape all of the stuff we want in appbar is given with there styling property.

This property specifies what content is go inside this body of the screen under the appBar.

Center Widet Centerlizes whatever is nested inside it. In center Widget we have a child property. We can't place text inside of it like that so for that we use child property.

TextStyle Widget is used to help in implementing styles to text. Here we use this property in text widget only after giving text in inverted commas.

debugShowCheckedModeBanner : false

This Property also has a value 'widget' that is FloatingActionButton(). which also contains a child property to use more widget in it like Text('click').

• onPressed

floatingActionButton property contains another property which serve it functions when anyone presses it. It is called as "onPressed: () {}".

StatelessWidgets are used when the part of the UI is not changing dynamically i.e. we are having the static content only and are immutable.

To create a Stateless Widget, you need to extend our class from StatelessWidget and we also need to override the build method that will return one or more widgets. The following is an example of StatelessWidget:

The above code is an example of StatelessWidget where MyApp is a StatelessWidget and it is overriding the build method. The build method is returning a MaterialApp widget and this method will be called only once i.e. whenever the MyApp will be initialized then build will be called and the widgets will be drawn on the screen.

But if there is a change in any of the variables associated with the Widgets, then the build method will not be called and nothing will be updated on the screen because it is StatelessWidget.

To create a StatelessWidget, we can type stless and press enter in VS code or Android Studio. To change the state of the Widgets based on the state of the variables associated with the Widgets, we use StatefulWidgets.

StatefulWidgets are used when the part of the UI changes dynamically i.e. when we have mutable widgets then we use StatefulWidget.

we need to extend our class from StatefulWidget and here instead of overriding the build method, we need to override the createState() method. The createState() method returns a State object. Then we create another class that is extended from State and here in this class, we need to override the build method and this build method will return one or more widgets. The following is an example of a StatefulWidget:

In the above example, MyApp is a StatefulWidget and it is overriding the createState() method. This method is returning the instance of MyAppState class and inside this class, we are overriding the build method.

So, the advantage of overriding the build method in MyAppState is that now the build method will be called whenever there is a change in the variables associated with the Widgets present in it and the whole widget will be redrawn once again. But in order to call the build method, we need to add another method called setState() that will call the build method whenever there is a change in the state.

Note: To create a StatefulWidget, you can type stful and press enter in VS code or Android Studio.

Flatbutton Widget also used as a value of child property, where it contains or use many widgets like text, icon, and many more with there styling property. Flatbutton is shown on the screen without the shadow all around.

• We can give background color to the button.
• we can use onPressed(){} functions in it, so that whenever we press it, it perform some functions.

Icon Widget is used as a icon property value.

Flatbutton Widget also used as a value of child property, where it contains or use many widgets like text, icon, and many more with there styling property. Flatbutton is shown on the screen with the shadow all around in raised form.

• We can give background color to the button.
• we can use onPressed(){} functions in it, so that whenever we press it, it perform some functions.

Icon Widget is used as a icon property value.

• They are used to represent the sides of the rectangle.
• For specifing whcih side we have to put the widget.
• For specifing what will be the color of that side

The FractionalOffset class specifies offsets in terms of a distance from the top left, regardless of the TextDirection.

where - (left/right , up/bottom)

up/left if (0.0)
bottom/right if (1.0)
center if (0.5)

bottomCenter → const FractionalOffset
The center point along the bottom edge.
   FractionalOffset(0.5, 1.0)

bottomLeft → const FractionalOffset
The bottom left corner.
   FractionalOffset(0.0, 1.0)
   
bottomRight → const FractionalOffset
The bottom right corner.
   FractionalOffset(1.0, 1.0)
   
center → const FractionalOffset
The center point, both horizontally and vertically.
   FractionalOffset(0.5, 0.5)
   
centerLeft → const FractionalOffset
The center point along the left edge.
   FractionalOffset(0.0, 0.5)

centerRight → const FractionalOffset
The center point along the right edge.
   FractionalOffset(1.0, 0.5)

topCenter → const FractionalOffset
The center point along the top edge.
   FractionalOffset(0.5, 0.0)

topLeft → const FractionalOffset
The top left corner.
   FractionalOffset(0.0, 0.0)

topRight → const FractionalOffset
The top right corner.
   FractionalOffset(1.0, 0.0)

• centerTitle --> used to center the text in title in AppBar (centerTitle: true)
• backgroundColor --> used to set background color (backgroundColor: Colors.red)

• if we want to add specific font style to the text of our content of materialApp then
• we first have to go to the google fonts then
• download the specific fonts we want to set to our app text
• then we have to extract it from zip file and have to add it to our app by creating a folder name as fonts
• we have to open our pubspec.yaml file and then scroll it down
• we will get a fonts: as commented there
• just uncomment it and
• set family name as the font family we downloaded and
• asset as the location of our font family .ttf file.
• now click on get dependencies that will show above when you again open the main.dart file or type flutter pub get
• then just type fontFamily: 'fontfamilyname'

Flutter is a fully open-source project, and we welcome contributions. Information on how to get started can be found at our contributor guide.

##for optimizing size of flutter app flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi