بناء أول تطبيق Flutter لك

Your First Flutter App!

Create a New Project

flutter create my_first_app
cd my_first_app

Understand Project Structure

The App Entry Point: main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Launching App...', // Text displayed directly
        textDirection: TextDirection.ltr, // Required for root Text widget
        style: TextStyle(color: Colors.blue, fontSize: 20),
      ),
    ),
  );
}

Building Your MyApp Widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // This widget will define the app's look and feel
    return const Placeholder(); // A temporary visual marker
  }
}

MaterialApp & Scaffold Basics

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter App',
      theme: ThemeData(primarySwatch: Colors.blue), // Sets primary color
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First App'), // Text in the app bar
        ),
        body: const Center(
          child: Text(
            'Hello, CoddyKit!', // Our main content text
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Running Your New App

flutter run

Meet Hot Reload!

Hot Reload in Action

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter App',
      theme: ThemeData(primarySwatch: Colors.green), // Changed color!
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Updated App'), // Changed text!
        ),
        body: const Center(
          child: Text(
            'Hot Reloaded!', // Changed text and size!
            style: TextStyle(fontSize: 28, color: Colors.red),
          ),
        ),
      ),
    );
  }
}

Hot Reload vs. Hot Restart

Quick Check: Hot Reload

Recap: First Flutter App