Flutter App Development Basics

Overview

This lecture provides a comprehensive beginner-friendly introduction to Flutter app development, covering basic programming concepts, essential Flutter widgets, navigation, building functional apps, working with local storage, and implementing an e-commerce app.

Getting Started & Course Structure

• No prior programming experience is required, but Flutter must be installed and a project must be set up.
• The course covers programming fundamentals, core widgets, navigation, state management, user input, and building real apps.

Programming Fundamentals

• Dart's main function is the entry point of every Flutter app.
• Four main variable types: String (text), int (whole numbers), double (decimals), and bool (true/false).
• Basic math operators: +, -, *, /, % for remainder.
• Comparison operators: ==, !=, >, <, >=, <=.
• Logical operators: && (and), || (or), ! (not).
• Control flow: if, else if, else statements, and switch-case.
• Loops: for loops (with initialization, condition, iteration), while loops (repeat until condition is false), break and continue keywords.
• Functions (methods): void (no return value) and those returning values (e.g., int), with parameters (arguments).*

Key Data Structures

• List: ordered collection, accessed by index, can be specified for data type.
• Set: unordered collection of unique items.
• Map: key-value pairs (e.g., {'name': 'Mitch', 'age': 27}).

Essential Flutter Widgets & Layouts

• Everything in Flutter is a widget.
• MaterialApp is the root; Scaffold provides the basic visual layout.
• Core widgets: Container (style/layout), Text, Icon, AppBar, Column & Row (vertical or horizontal layout), ListView (scrollable), GridView (grid layout), Stack (overlapping widgets), GestureDetector (handle taps/gestures).
• Expanded widget fills available space in a Column or Row.
• Use padding and decoration for visual styling.

Navigation in Flutter

• Navigation is handled using Navigator.push (to a new page) and Navigator.pushNamed (named routes).
• Drawers and bottom navigation bars are common for navigating between pages.
• When navigating from a drawer, close the drawer with Navigator.pop before navigating to a new page.
• State is managed with stateless widgets (do not change) and stateful widgets (update on interaction).

Working with User Input

• Use TextField to receive user input.
• Control input with a TextEditingController.
• Display user input or output on the UI by updating state and rebuilding widgets.

Building a To-Do App

• Store tasks as a list of [task name, completion status].
• Use ListView.builder to generate dynamic lists of tasks.
• Add, mark complete, and delete tasks using buttons and gesture detection.
• Use dialog boxes with AlertDialog and custom buttons for adding tasks.
• Use the flutter_slidable package to add swipe-to-delete functionality.
• Store and retrieve tasks locally with the Hive database (hive and hive_flutter packages).

Building an E-commerce App

• Assets (like shoe images) are managed in the pubspec.yaml.
• Use models to define items (e.g., Shoe class for name, price, image, description).
• UI includes a main page with navigation, search, item listings, and a cart.
• Manage app state (e.g., cart contents) using the provider package for state management.
• Add and remove items from the cart and reflect changes in the UI.

Key Terms & Definitions

• Widget — A building block of Flutter apps; everything in Flutter is a widget.
• Stateless widget — A widget that does not hold or manage state.
• Stateful widget — A widget that can update and rebuild when state changes.
• Navigator — System for moving between screens/pages in a Flutter app.
• TextEditingController — Controller for reading and modifying text in a text field.
• ListView.builder — Widget for building scrollable lists from dynamic data.
• Provider — State management solution for sharing app data across widgets.
• Hive — Lightweight local database for storing app data on device.

Action Items / Next Steps

• Practice by building simple apps like a counter or calculator.
• Experiment with layouts using different widgets (Column, Row, ListView).
• Try modifying the to-do app and e-commerce app, adding new features or customizing UI.
• Review Flutter documentation for additional widgets and advanced features.