ការណែនាំ Flutter

Flutter Framework ជាអ្វី?

បន្ទាប់ពីរៀន Dart យើងចាប់ផ្តើមរៀន Flutter framework។ Flutter ប្រើ Dart ដើម្បីបង្កើត UI និងគ្រប់គ្រង application logic។

🏗️ Flutter App Structure

Flutter app មានរចនាសម្ព័ន្ធស្តង់ដារ:

main()                  // Entry point
  └─ runApp()          // Start Flutter engine
      └─ MaterialApp   // Root widget
          └─ Scaffold  // Page structure
              ├─ AppBar
              ├─ Body
              ├─ FloatingActionButton
              └─ BottomNavigationBar

📘 Understanding main() Function

គ្រប់ Flutter app ទាំងអស់ចាប់ផ្តើមពី main() function:

void main() {
  // 1. Initialize Flutter bindings
  WidgetsFlutterBinding.ensureInitialized();
  
  // 2. Run the app
  runApp(MyApp());
}

// runApp() does:
// - Creates a widget tree
// - Attaches it to the screen
// - Triggers first build()

📱 Flutter App ដំបូង

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('សួស្តី Flutter'),
      ),
      body: Center(
        child: Text(
          'ជម្រាបសួរពិភពលោក!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

🧩 Widget គឺជាអ្វី?

ក្នុង Flutter គ្រប់យ៉ាងជា Widget។ Widget គឺដូចជា building blocks នៃ UI។

Widget Definition:

Widget = Immutable description នៃផ្នែកមួយនៃ UI។ វាមិនមែនជា UI ផ្ទាល់ខ្លួនទេ ប៉ុន្តែជា configuration សម្រាប់ UI។

Widget Hierarchy:

Root Widget (MaterialApp)
    │
    ├─ Scaffold
    │   ├─ AppBar (Widget)
    │   │   └─ Text (Widget)
    │   │
    │   ├─ Body (Widget)
    │   │   ├─ Column (Widget)
    │   │   │   ├─ Text (Widget)
    │   │   │   ├─ Button (Widget)
    │   │   │   └─ Image (Widget)
    │   │
    │   └─ FloatingActionButton (Widget)

Common Widget Types:

• Text Widget: បង្ហាញអត្ថបទ (immutable)
• Button Widgets: ElevatedButton, TextButton, IconButton
• Image Widget: បង្ហាញរូបភាព (network, asset, file)
• Container Widget: Box model (padding, margin, decoration)
• Layout Widgets: Column, Row, Stack (arrange children)
• Input Widgets: TextField, Checkbox, Switch (user interaction)

🎨 Material Design vs Cupertino

Feature	Material (Android style)	Cupertino (iOS style)
Package	flutter/material.dart	flutter/cupertino.dart
App Widget	MaterialApp	CupertinoApp
Button	ElevatedButton	CupertinoButton
Dialog	AlertDialog	CupertinoAlertDialog
Navigation	BottomNavigationBar	CupertinoTabBar

📦 MaterialApp - Root Widget

MaterialApp គឺជា root widget របស់ Flutter app ដែលប្រើ Material Design។

MaterialApp(
  title: 'My App',           // ចំណងជើង app
  theme: ThemeData(          // ธีມ app
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
  ),
  darkTheme: ThemeData(      // Dark mode
    brightness: Brightness.dark,
  ),
  home: HomePage(),          // ទំព័រដំបូង
  debugShowCheckedModeBanner: false,  // លាក់ banner DEBUG
)

🏗️ Scaffold

Scaffold ផ្តល់នូវរចនាសម្ព័ន្ធមូលដ្ឋាន Material Design។

Scaffold(
  appBar: AppBar(
    title: Text('ទំព័រដើម'),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
  body: Center(
    child: Text('Content here'),
  ),
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          child: Text('Menu'),
        ),
        ListTile(
          title: Text('Item 1'),
        ),
      ],
    ),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: 'Settings',
      ),
    ],
  ),
)

🎨 Basic Widgets

Text Widget

Text(
  'សួស្តី Flutter',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    fontStyle: FontStyle.italic,
    decoration: TextDecoration.underline,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Container Widget

Container(
  width: 200,
  height: 100,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.only(top: 20),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 10,
        offset: Offset(0, 5),
      ),
    ],
  ),
  child: Text(
    'Container',
    style: TextStyle(color: Colors.white),
  ),
)

Image Widget

// From network
Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

// From assets
Image.asset(
  'assets/images/logo.png',
  width: 100,
  height: 100,
)

Icon Widget

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 50,
)

▶️ Button Widgets

// ElevatedButton (Material 3)
ElevatedButton(
  onPressed: () {
    print('Button clicked!');
  },
  child: Text('ចុច'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
  ),
)

// TextButton
TextButton(
  onPressed: () {},
  child: Text('Cancel'),
)

// IconButton
IconButton(
  icon: Icon(Icons.delete),
  onPressed: () {},
  color: Colors.red,
)

// OutlinedButton
OutlinedButton(
  onPressed: () {},
  child: Text('Outlined'),
)

📐 Layout Structure

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Layout Example'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'ចំណងជើង',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 16),
            Container(
              padding: EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.blue[100],
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                children: [
                  Icon(Icons.info, color: Colors.blue),
                  SizedBox(width: 12),
                  Expanded(
                    child: Text('នេះជាទិន្នន័យ'),
                  ),
                ],
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {},
              child: Text('ចុចនៅទីនេះ'),
            ),
          ],
        ),
      ),
    );
  }
}

🎯 Hot Reload Demo

អ្វីគួររំពឹងទុកពី Hot Reload:

1. រត់ app ដោយប្រើ flutter run
2. កែកូដ (ឧទាហរណ៍៖ ប្តូរពណ៌ ឬ text)
3. រក្សាទុក file
4. ចុច "r" ក្នុង terminal ឬ hot reload button ក្នុង IDE
5. App នឹង reload ភ្លាមៗដោយមិនបាត់ state