Skip to content

README.md

Latest commit

 

History

History
123 lines (81 loc) · 3.53 KB

README.md

File metadata and controls

123 lines (81 loc) · 3.53 KB
Raw

A workshop in Flutter

Let's create an app with Flutter!

Flutter CI

CoffeeShop app preview:

Four screenshots for different screens in the app: product catalog, cart, user profile and order history

What you'll learn

By completing this workshop you will be able to:

  • Create a multi-screen Flutter app using BottomNavigationBar
  • Build common UI layouts with widgets such as Column, ListView, ListTile, Card, and CircleAvatar
  • Navigate between pages (both tab-based and stack-based with Navigator.push)
  • Define simple Dart data models (classes with named constructors)
  • Manage shared app state without an external library
  • Use hot-reload to see live changes during development

Project structure

app/
└── lib/
    ├── main.dart              # App entry point and bottom-navigation host
    ├── coffee_manager.dart    # Lightweight in-memory state container
    ├── models/
    │   ├── product.dart       # Product data model
    │   ├── user.dart          # User data model
    │   └── order.dart         # Order data model
    └── pages/
        ├── catalog.dart       # Product listing screen
        ├── cart.dart          # Shopping cart screen
        ├── profile.dart       # User profile screen
        └── orders.dart        # Order history screen

Requirements

Required

  • Bring Your Own Device (BYOD)
  • Basic/medium programming knowledge
  • Flutter SDK installed and set up

To choose:

  • Android Studio
  • Visual Studio Code

⚠️ NOTE - Visual Studio is different than Visual Studio Code

Optional

To choose:

  • Android emulator device
  • Physical device (developer mode and USB debugging enabled)

Running the app

# Navigate to the app directory
cd app

# Fetch dependencies
flutter pub get

# Run on a connected device or emulator
flutter run

To add support for additional platforms:

# Web
flutter create --platforms=web .

# Linux
flutter create --platforms=linux .

About the code

No state management libraries/tools/engines are used.

No best practices with Flutter are used.

This is a beginner level project.

This workshop focuses on the development of UI, to learn the basics of Flutter, widgets, navigation between views, Dart first steps...

Hands on lab

Clone this repo and checkout to workshop branch.

💡 Don't want to use Git? Download the starter project directly from download-directory.github.io.

For a detailed step-by-step guide see docs/guide.md.

More info

General:

Android:

Dart: