يسمح AnimatedOpacity
في Flutter للمطورين بتغيير شفافية عناصر واجهة المستخدم بشكل تدريجي ومتحرك. يمكن استخدام هذا العنصر الرسومي لتحريك النصوص والصور وحتى الأشكال والأيقونات وتحسين تجربة المستخدم.
خصائص AnimatedOpacity
هناك عدة خصائص يمكن تعيينها في AnimatedOpacity
لضبط الطريقة التي يتم بها تغيير شفافية العنصر. وفيما يلي شرح لكل خاصية بالتفصيل:
“اقرأ أيضاً: شرح استخدام ويدجت Tooltip في فلاتر“
opacity
تحدد شفافية العنصر المراد تغييرها. يمكن استخدام قيمة بين 0 و 1 لهذه الخاصية.
AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.blue, ), )
duration
تحدد مدة التحرك والتغيير في شفافية العنصر. يتم تعيين القيمة بناءً على متطلبات التطبيق.
AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.blue, ), )
“اقرأ أيضاً: شرح استخدام ويدجت SafeArea في فلاتر“
curve
تحدد منحنى التحول لتغيير شفافية العنصر. يمكن استخدام أحد الأنواع المدمجة في Flutter أو تعيين منحنى مخصص.
AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), curve: Curves.easeInOut, child: Container( width: 200, height: 200, color: Colors.blue, ), )
onEnd
يسمح للمطورين بتحديد وظيفة يتم تشغيلها بمجرد انتهاء التحرك والتغيير في شفافية العنصر.
AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), onEnd: () { print('Animation finished'); }, child: Container( width: 200, height: 200, color: Colors.blue, ), )
child
يحدد العنصر الذي يتم تغيير شفافيته.
AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.blue, ), )
مثال على استخدام AnimatedOpacity
في فلاتر
فيما يلي مثال على استخدام AnimatedOpacity
في Flutter لتحريك وتغيير شفافية عنصر واحد في التطبيق:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'AnimatedOpacity Example', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyAnimatedOpacity(), ); } } class MyAnimatedOpacity extends StatefulWidget { const MyAnimatedOpacity({Key? key}) : super(key: key); @override _MyAnimatedOpacityState createState() => _MyAnimatedOpacityState(); } class _MyAnimatedOpacityState extends State<MyAnimatedOpacity> { double _opacity = 1.0; bool _visible = false; @override Widget build(BuildContext context) { return MaterialApp( title: 'Animated Opacity Demo', home: Scaffold( appBar: AppBar( title: const Text('Animated Opacity Demo'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ AnimatedOpacity( opacity: _opacity, duration: const Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.blue, ), ), const SizedBox(height: 20), ElevatedButton( onPressed: () { setState(() { _opacity = _opacity == 1.0 ? 0.0 : 1.0; }); }, child: const Text('Toggle Opacity'), ), const SizedBox(height: 20), ElevatedButton( onPressed: () { setState(() { _visible = !_visible; }); }, child: const Text('Toggle Visibility'), ), const SizedBox(height: 20), AnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: const Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.red, child: const Center( child: Text( 'Visible', style: TextStyle( color: Colors.white, fontSize: 32, fontWeight: FontWeight.bold, ), ), ), ), ), ], ), ), ), ); } }
في هذا المثال، تم إنشاء AnimatedOpacity
الذي يتحرك ويتغير شفافيته مع تبديل الحالة. تم استخدام opacity
لتحديد الشفافية و duration
لتحديد مدة التحرك. في build
، تم إنشاء AnimatedOpacity
وتمرير opacity
و duration
و child
إلى العنصر. تم إضافة زرين لتبديل الحالة وإظهار كيف يتم تغيير شفافية العنصر عند تبديل الحالة.
“اقرأ أيضاً: شرح استخدام ويدجت TextField في فلاتر“
AnimatedOpacity
هو عنصر رسومي يساعد المطورين على تغيير شفافية العناصر في واجهة المستخدم بشكل تدريجي ومتحرك. يمكن تخصيص العديد من الخصائص لتعديل طريقة تغيير شفافية العنصر وتحسين تجربة المستخدم.