Basic Toolkit

A Flutter reference project demonstrating common patterns and features. Each feature is a self-contained screen accessible from a main menu, making it easy to find, understand, and reuse patterns across projects.

Includes a local FastAPI server for the REST API demo — one command to run, no external dependencies.

Features

Feature	What It Demonstrates
Dialogs	Alert, confirmation (with return values), custom layout, full-screen
Bottom Sheets	Modal (with return values), draggable/scrollable, persistent
Snackbars	Basic, with action, custom styled, duration control
WebView	Embedded web content with navigation controls, external URL launch
REST API	Full CRUD against a local API — create, read, update, delete tasks with loading/error states
Claude Chat	Working conversational UI using the Claude Messages API

Tech Stack

Flutter App: Provider (ChangeNotifier), http, flutter_dotenv, webview_flutter, url_launcher

API Server: Python, FastAPI, Docker

Getting Started

Prerequisites

• Flutter SDK (3.7+)
• Docker Desktop (for the REST API feature)
• An Anthropic API key (for the Claude Chat feature — optional)

Setup

git clone <repo-url>
cd basic_toolkit
flutter pub get

Environment variables — create a .env file in the project root:

ANTHROPIC_API_KEY=your-key-here

If you don't have an API key, the app runs fine — only the Claude Chat feature requires it.

Start the API Server

docker compose up

The API runs at http://localhost:8000 with auto-generated Swagger docs at http://localhost:8000/docs. It seeds 3 sample tasks on startup and stores everything in memory (resets on restart).

Run the App

flutter run

Platform notes:

• iOS Simulator: localhost works out of the box
• Android Emulator: The API service uses localhost by default — if running on Android emulator, change the base URL in lib/features/api/api_service.dart to http://10.0.2.2:8000

Project Structure

basic_toolkit/
├── api/                               # FastAPI server (Python)
│   ├── main.py                        # All routes and logic
│   ├── requirements.txt
│   └── Dockerfile
├── docker-compose.yml                 # One command to run the API
├── lib/
│   ├── main.dart
│   ├── home_screen.dart               # Main menu
│   ├── shared/
│   │   └── app_scaffold.dart          # Reusable screen wrapper
│   └── features/
│       ├── dialogs/                   # Dialog pattern demos
│       ├── bottom_sheets/             # Bottom sheet pattern demos
│       ├── snackbars/                 # Snackbar variants
│       ├── webview/                   # WebView + url_launcher
│       ├── api/                       # Full CRUD with Provider
│       │   ├── api_service.dart       # HTTP client layer
│       │   ├── api_provider.dart      # ChangeNotifier state management
│       │   └── api_screen.dart        # Task list UI
│       └── claude_chat/               # Claude Messages API chat
│           ├── claude_service.dart    # API client
│           ├── claude_chat_provider.dart
│           └── claude_chat_screen.dart
├── .env                               # API keys (gitignored)
└── CLAUDE.md                          # Build spec

API Endpoints

Method	Path	Description
GET	/tasks	List all tasks
GET	/tasks/{id}	Get single task
POST	/tasks	Create task
PUT	/tasks/{id}	Update task
DELETE	/tasks/{id}	Delete task
DELETE	/tasks	Delete all tasks
GET	/health	Health check

Key Patterns

The project is designed as a copy-paste reference. Each feature demonstrates patterns you'd use in a production app:

• State management: ChangeNotifierProvider scoping, context.watch for reactive rebuilds, context.read for actions
• API consumption: Clean separation of HTTP layer (service) from state (provider) from UI (screen)
• CRUD lifecycle: Create, read, update, delete with optimistic updates, loading states, and error handling
• Dialog/sheet return values: Capturing user input from modals and using the result
• Environment config: API keys via .env with flutter_dotenv

License

MIT