Flutter Crash Course Notes

Introduction

• Speaker: Nick Manning, Flutter engineer.
• Creator of fluttercrashcourse.com.
• Thanks to freecodecamp.org for sponsorship.
• Course aimed at saving time learning Flutter.

Background

• 20 years of software experience, 5 years as iOS engineer.
• Requires knowledge of at least one programming language and some coding experience (web/app).
• Need to set up Flutter environment (latest version, Android/iOS simulator).

Chapter 1: Creating a Basic Screen

Layout in Flutter

• Using the Column widget for top-to-bottom layout.
• Introduced Row widget for left-to-right layout.
• Most mobile apps use column style layout.
• Implementing three text sections using Text widget.

Coding Steps

• Rename homepage to location detail.
• Use Container widget for colored boxes for visual structure.
• Discussed mainAxisAlignment & crossAxisAlignment for layout control.
• Introduced concepts of main axis and cross axis in Flutter.

Clean-Up

• Creating a separate widget for TextSection to improve code organization.
• Introduced the idea of parameterizing widgets with background color.

Images in the App

Adding Images

• Two methods to add images: Image assets and URLs.
• Organized assets in assets/images directory.
• Updated pubspec.yaml for image assets configuration.
• Implemented image display using Image widget within Container.

Custom Fonts

Adding and Using Fonts

• Downloaded font from Google Fonts (Montserrat).
• Configured fonts in pubspec.yaml.
• Introduced theming for text styling.
• Created a style.dart file to define text styles for the app.

Using Models to Represent Data

Data Models

• Models represent complex data relationships (e.g., Location and LocationFact).
• Defined fetch methods to retrieve data (e.g., fetchAll, fetchByID).
• Explained the significance of using models in Flutter apps.

Navigation in Flutter

Navigation Basics

• Explained navigation concept as a stack of cards (screens).
• Introduced routes and how to define them.
• Suggested using onGenerateRoute for dynamic navigation.

Implementing Navigation

• Defined named routes and used a switch case to manage navigation logic.
• Implemented arguments passing to detail screen using a Map.

Code Organization

• Emphasized keeping code clean by organizing routes in app.dart.
• Encouraged using meaningful variable and function names for clarity.

Conclusion

• Next steps: Implement a beautiful location listing screen.
• Encouraged viewers to reach out with improved navigation implementation ideas.