Download to read offline
More Related Content
Similar to Flutter alegria event gdsc pillai college of engineering
Flutter alegria event gdsc pillai college of engineering
- 1. Flutter 101 Pillai Collegeof Engineering
- 2. Agenda ● Native Development ●Overview of Flutter ● Setting up Flutter ● Basics of Dart ● Understanding widgets ● Building your first Flutter app ● Hands-On
- 3. What is NativeDevelopment ? Just a complex way to “platform specific” Creating software applications specifically for a particular platform or device using the native programming languages and tools supported by that platform. This typically involves developing applications for specific operating systems such as iOS, Android,Windows, or macOS.
- 4. Now, Native apps aremore performance oriented, because they are written using programming languages, that are native to these specific platforms. So, what is flutter then ? Flutter is not used for native development, rather for “Cross-Platform development”. Basically you can see flutter as language translator, that converts the code written in dart into native code to run on any native machine.
- 5. Let’s see Flutter isan open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase. It is powered by Dart, a language optimized for fast apps on any platform.
- 6. Didn’t Ijust saynative development gives good performance ? So…. ??
- 7. Why Flutter ? ●Cross-Platform Development ● Hot Reload ● Expressive and Beautiful UI ● High Performance ● Rich Widget Library ● Cost-Effective ● Backed by Google
- 8. Let’s talk business? Now, you know basically what is flutter is short and what is native development. So, consider a situation, you are developing an business, which needs an app and you want to build it for both Android and iOS. Which will you prefer and why ? 1. Native Development 2. Flutter (Cross Platform Development)
- 9. Where is itused ?
- 10.
- 11. Language Dart JavaScriptJavaScript Performance High performance, compiles to native code Good performance, bridges to native APIs Web-based, relies on WebView UI Components Customizable widgets, Material & Cupertino React components, third-party libraries Web components, Ionic UI library Development Time Hot reload for rapid development Fast development with hot reloading Fast development with live reload Community Growing community, backed by Google Large community, backed by Facebook Established community, open-source Learning Curve Moderate, Dart language Moderate, JavaScript, React Easy, HTML, CSS, JavaScript Native Features Access to native features and APIs Access to native features and APIs Limited access, relies on plugins Platform Support iOS, Android, Web, Desktop iOS, Android, Web iOS, Android, Web
- 12. Which is good? OBVIOUSLY, FLUTTER ! Me
- 13. Installation 1.Download Flutter Visit theFlutter SDK releases page to download the latest stable version of Flutter . 2. Extract the Zip Extract the downloaded Flutter archive to a location on your machine. 3.Add Flutter to Path On Windows: %PATH_TO_FLUTTER%flutterbin On macOS and Linux: export PATH="$PATH:/path/to/flutter/bin"
- 14. What is FlutterCLI ? The Flutter command-line interface (CLI) is a set of tools provided by the Flutter framework to help developers with various aspects of Flutter app development. The Flutter CLI allows developers to create, build, test, and manage Flutter projects from the command line.
- 15. Flutter is aFramework, not a language Flutter is a UIframework for building cross-platform applications, not a programming language itself. Then ? What flutter apps are written in ? It utilizes Dart, a language developed by Google, to write code. Dart's simplicity and efficiency power Flutter's expressive widgets, enabling developers to create stunning mobile, web, and desktop experiences with ease.
- 16. Dart is aprogramming language developed by Google. It is designed for building web, mobile, and server applications. Dart aims to provide a productive and flexible development experience, emphasizing performance, simplicity, and a strong object-oriented foundation Let’s Explore Dart Overview ● Designed for Web and Mobile Development ● Dart SDK and DartPad ● Used for Server-Side Development Versatility
- 17. Data Types inDart
- 18. Classes and Objects ●Classes are blueprints for creating objects. ● They define the properties and behaviors that objects of that type will have
- 19. Control Flow ● Controlflow statements help in controlling the flow of execution in a Dart program. ● They include conditional statements and looping constructs.
- 20. Functions in Dart ●Functions are blocks of code that perform a specific task. ● They promote code reusability and organization in Dart programs.
- 21. Okay, so that’show you write code, but what about visuals ? Widgets
- 22. What are widgets? ● Widgets are the building blocks of Flutter applications. ● Everything in Flutter is a widget, including layout elements, text, buttons, and more. ● Widgets describe how the UI should look given its current configuration and state.
- 23. Example of aWidget Similar to this, Flutter supports a wide range of Widgets that usually come out of the box under the “material.dart” package and etc, also enables to add custom widgets to your project by importing custom libraries. https://docs.flutter.dev/ui/widgets
- 24. Widgets are inplace. Now, how are these widgets rendered ? How flutter knows where to render what ? How communication works between these widgets ? Flutter uses something called a Widget Tree, similar to a DOM Structure in Web. ● Flutter uses a hierarchical structure called the widget tree. ● Each widget has a parent-child relationship, forming a tree-like structure. ● The root of the widget tree is usually the MaterialApp or CupertinoApp widget.
- 25. There are twotypes: 1. Stateless Widgets A StatelessWidget is a widget that doesn't depend on any mutable state. Once created, its properties cannot change. It's used for UI elements that don't change over time or in response to user interactions.
- 26. 2. Stateful Widgets AStatefulWidget is a widget that can change over time or in response to user interactions. It has associated state objects that manage the widget's state.
- 27. That’s it ? OfCourse not, these were just the tip of a whole iceberg guys, just to get you guys started into Flutter Development. Now, Ihope you have your basics clear, we will move on with the hands-on, so you can learn on the way by developing a flutter app simultaneously.
- 28.
- 29. What we making? BMI Calculator