Appplication Development Flutter(2).pptx
- 2. Flutter Unlocked: What You’ll Learn 🔓 ❖ What is Flutter? ❖ Why Flutter? ❖ Setup Time! ❖ Flutter Architecture ❖ Hands-on : Build & run your first Flutter app in minutes!
- 3. What EXACTLY is Flutter? Flutter is a cross-platform UI toolkit that allows developers to craft beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
- 4. Apps Made by Flutter
- 5. WHY FLUTTER ● Compiles to Native Code — Runs directly as ARM binary code for blazing-fast performance ⚡ ● No Reliance on OEM Widgets — Uses its own beautiful & customizable widgets 🎨 ● No Bridge Needed- Other frameworks (like React Native) use a JavaScript bridge for native communication, causing delays
- 6. Fast Development 01 Flutter's hot reload feature allows you to quickly see the effect of code changes on your app within milliseconds, speeding up the development cycle significantly. Expressive and flexible UI (my fav.) 02 Flutter offers a rich set of customizable widgets that enable developers to create visually appealing and interactive user interfaces. Cross-Platform Capabilities 03 With Flutter, you can write code once and deploy it on multiple platforms such as iOS, Android, web, and even desktop (macOS, Windows, Linux). Key Features….
- 8. Flutter is based on Dart which is an object oriented programming language which helps in designing smooth Uis. What Language is Flutter built with ?
- 9. WIDGETS Everything in Flutter is a widget! They are the basic building block of any Flutter app. Widgets are composed to form the complete UI. Types : Stateful and Stateless
- 10. Stateless widget vs Stateful Widget Feature Stateless Widget Stateful Widget State Management No internal state Maintains internal state UI Rebuild Rebuilds only if parent changes Can rebuild on setState() Performance More efficient Slightly heavier due to state management Examples Text, Image, Icon TextField, Checkbox, Slider
- 12. The widget tree is a hierarchical arrangement of widgets that defines the UI of a Flutter app. Every element of the UI is a widget, from the entire screen to individual buttons and text labels. Widgets can contain other widgets, creating a tree-like structure. Importance of the Widget Tree : 1. Modularity : Encourages reusability and modularity of UI components. 2. Organization: Provides a clear structure for the UI, making it easier to manage and understand. The ‘WIDGET’ Tree
- 15. Three Types of Tree
- 16. Let’s code an actual flutter app!
- 17. AGENDA FOR TODAY 1. Understanding Flutter Folder Structure 2. Running and Modifying the Counter App 3. Core Concepts: MaterialApp, Scaffold, Column, Row & Widgets 4. Starting the BMI Calculator App
- 18. Counter App Code Breakdown Key Concepts: - StatelessWidget vs StatefulWidget - MaterialApp: Wraps the entire app - Scaffold: Provides app structure - Column & Row: Layouts for arranging widgets - FloatingActionButton: Handles user interaction - State Management through setState
- 19. Core Concepts 1. Material App & Scaffold 2. Column
- 20. Core Concepts 3. Row 4. Stateless Widget
- 22. THANK YOU!