## Creating a Flutter App ### Setup Commands ```bash flutter create my_first_app cd my_first_app flutter run ``` ### Project Structure ``` my_first_app/ ├── android/ # Android-specific files ├── ios/ # iOS-specific files ├── lib/ # Dart source code (main.dart) ├── test/ # Unit tests ├── pubspec.yaml # Dependencies & metadata ``` ## Run vs Build Commands ### `flutter run` - Development Mode - Runs app on device/emulator with debugging - Enables hot reload for instant changes - Keeps connection open for development tools - **Usage:** `flutter run`, `flutter run --release` ### `flutter build` - Production Ready - Creates optimized files for distribution - No debugging overhead, smaller file size - **Usage:** `flutter build apk`, `flutter build appbundle`, `flutter build web` ## Flutter Run Hot Keys ### Essential Commands - **`r`** - Hot Reload (preserves app state) - **`R`** - Hot Restart (fresh app state) - **`q`** - Quit flutter run - **`h`** - Show help/available commands ### Debugging & Inspection - **`p`** - Toggle Debug Paint (wireframe view) - **`i`** - Toggle Widget Inspector - **`w`** - Dump Widget Hierarchy to console - **`v`** - Launch DevTools in browser - **`s`** - Take Screenshot ### Advanced Debugging - **`t`** - Dump Rendering Tree - **`S`** - Dump Semantics Tree (accessibility) - **`c`** - Clear console screen - **`d`** - Detach debugger (keep app running) ## Key Concepts - **Widgets:** Everything is a widget (StatelessWidget vs StatefulWidget) - **Hot Reload:** Instant code changes without losing app state - **pubspec.yaml:** Manage dependencies and app metadata - **main.dart:** App entry point with runApp() function ## Typical Development Workflow 1. `flutter run` to start development 2. Make code changes 3. Press `r` for hot reload 4. Use `p` for layout debugging 5. Use `i` for widget inspection 6. `flutter build` when ready for production ## Files You'll Focus On Most ### **lib/main.dart** - Your Main Hub - **Purpose:** Entry point of your Flutter app - **What you do:** Define app structure, themes, and home page - **You'll modify:** App title, theme colors, initial route, main widget ### **pubspec.yaml** - Project Configuration - **Purpose:** Dependencies, assets, app metadata - **What you do:** Add packages, fonts, images, app version - **Location:** Root directory - **Critical for:** Adding external libraries, managing assets ### **lib/ folder** - All Your Dart Code - **Purpose:** Contains all your custom Dart files - **What you create:** ``` lib/ ├── main.dart # Entry point ├── screens/ # Different app pages │ ├── home_screen.dart │ ├── profile_screen.dart │ └── settings_screen.dart ├── widgets/ # Reusable UI components │ ├── custom_button.dart │ └── user_card.dart ├── models/ # Data structures │ └── user.dart ├── services/ # API calls, database │ └── api_service.dart └── utils/ # Helper functions └── constants.dart ``` ## Files/Folders You'll Create ### **assets/ folder** (you create this) ``` assets/ ├── images/ │ ├── logo.png │ └── background.jpg ├── fonts/ │ └── custom_font.ttf └── icons/ └── custom_icon.svg ``` ### **test/ folder** - Unit Tests - **Exists by default** with `widget_test.dart` - **You'll add:** More test files as your app grows ## Platform-Specific Files (Rarely Modified) ### **android/ folder** - **android/app/src/main/AndroidManifest.xml** - App permissions, name - **android/app/build.gradle** - Android build settings - **You modify when:** Adding permissions, changing app name/icon ### **ios/ folder** - **ios/Runner/Info.plist** - iOS app configuration - **You modify when:** iOS-specific permissions, settings ## Example File Creation Workflow **1. Start with main.dart:** ```dart // lib/main.dart - Your starting point import 'package:flutter/material.dart'; import 'screens/home_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My Cool App', home: HomeScreen(), ); } } ``` **2. Create your first screen:** ```dart // lib/screens/home_screen.dart - New file you create import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Home')), body: Center(child: Text('Welcome!')), ); } } ``` **3. Add assets to pubspec.yaml:** ```yaml # pubspec.yaml - You'll modify this frequently flutter: assets: - assets/images/ - assets/icons/ fonts: - family: CustomFont fonts: - asset: assets/fonts/custom_font.ttf ``` **4. Create reusable widgets:** ```dart // lib/widgets/custom_button.dart - New file you create import 'package:flutter/material.dart'; class CustomButton extends StatelessWidget { final String text; final VoidCallback onPressed; CustomButton({required this.text, required this.onPressed}); @override Widget build(BuildContext context) { return ElevatedButton( onPressed: onPressed, child: Text(text), ); } } ``` ## File Organization Best Practices **Start Simple:** - Begin with just `main.dart` - Create new files as your app grows **Create Folders When You Have 3+ Related Files:** - `screens/` when you have multiple pages - `widgets/` for reusable components - `models/` for data classes **Common File Naming:** - Use snake_case: `home_screen.dart`, `user_profile.dart` - Be descriptive: `login_button.dart` not `button.dart` ## Files You'll Rarely Touch - **README.md** - Project documentation - **.gitignore** - Git configuration - **analysis_options.yaml** - Code linting rules - Most files in `android/` and `ios/` folders ## Summary: Your Focus Areas **90% of your time:** `lib/` folder (especially main.dart and your custom screens) **8% of your time:** `pubspec.yaml` (adding dependencies and assets) **2% of your time:** Platform-specific files (permissions, app icons) The beauty of Flutter is that you primarily work in the `lib/` folder writing Dart code, and the framework handles most of the platform-specific complexity for you!