UNIT-1 __ Introduction to Flutter.ppt
- 1. K.Leelarani, AP-CSE K.Leelarani, AP-CSE Kamaraj College of Engineering and Technology Kamaraj College of Engineering and Technology
- 2. Topics: •Introduction •What is Flutter? •Why Flutter? •Advantages and Disadvantages of Flutter •Flutter Architecture •Widget •Structure of Flutter App •Creating Hello World App UNIT I Introduction to Flutter
- 3. Mobile App Development is Complex: Building mobile apps is challenging. Different Frameworks for Android & iOS: Android uses Java and Kotlin. iOS uses Objective-C and Swift. The Problem: Separate languages are needed for each platform. The Solution: Cross-platform tools allow building apps for both Android, iOS, and desktops using a single framework. Introduction
- 4. Framework Language Supported Platforms Performance Best For Example Apps Flutter Dart iOS, Android, Web, Desktop High Custom UI, Fast Dev Google Ads, BMW React Native JavaScript iOS, Android Medium-High Mobile-first Apps Facebook, Instagram Xamarin C# iOS, Android, Windows High Enterprise Apps UPS, Alaska Airlines KMM Kotlin iOS, Android High Native Mobile Apps Netflix, Philips Kivy/PyQT Python iOS, Android, Desktop Low-Medium Prototyping, Small Apps Kivy Showcase App
- 5. One Code for All Platforms: Write one code and use it on Android, iOS, and Desktop. Saves Time and Effort: Reduces development time and effort. Popular Tools: Examples include: Ionic PhoneGap Xamarin React Native New Framework: Flutter by Google is a recent addition to cross-platform tools. Introduction
- 6. Flutter is a UI toolkit for building fast, beautiful, natively compiled applications for mobile, web, and desktop with one programing language and single codebase. It is free and open-source. Flutter apps use Dart programming language for creating an app. What is Flutter
- 8. Open-Source: Flutter is a free and open-source framework for developing mobile applications. Cross-platform: This feature allows Flutter to write the code once, maintain, and can run on different platforms. It saves the time, effort, and money of the developers. Hot Reload: Whenever the developer makes changes in the code, then these changes can be seen instantaneously with Hot Reload. Accessible Native Features and SDKs: This feature allows the app development process easy and delightful through Flutter's native code, third-party integration, and platform APIs. Features of Flutter
- 9. Minimal code: Dart Programming Language: Flutter apps are built using Dart. JIT and AOT Compilation: Dart uses JIT (Just-In- Time) for faster development and AOT (Ahead-Of-Time) for better performance and quick startup. Smooth UI Updates: JIT allows real-time UI updates without rebuilding the entire app. This combination ensures faster performance, efficient development, and seamless user experience. Features of Flutter
- 10. Widget: The Flutter framework provides a rich collection of customizable widgets for building tailored designs. It includes two main widget sets: Material Design Widgets: For Android-like UI experiences. Cupertino Widgets: For iOS-like UI experiences. These widget sets ensure a smooth and consistent user experience across all platforms. Features of Flutter
- 11. Unique Rendering Engine: Flutter doesn’t use WebView or built-in device widgets. Custom Widgets: It uses its own high-performance rendering engine to create widgets. Built with Dart: Systems like animations, gestures, and widgets are built using Dart, making them easy to modify. Full Developer Control: Developers have excellent control over the system. Why Flutter is Unique
- 12. Fast Development: The hot-reload feature significantly accelerates the development process. Changes made to the code are reflected instantly, allowing for quicker iterations and debugging. Smooth Performance: Flutter ensures smoother scrolling experiences with fewer lags or interruptions, offering faster performance compared to many other mobile app development frameworks. Advanatages of Flutter
- 13. Efficient Testing: Since Flutter apps are cross-platform, testing efforts are minimized. Testers can run the same set of tests across multiple platforms, saving time and resources. Excellent UI: Flutter boasts a design-centric approach with a variety of widgets, advanced development tools, and APIs, resulting in a superior user interface. Its reactive framework also reduces the need for manual UI updates. Ideal for MVPs: Flutter is particularly suitable for developing Minimum Viable Products (MVPs) due to its rapid development capabilities and ability to deploy across platforms seamlessly. Advanatages of Flutter
- 14. The Flutter is a comparatively new language that needs continuous integration support through the maintenance of scripts. It provides very limited access to SDK libraries. It means a developer does not have a lot of functionalities to create a mobile application. Such types of functionalities need to be developed by the Flutter developer themselves. It uses Dart programming for coding, so a developer needs to learn new technologies. However, it is easy to learn for developers. Disadvanatages of Flutter
- 15. Flutter's architecture, which is ingeniously divided into three primary layers: Framework, Engine Embedder Flutter Architecture
- 17. Flutter Architecture Framework Developed with the Dart programming language, it consists of a series of libraries and layers that handle animations, interactions, rendering, among other components. Engine It is the core of the framework, mostly written in C++ and designed to be platform- independent. It provides a low-level implementation of services handling everything from rendering to managing connections, animations, and gesture recognition. Embedder The embedder coordinates with the host OS for access to different services the app might need. Using the embedder, existing applications can be integrated as if they were modules.
- 18. Anatomy of an App
- 19. Anatomy of an App Dart App: – Composes widgets into the desired UI. – Implements business logic. – Owned by the app developer. Framework: – Provides a higher-level API to build high-quality apps (e.g., widgets, hit-testing, gesture detection, accessibility, text input). – Composites the app’s widget tree into a scene.
- 20. Anatomy of an App Engine: – Responsible for rasterizing composited scenes. – Provides a low-level implementation of Flutter’s core APIs (e.g., graphics, text layout, Dart runtime). – Exposes its functionality to the framework using the dart:ui API. – Integrates with a specific platform using the Engine’s Embedder API. Embedder: – Coordinates with the underlying operating system for access to services like rendering surfaces, accessibility, and input. – Manages the event loop. – Exposes a platform-specific API to integrate the Embedder into apps.
- 21. Anatomy of an App Runner: •Composes the pieces exposed by the platform-specific API of the Embedder into an app package runnable on the target platform. •Part of the app template generated by ‘flutter create’, owned by the app developer. » UI = f(state) You have surely heard countless times that the UI is built to reflect the application's state.
- 22. • The blocks that make up the UI in Flutter are called widgets. • Widgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Flutter Widget Types 1. Stateless Widget 2. Stateful Widget Widget
- 23. Structure of Flutter App
- 24.
- 25.
- 26. Thank You