شرح Flutter AnimatedContainer UI لإنشاء واجهات تفاعلية احترافية في Flutter
إذا كنت تبحث عن طريقة احترافية لتطوير واجهات مستخدم مرنة وجذابة داخل تطبيقات Flutter، فإن أسلوب Flutter AnimatedContainer UI يعد من أفضل الحلول التي يمكنك الاعتماد عليها. هذا الأسلوب يمنحك القدرة على إنشاء عناصر متحركة وتفاعلية بسهولة، مع الحفاظ على أداء ممتاز وتنظيم واضح للكود.
في هذا المقال سنشرح الكود المقدم بشكل عملي ومفصل، وسنوضح كيف يمكنك استخدام عناصر مثل AnimatedContainer و Switch و TweenAnimationBuilder لإنشاء واجهات ديناميكية قابلة للتخصيص، مع تحسين تجربة المستخدم داخل التطبيق.
ما هو Flutter ولماذا يستخدم في بناء واجهات مرنة؟
تكمن قوة Flutter في أنه يمنحك تحكمًا مباشرًا في تفاصيل الواجهة، وهذا ما يجعله مناسبًا جدًا عند تنفيذ Flutter AnimatedContainer UI أو أي تجربة تفاعلية تعتمد على الحركة وتبديل الحالات بشكل ديناميكي.
نظرة على المكتبات المستخدمة في الكود
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_openui/utils/colors.dart';
import 'package:flutter_openui/utils/sizing.dart';
dart:math
تستخدم لإجراء العمليات الحسابية التي قد تكون مطلوبة في بعض التأثيرات أو التحويلات داخل الواجهة.
material.dart
توفر عناصر Flutter الأساسية مثل Scaffold و Switch و Icon و AnimatedContainer وغيرها من مكونات التصميم.
colors.dart و sizing.dart
تساعد في تنظيم الألوان والمقاسات داخل المشروع، مما يجعل الكود أكثر ترتيبًا وقابلية لإعادة الاستخدام.
فهم StatefulWidget في هذا المثال
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
isExpanded
تحدد ما إذا كانت الحاوية موسعة أو مطوية.
hasCopied و hasCopied2
يتم استخدامهما للتحكم في الأيقونة المتحركة وتغيير حالتها بعد النقر.
activeIndex
يحدد العنصر النشط داخل الشبكة التفاعلية.
دور AnimatedContainer في بناء Flutter AnimatedContainer UI
AnimatedContainer(
onEnd: () {
setState(() => hasCopied = true);
},
duration: Duration(milliseconds: 2500),
curve: Curves.elasticOut,
decoration: BoxDecoration(
color: AppColors.textWhite,
borderRadius: BorderRadius.circular(15),
),
)
الميزة الكبيرة في AnimatedContainer أنه يختصر الكثير من الجهد، إذ يكفي تغيير القيم داخل setState ليقوم Flutter بتحريك العنصر تلقائيًا.
استخدام Switch للتحكم في تمدد الواجهة
Switch(
value: isExpanded,
onChanged: (val) {
setState(() {
isExpanded = !isExpanded;
activeIndex = null;
});
},
)
تنظيم العناصر باستخدام Stack و Column
Stack(
alignment: Alignment.center,
children: [
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CartItem(...),
CartItem(...),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CartItem(...),
CartItem(...),
],
),
],
),
TweenAnimationBuilder(...)
],
)
استخدام TweenAnimationBuilder لإضافة حركة ناعمة
TweenAnimationBuilder(
key: ValueKey(hasCopied),
curve: Curves.elasticOut,
tween: Tween<double>(begin: hasCopied ? 1.0 : 1.2, end: hasCopied ? 1.2 : 1.0),
duration: const Duration(milliseconds: 500),
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: child,
);
},
)
شرح CartItem كعنصر تفاعلي مستقل
class CartItem extends StatelessWidget {
final bool isExpanded;
final Function()? onTap;
final bool isActive;
const CartItem({
super.key,
required this.isExpanded,
required this.onTap,
required this.isActive,
});
}
كما أن CartItem يعتمد على AnimatedContainer أيضًا لتغيير اللون والخلفية حسب حالة العنصر:
AnimatedContainer(
duration: duration,
height: AppSizing.height(context) * 0.09,
width: AppSizing.width(context) * 0.36,
decoration: BoxDecoration(
color: isActive
? Colors.blue.withOpacity(0.2)
: !isExpanded
? AppColors.textWhite
: AppColors.bgGrey,
borderRadius: BorderRadius.circular(8),
),
)
كيف يحسن هذا الكود تجربة المستخدم؟
التفاعل السلس
استخدام AnimatedContainer و TweenAnimationBuilder يمنح المستخدم تجربة ناعمة بدلًا من الانتقال الفجائي بين الحالات.
الوضوح البصري
العناصر النشطة تظهر بشكل مختلف، مما يسهل على المستخدم فهم حالته الحالية داخل الواجهة.
إمكانية التخصيص
وجود Switch والعناصر القابلة للنقر يمنح المستخدم حرية أكبر في التفاعل مع المحتوى.
تنظيم جيد للكود
تقسيم الواجهة إلى عناصر مستقلة مثل CartItem يساعد المطور على التعديل المستقبلي بسهولة.
أفضل استخدامات هذا الأسلوب في مشاريع Flutter
– تطبيقات التجارة الإلكترونية – واجهات الإعدادات التفاعلية – لوحات التحكم Dashboard – تطبيقات الإنتاجية وإدارة المهام – تطبيقات تعليمية تحتاج إلى بطاقات تفاعلية – أدوات التحكم السريعة داخل التطبيقات الحديثة
هذا يعني أن الفكرة ليست مجرد مثال تعليمي، بل يمكن تطويرها وتحويلها إلى جزء فعلي داخل مشروع حقيقي.
رابط الكود الكامل على GitHub
https://github.com/yunweneric/flutter-open-ui/tree/rounded_corners_interaction/lib/screens
الخلاصة
من خلال الاعتماد على AnimatedContainer و Switch و Stack و TweenAnimationBuilder، يمكنك إنشاء واجهات مرنة تستجيب مباشرة لتفاعل المستخدم، دون الحاجة إلى كتابة أكواد Animation معقدة.
إذا كنت ترغب في تحسين شكل تطبيقك وجعله أكثر حداثة واحترافية، فإن هذا المثال يمثل نقطة بداية قوية جدًا. يمكنك تطوير الفكرة، تعديل الألوان، تغيير العناصر، وربطها ببيانات حقيقية داخل تطبيقك للحصول على واجهة عملية وجذابة في الوقت نفسه.
كلما أتقنت استخدام هذه العناصر داخل Flutter، أصبحت قادرًا على تصميم واجهات أكثر ذكاءً وسلاسة، وهو ما يمنح تطبيقك قيمة أكبر ويجعل تجربة المستخدم أفضل بكثير.
لمزيد من المقالات : كيفية إضافة الرسوم المتحركة إلى ListView في Flutter : دليل شامل
