ماهي Hooks ولماذا عليك البدء في استخدامها في مشايعك داخل Flutter

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class ExampleUseMemoized extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final expensiveResult = useMemoized(() {
      // عملية مكلفة مثل جلب البيانات من الإنترنت
      return performExpensiveOperation();
    }, []);

    return Scaffold(
      appBar: AppBar(
        title: Text('useMemoized Example'),
      ),
      body: Center(
        child: Text('Result: $expensiveResult'),
      ),
    );
  }

  String performExpensiveOperation() {
    // محاكاة عملية حسابية معقدة
    return 'Expensive Calculation';
  }
}

useFuture

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class ExampleUseFuture extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final futureResult = useFuture(fetchData(), initialData: 'Loading...');

    return Scaffold(
      appBar: AppBar(
        title: Text('useFuture Example'),
      ),
      body: Center(
        child: Text('Result: ${futureResult.data}'),
      ),
    );
  }

  Future<String> fetchData() async {
    // محاكاة جلب البيانات
    await Future.delayed(Duration(seconds: 2));
    return 'Data Fetched!';
  }
}

useStream

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class ExampleUseStream extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final streamData = useStream(counterStream(), initialData: 0);

    return Scaffold(
      appBar: AppBar(
        title: Text('useStream Example'),
      ),
      body: Center(
        child: Text('Counter: ${streamData.data}'),
      ),
    );
  }

  Stream<int> counterStream() async* {
    for (int i = 0; i < 10; i++) {
      await Future.delayed(Duration(seconds: 1));
      yield i;
    }
  }
}

البرمجة باستخدام Hooks مقابل البرمجة بدونها

import 'package:flutter/material.dart';

class ExampleWithoutHooks extends StatefulWidget {
  @override
  _ExampleWithoutHooksState createState() => _ExampleWithoutHooksState();
}

class _ExampleWithoutHooksState extends State<ExampleWithoutHooks> {
  Future<String> _futureData;
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    _futureData = fetchData();
  }

  Future<String> fetchData() async {
    await Future.delayed(Duration(seconds: 2));
    return 'Data Fetched!';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Without Hooks Example'),
      ),
      body: Center(
        child: FutureBuilder(
          future: _futureData,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else {
              return Text('Result: ${snapshot.data}');
            }
          },
        ),
      ),
    );
  }
}

useTextEditingController

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class ExampleUseTextEditingController extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final textController = useTextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text('useTextEditingController Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: textController,
              decoration: InputDecoration(labelText: 'Enter Text'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // طباعة النص المدخل في الـ TextField
                print('Text: ${textController.text}');
              },
              child: Text('Print Text'),
            ),
          ],
        ),
      ),
    );
  }
}

useAnimationController

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class ExampleUseAnimationController extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final animationController = useAnimationController(
      duration: const Duration(seconds: 2),
    );

    // بدء الرسوم المتحركة تلقائيًا عند بدء الـ Widget
    useEffect(() {
      animationController.forward();
      return animationController.dispose;
    }, []);

    return Scaffold(
      appBar: AppBar(
        title: Text('useAnimationController Example'),
      ),
      body: Center(
        child: ScaleTransition(
          scale: animationController,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // إعادة تشغيل الرسوم المتحركة
          animationController.forward(from: 0);
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

فوائد استخدام الخطافات في فلاتر