Flutter Mobile App Development - Flutter Mobile App Development – Lecture 02 In Class: Widget Hierarchy & Scaffold and its properties

Flutter Mobile App Development – Lecture 02 In Class: Flutter Widget Hierarchy & Understanding Scaffold and its properties 🎓 Course: Flutter Mobile App Development 👨‍🏫 Instructor: Dr. Abbas Malik 🏛 University: Prince Sultan University – College of Computer & Information Sciences 💡 Perfect for beginners in Flutter or anyone looking to strengthen their UI/UX layout skills in mobile development! 🔹 Course GitHub Repository: 📂 All course materials, code examples, and projects: https://github.com/mgmalik/flutterappdev In this hands-on lecture, we explore the foundational concept of Flutter: "Everything is a Widget." You'll learn how to structure Flutter apps using widget composition and build your first working app and understand the Scaffold class and its properties in Visual Studio Code from scratch. 🔹 Topics Covered: • Widget-Based UI Design: o Understanding widgets as the building blocks of Flutter apps o Immutable UI declarations and widget composition o Physical vs. Layout aspects: text, buttons, arrangement, padding, alignment • Flutter Widget Hierarchy: o MaterialApp as the root widget o Scaffold: The visual layout structure for Material Design o Composition tree: AppBar, Body, FloatingActionButton, Center, Column, Text • Scaffold Components Deep Dive: o AppBar Types: Search, Small, Medium Flexible, Large Flexible o Navigation Bar: 3-5 equal-importance destinations o Navigation Drawer: Standard vs. Modal with container, heading, icons, badges o Bottom Sheet: Standard and modal secondary content o Floating Action Button (FAB): Accessibility and user actions • Live Coding Session: o Setting up a Flutter project in VS Code o Building main.dart with MaterialApp and home routing o Creating a custom FirstPage StatelessWidget o Designing AppBar with centered title and subtitle o Structuring the widget tree with Scaffold, Center, and Column o Implementing a basic counter app with StatefulWidget 🔹 Hands-On Project: • First Flutter App: Complete working application with navigation and UI components • Custom AppBar Design: Multi-line title with styling • Widget Composition Practice: Building UI with hierarchical widget structure 🔹 Tools & Resources: • VS Code with Flutter & Dart extensions • Flutter Widget Catalog: https://docs.flutter.dev/ui/widgets • Material Design Guidelines: https://m3.material.io • Scaffold Class Documentation: https://api.flutter.dev/flutter/material/Scaffold-class.html #Flutter #Widgets #Scaffold #AppBar #MobileDevelopment #VSCode #FlutterTutorial #FirstApp #MaterialDesign #UI #AppDevelopment #FlutterBeginner #PSU #IS487 #Programming #Dart ________________________________________ 📚 Lecture Slides Covered: Widget composition, Scaffold class, AppBar types, Navigation components, and building a complete Flutter app structure. 💻 Live Demo: Creating a multi-page app with custom AppBar design and basic navigation.