Project structure and hot reload

Creating a project

flutter create chai_shop
cd chai_shop
flutter run

What is inside

chai_shop/
├── lib/
│   └── main.dart            <- your app starts here (main function)
├── test/
│   └── widget_test.dart     <- tests (module 10)
├── android/  ios/  web/  windows/  macos/  linux/   <- platform projects
├── assets/                  <- images, fonts (you create it and list it in pubspec)
├── pubspec.yaml             <- name, version, packages, assets
├── pubspec.lock             <- exact package versions
└── analysis_options.yaml    <- lint rules for code quality

The platform folders are real native projects. android/ is a normal Android Gradle project; ios/ is an Xcode project. Flutter generates them and you rarely edit them, except for things like the app name, permissions in AndroidManifest.xml or Info.plist, and signing for release (module 11).

The starter main.dart in brief

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());     // put the root widget on the screen
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chai Shop',
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.brown)),
      home: const Scaffold(
        body: Center(child: Text('Namaste from Chai Shop')),
      ),
    );
  }
}

Hot reload, hot restart, full restart

Hot reload is Flutter's superpower: you change a colour, a padding or some text and see it on the phone in about a second, still on the same screen with the same data. Some changes are not picked up by hot reload, such as changes to main(), to initState of a widget that already exists, to global variables' initial values, or to native code and pubspec packages. If a change "does not show", try hot restart, and for native or package changes, a full restart.

DevTools

Flutter DevTools is a set of debugging tools that opens in the browser or inside your editor: the widget inspector (see the widget tree and layout), a performance view, a memory view, network and logging views. You will use it in module 9; open it once now from your editor to see your app's widget tree.

Common mistakes

• Expecting hot reload to apply changes to main() or initState: use hot restart.
• Adding a package and only hot reloading: stop and run again after pub get adds native code.
• Editing generated files in build/: they are overwritten.
• Deleting platform folders you do not think you need; recreate them with flutter create . if needed.