flutter_day_1...............................
- 1. Flutter Insights TECH WINTER BREAK A Pre Solution Challenge Campaign Google Developer Groups On Campus Pillai College Of Engineering
- 2. Agenda ● ● ● ● ● ● ● Native Development Overview of Flutter Setting Setting up Flutter Basics of Dart Understanding widgets Building your first Flutter app Hands-On Google Developer Groups On Campus Pillai College Of Engineering
- 3. A bit about Speakers Machine Learning Lead Technical Member (Flutter) at GDG PCE in 2023 Open Source Member Technical Member at GDG PCE for 2024-25 Google Developer Groups On Campus Pillai College Of Engineering
- 4. What is Native Development ? 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. Google Developer Groups On Campus Pillai College Of Engineering
- 5. Now, Native apps are more 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. Google Developer Groups On Campus Pillai College Of Engineering
- 6. Let’s see Flutter is an 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. Google Developer Groups On Campus Pillai College Of Engineering
- 7. Didn’t I just say native development gives good performance ? So…. ?? Google Developer Groups On Campus Pillai College Of Engineering
- 8. Why Flutter ? ● ● ● ● ● ● ● Cross-Platform Development Hot Reload Expressive and Beautiful UI High Performance Rich Widget Library Cost-Effective Backed by Google Google Developer Groups On Campus Pillai College Of Engineering
- 9. 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. 2. Native Development Flutter (Cross Platform Development) Google Developer Groups On Campus Pillai College Of Engineering
- 10. Where is it used ? Google Developer Groups On Campus Pillai College Of Engineering
- 11. Any other alternatives ? Google Developer Groups On Campus Pillai College Of Engineering
- 12. Language Community Performance Learning Curve UI Components Native Features Platform Support Development Time Growing community, backed by Google Moderate, Dart language Access to native features and APIs iOS, Android, Web, Desktop Hot reload for rapid development Dart High performance, compiles to native code Customizable widgets, Material & Cupertino React Native Good performance, bridges to native APIs React components, third-party libraries Fast development with hot reloading Large community, backed by Facebook Moderate, JavaScript, React Access to native features and APIs iOS, Android, Web Ionic iOS, Android, Web Fast development with live reload Established community, open-source Easy, HTML, CSS, JavaScript Web-based, relies on WebView Limited access, relies on plugins Web components, Ionic UI library Google Developer Groups On Campus Pillai College Of Engineering
- 13. Which is good ? OBVIOUSLY, FLUTTER ! Me Google Developer Groups On Campus Pillai College Of Engineering
- 14. Installation 1. Download Flutter Visit the Flutter 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" Google Developer Groups On Campus Pillai College Of Engineering
- 15. What is Flutter CLI ? 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. Google Developer Groups On Campus Pillai College Of Engineering
- 16. Flutter is a Framework, not a language Flutter is a UI framework 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. Google Developer Groups On Campus Pillai College Of Engineering
- 17. Overview ● ● ● Designed for Web and Mobile Development Dart SDK and Dart Pad Used for Server-Side Development Versatility Dart is a programming 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 Google Developer Groups On Campus Pillai College Of Engineering
- 18. Data Types in Dart Google Developer Groups On Campus Pillai College Of Engineering
- 19. Classes and Objects ● Classes are blueprints for creating objects. They define the properties and behaviors that objects of that type will have. Google Developer Groups On Campus Pillai College Of Engineering
- 20. Control Flow ● ● Control flow statements help in controlling the flow of execution in a Dart program. They include conditional statements and looping constructs. Google Developer Groups On Campus Pillai College Of Engineering
- 21. Functions in Dart ● ● Functions are blocks of code that perform a specific task. They promote code reusability and organization in Dart programs. Google Developer Groups On Campus Pillai College Of Engineering
- 22. Okay, so that’s how you write code, but what about visuals ? Widgets Google Developer Groups On Campus Pillai College Of Engineering
- 23. 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. Google Developer Groups On Campus Pillai College Of Engineering
- 24. Example of a Widget 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 Google Developer Groups On Campus Pillai College Of Engineering
- 25. Widgets are in place. 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. ● ● ● Google Developer Groups On Campus Pillai College Of Engineering
- 26. There are two types: 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. Google Developer Groups On Campus Pillai College Of Engineering
- 27. 2. Stateful Widgets A StatefulWidget 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. Google Developer Groups On Campus Pillai College Of Engineering
- 28. That’s it ? Of Course not, these were just the tip of a whole iceberg guys, just to get you guys started into Flutter Development. Now, I hope 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. Google Developer Groups On Campus Pillai College Of Engineering
- 29. What are we making ? Expense Tracker Google Developer Groups On Campus Pillai College Of Engineering
- 30. Thank you very much! TECH WINTER BREAK in/avani-srivastava in/nirmiti-borole Google Developer Groups On Campus Pillai College Of Engineering