شرح Flutter للمبتدئين: إطار العمل الأقوى لبناء تطبيقات الجوّال

flutter doctor
# يُظهر تقريراً بكل ما تحتاج

flutter create my_first_app
cd my_first_app
flutter run

my_first_app/
├── lib/
│   └── main.dart         # نقطة البدء
├── android/              # كود Android الأصلي
├── ios/                  # كود iOS الأصلي
├── assets/               # صور وخطوط
└── pubspec.yaml          # التبعيات

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: 'تطبيقي',
      home: Scaffold(
        appBar: AppBar(title: const Text('مرحباً')),
        body: const Center(
          child: Text('أهلاً بالعالم!'),
        ),
      ),
    );
  }
}

class Greeting extends StatelessWidget {
  final String name;
  const Greeting({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Text('أهلاً $name');
  }
}

class Counter extends StatefulWidget {
  const Counter({super.key});
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('$count', style: const TextStyle(fontSize: 48)),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: const Text('+1'),
        ),
      ],
    );
  }
}

Column(
  children: [
    Text('الأول'),
    Text('الثاني'),
    Text('الثالث'),
  ],
)

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.home),
    Icon(Icons.settings),
  ],
)

Container(
  padding: const EdgeInsets.all(16),
  margin: const EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    color: Colors.blue.shade50,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(color: Colors.blue),
  ),
  child: const Text('محتوى داخل صندوق'),
)

// دفع شاشة جديدة
Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => const DetailsScreen()),
);

// الرجوع
Navigator.pop(context);

// استبدال الشاشة
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (_) => const HomeScreen()),
);