Lecture Notes: Introduction to Flutter through Project Building

Overview

• Objective: Learn the basics of Flutter by building a simple UI project.
• Approach: Practical implementation rather than theoretical learning.
• Pre-requisites: Basic setup of Flutter, Editor, and Emulator.

Setting Up Flutter Project

• Command: flutter create <project_name> and navigate to the lib folder.
• Entry Point: main.dart file with main() function.
• App Initialization: Use runApp() to start the application with a root widget.

Running the Application

• Method: Select emulator and press F5.
• Initial Screen: Displays Flutter's default application.

Project Structure

• Folder: Create a Pages folder.
• File: Create home.dart for the home screen.
• Widget Types:
  • Stateless: Immutable widgets.
  • Stateful: Mutable widgets.

Home Screen Setup

• Create: A stateless widget class called HomeScreen.
• Main Page Setting: Set home property in main.dart to HomePage class.
• Code Optimization: Use const keyword for compile-time constants.

UI Components

App Bar

• Framework: Use Scaffold widget for layout.
• Components:
  • Text: Centered using centerTitle: true.
  • Style: Adjust font size, color, and weight.
  • Background: Set backgroundColor to white and elevation to zero.
  • Buttons: Use Container and GestureDetector for clickable icons.
  • Icons: Implement with flutter_svg package.

Search Text Field

• Implementation: Use TextField with InputDecoration.
• Styling: Set borderRadius, contentPadding.
• Icons: Use prefixIcon and suffixIcon for search and filter icons.

Category Section

• Structure: Use Column for vertical alignment.
• Text Display: Implement using Text widget.
• ListView for Categories:
  • Modeling: Create CategoryModel class.
  • Dynamic Display: Use ListView.builder() for items.

Diet Recommendation Section

• Implementation: Similar to Categories section.
• Model: DietModel with viewIsSelected boolean for styling.
• ListView: Use ListView.builder() for horizontal scroll.

Popular Section

• Purpose: Display popular diets.
• UI:
  • Scrollable: Use ListView for vertical scrolling.
  • Shadow Control: Use boxIsSelected for shadow styling.

Finalizing UI

• Code Optimization: Extract methods for sections to improve readability.
• Scrollable Page: Use ListView to allow scrolling of the entire page.

Conclusion

• Objective Achieved: Basic understanding of Flutter UI components and project structure.
• Next Steps: Engage with more complex projects and further explore Flutter capabilities.

Note: For further details and step-by-step coding, refer to Flutter's official documentation and follow practical coding sessions.