Introduction to Building Apps with Flutter

Welcome and Context

• Presenter: Fitz
• Intended Audience: Individuals interested in building apps with Flutter, whether they have wireframes, sketches, or are just starting out.

What is Flutter?

• Flutter is a toolkit for building apps.
• Provides many foundational things, similar to a real-life toolkit (e.g., screwdrivers, hammers).
• Widgets: Fundamental building blocks in Flutter.
  • Everything in Flutter is a widget (title bars, columns, buttons, icons, text input boxes, etc.).
  • Widgets are made of other widgets, including the app itself.

Analogy: Writing a Book

• Writing a book involves composing words into sentences, sentences into paragraphs, and paragraphs into chapters.
• Similarly, in Flutter, you build a hierarchy of widgets.
  • Example: AppBar widget contains Text widget.
• Hierarchy of widgets gets more specialized as you go down, and more abstract as you go up.
  • Example: AppBar within a Scaffold within a MaterialApp.

Example: Space Exploration Planning App

• Common Elements:
  • Progress Indicator (showing how close to exploring the universe).
  • Checklist of things to discover.
• Design Sketch: Identify common elements like Text for labels, Checkboxes for to-do list, AppBar for title.

Layouts and Hierarchies

• Widgets exist in a hierarchy (parents, children, siblings, etc.).
• Consider relationships between widgets when designing an app.
  • Example: AppBar at the top, Progress Section consisting of Text and ProgressIndicator, etc.
• Layout widgets are also widgets (e.g., Column, arranging widgets vertically).
• Adding layout widgets to sketch helps conceptualize the app structure.

Writing Flutter Apps in Dart

• Flutter apps are written in the Dart programming language.
• Main Source File: Contains
  • List of dependencies.
  • main function (starting point for the app).
  • runApp method: Places the widget at the top of the hierarchy.

Separation of Concerns

• Concept: Every component is responsible for its own part.
• In Flutter, you can create custom widgets by extending StatelessWidget.
  • build method: Describes how to construct the widget using other widgets.
• Example: Building the app from a sketch using progressively smaller widgets.

Implementing Widgets

• Many apps start with a MaterialApp and split out the homepage as a separate widget.
• Use a Scaffold to provide common app patterns (e.g., AppBar with title).
• Progress Section: Column with Text label and LinearityProgressIndicator.
• TaskList: Column of TaskItems, each a Row with Checkbox and Text.

Hot Reload Feature

• Updates running app with new code without restarting.

Conclusion

• Covered basics of Flutter and how to combine widgets to build apps.
• Teased upcoming content (e.g., state in widgets, making the app look good, tapping checkbox issues).
• References for additional readings provided.