كيفية إنشاء أشرطة تقدم خطية ودائرية في Flutter

تعتبر أشرطة التقدم الخطية والدائرية في Flutter مثالية لمنح المستخدمين نظرة عامة سريعة بصريًا، مما يسمح لهم برؤية المعلومات المهمة في لمحة. في هذا المنشور، ستتعلم كيفية إنشاء أشرطة تقدم باستخدام كل من أدوات Flutter المضمنة وحزمة من جهة خارجية.

أشرطة التقدم المضمنة في Flutter
يتضمن Flutter أشرطة تقدم مدمجة مع أدوات واجهة المستخدم LinearProgressIndicatorالرسومية و CircularProgressIndicator. ويمكن أن تعمل هذه الأدوات كمؤشرات تحميل وأشرطة تقدم. في الأقسام التالية، سنستخدم هذه الأدوات الرسومية خصيصًا لإنشاء أشرطة تقدم خطية ودائرية.
أداة LinearProgressIndicator
لتحويل LinearProgressIndicatorالأداة إلى شريط تقدم، يمكننا استخدام valueخاصيتها. دعنا نستعرض المثال التالي.

import ‘package:flutter/material.dart’;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

final double value = 0.5;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
width: MediaQuery.sizeOf(context).width * 0.9,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
LinearProgressIndicator(
backgroundColor: Colors.grey.withOpacity(0.4),
borderRadius: BorderRadius.circular(25),
color: Colors.greenAccent,
minHeight: 20,
value: value,
),
Text(
‘${(value * 100).toInt()}%’,
style: const TextStyle(fontSize: 20),
),
],
),
),
),
),
);
}
}

Click to Copy

في مقتطف التعليمات البرمجية أعلاه، لدينا MyAppعنصر واجهة مستخدم يعيد MaterialAppعنصر واجهة مستخدم. داخل MaterialAppالعنصر، قمنا بتعيين Scaffoldعنصر واجهة مستخدم لخاصيته home. Scaffoldيعرض العنصر شريط تقدم خطي في المنتصف.

لعرض شريط التقدم الخطي، نبدأ بأداة SizedBox. وهذا يضمن أن LinearProgressIndicatorلا يشغل العرض بالكامل بل يستخدم 90% من العرض المتاح عن طريق تطبيق MediaQuery.sizeOf(context).width * 0.9. داخل SizedBox، نستخدم Stackأداة تسمح لنا بتراكب النص أعلى شريط التقدم.

بالنسبة LinearProgressIndicatorللأداة، قمنا بتحديد خمس سمات. تحدد الخاصيتان backgroundColorو colorألوان شريط التقدم، بينما colorتمثلان لون التقدم الفعلي. نستخدم الخاصية borderRadiusلإعطاء شريط التقدم زوايا مستديرة، بينما minHeightتجعل شريط التقدم أكبر. وأخيرًا، valueتُستخدم الخاصية للإشارة إلى مستوى التقدم الحالي.
في Stackالأداة، يتم وضع كل عنصر فرعي فوق العنصر الذي يسبقه. وهذا يعني أن العنصر الفرعي الأحدث سيكون دائمًا في الأعلى، مما يتيح لك إنشاء طبقات من العناصر المتداخلة.

أداة CircularProgressIndicator
لعرض أشرطة التقدم الدائرية، يمكننا استخدام CircularProgressIndicatorالأداة. وهي تعمل بشكل مشابه لأداة LinearProgressIndicator ولكنها تحتوي على بعض السمات الإضافية لضبط خطها.

import
import ‘package:flutter/material.dart’;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

final double value = 0.5;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Stack(
alignment: AlignmentDirectional.center,
children: [
SizedBox(
height: 150,
width: 150,
child: CircularProgressIndicator(
backgroundColor: Colors.grey.withOpacity(0.4),
color: Colors.greenAccent,
strokeCap: StrokeCap.round,
strokeWidth: 20,
value: value,
),
),
Text(
‘${(value * 100).toInt()}%’,
style: const TextStyle(fontSize: 35),
),
],
),
),
),
);
}
}

Click to Copy

في مقتطف التعليمات البرمجية أعلاه، بدلاً من تغليف Stackالأداة باستخدام SizedBoxأداة، نقوم الآن بتغليف شريط التقدم فقط باستخدام SizedBox. لقد قمنا بتعيين كل من widthو heightإلى 150لإعطاء شريط التقدم أبعادًا متماثلة.

داخل CircularProgressIndicatorالأداة، احتفظنا بنفس السمات colorsو value. ومع ذلك، أضفنا السمات strokeCapو strokeWidth. strokeCapتمنح السمة خط التقدم زوايا مستديرة، بينما strokeWidthتجعل السمة الخط أكثر سمكًا.

مثال عملي (عداد الخطوات)
لإظهار المزيد من إمكانيات أشرطة التقدم المضمنة في Flutter، سننشئ عدادًا للخطوات. سيحتوي كل من العدد المعروض في شريط التقدم وشريط التقدم نفسه على رسوم متحركة سترتفع تدريجيًا لإظهار الخطوات الحالية مقارنة بالهدف.

import
import ‘package:countup/countup.dart’;
import ‘package:flutter/material.dart’;

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State createState() => _MyAppState();
}

class _MyAppState extends State with SingleTickerProviderStateMixin {
final int goal = 7000;
final double steps = 5726;
late AnimationController _animationController;
late Animation _animation;

@override
void initState() {
super.initState();

_animationController = AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 1200),
);

_animation = Tween<double>(begin: 0, end: steps / goal)
    .animate(_animationController);

_animationController.forward();

}

@override
void dispose() {
_animationController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
‘Goal: $goal’,
style: const TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
Stack(
alignment: AlignmentDirectional.center,
children: [
SizedBox(
height: 150,
width: 150,
child: AnimatedBuilder(
animation: _animation,
builder: (BuildContext context, Widget? child) =>
CircularProgressIndicator(
backgroundColor: Colors.grey.withOpacity(0.4),
color: Colors.greenAccent,
strokeCap: StrokeCap.round,
strokeWidth: 20,
value: _animation.value,
),
),
),
Countup(
begin: 0,
duration: const Duration(milliseconds: 1200),
end: steps,
style: const TextStyle(fontSize: 30),
),
],
),
const SizedBox(height: 20),
const Text(‘Steps taken’, style: TextStyle(fontSize: 25)),
],
),
),
),
);
}
}

Click to Copy

في مقتطف التعليمات البرمجية أعلاه، نقوم بإنشاء MyAppعنصر واجهة مستخدم بحالة لأننا نريد استخدام الدالتين initStateand dispose. داخل initStateالدالة، نقوم بتعيين مثيل من AnimationControllerالفئة للمتغير _animationControllerونقوم بتعيين مثيل من Animationالفئة للمتغير _animation. في disposeالدالة، نتأكد من _animationControllerالتخلص من the.

داخل buildالدالة، نعيد Columnعنصر واجهة مستخدم مركزي يحتوي على خمس عناصر واجهة مستخدم. أولاً، لدينا Textعنصر واجهة مستخدم لإظهار هدف الخطوة الحالي. أسفل العنصر Text، نضيف SizedBoxعنصر واجهة مستخدم للحشو، متبوعًا بالعنصر Stack. داخل Stackالعنصر، نستخدم CircularProgressIndicatorمن المثال السابق، ولكن هذه المرة، يتم تغليفه داخل AnimatedBuilderعنصر واجهة مستخدم. AnimatedBuilderيتم استخدام لإنشاء رسوم متحركة تزيد تدريجيًا من الجزء الممتلئ من شريط التقدم.

بدلاً من مجرد عرض القيمة داخل شريط التقدم، نستخدم الآن Countupالأداة لعرض قيمة تحسب تصاعديًا من 0 إلى العدد الحالي للخطوات. لاستخدام Countupالأداة، تحتاج إلى إضافة حزمة Countup إلى مشروعك.

بإمكانك تثبيت حزمة Countup https://pub.dev/packages/countupعن طريق تنفيذ الأمر التالي في جذر مشروعك: flutter pub add countup.

بعد Stackالأداة، نضيف أداة أخرى SizedBoxوأداة أخرى Text. SizedBoxتضيف الأداة حشوًا، Textوتعرض الأداة نصًا أسفل شريط التقدم.

استخدام حزمة خارجية لإنشاء أشرطة التقدم في Flutter
بدلاً من استخدام عناصر واجهة المستخدم المضمنة في Flutter، يمكننا أيضًا استخدام حزمة Percent Indicator. توفر هذه الحزمة الخارجية أشرطة تقدم خطية ودائرية وتتضمن رسومًا متحركة مضمنة وميزات مفيدة أخرى.
تثبيت حزمة مؤشر النسبة المئوية
لتثبيت حزمة Percent Indicator https://pub.dev/packages/percent_indicator ، قم بتنفيذ الأمر التالي داخل جذر مشروعك:

import
flutter pub add percent_indicator

Click to Copy

بمجرد تنفيذ الأمر، تأكد من فحص pubspec.yaml ملفك بحثًا عن التبعيات المضافة. يجب أن ترى حزمة Percent Indicator مضمنة في قسم التبعيات، مثل هذا:

import dependencies:
percent_indicator: ^4.2.3

Click to Copy

أداة LinearPercentIndicator
يمكننا البدء بتنفيذ شريط تقدم خطي باستخدام LinearPercentIndicatorأداة الحزمة. راجع المثال أدناه.

XXXXX

في مقتطف التعليمات البرمجية أعلاه، نستخدم الآن LinearPercentIndicatorالأداة من حزمة Percent Indicator. وكما ترى، تحتوي الأداة على سمات أكثر مقارنة LinearProgressIndicatorبالأداة المضمنة في Flutter، ونحن لا نستخدم حتى نصفها.

كما في السابق، نقوم بتكوين الألوان، وتعيين حدود دائرية، وزيادة الارتفاع، وتعيين القيمة، وعرض القيمة كنص في منتصف شريط التقدم. ومع ذلك، باستخدام حزمة Percent Indicator، يمكن إجراء كل هذه التعديلات مباشرة داخل الأداة نفسها. لا نحتاج إلى استخدام أداة Stackلوضع النص في منتصف شريط التقدم أو لفه بعلامة SizedBoxلضبط العرض.

عندما نقوم بتشغيل هذا الكود، نحصل على نتيجة مشابهة للنتيجة المضمنة LinearProgressIndicator، ولكن دون الحاجة إلى تغليف شريط التقدم باستخدام عناصر واجهة المستخدم الرسومية Stackو SizedBox.

أداة مؤشر النسبة المئوية الدائرية
يمكن استخدام الأداة CircularPercentIndicatorالمساعدة من حزمة مؤشر النسبة المئوية بشكل مشابه لـ LinearPercentIndicator، حيث تكون معظم السمات متماثلة. ومع ذلك، فإن CircularPercentIndicatorلـ بعض السمات الفريدة التي تختلف عن تلك الموجودة في LinearPercentIndicator.

import
import ‘package:flutter/material.dart’;
import ‘package:percent_indicator/circular_percent_indicator.dart’;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

final double value = 0.5;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: CircularPercentIndicator(
backgroundColor: Colors.grey.withOpacity(0.4),
center: Text(
‘${(value * 100).toInt()}%’,
style: const TextStyle(fontSize: 40),
),
circularStrokeCap: CircularStrokeCap.round,
lineWidth: 30.0,
percent: value,
progressColor: Colors.greenAccent,
radius: 100,
),
),
),
);
}
}

Click to Copy

في مقتطف التعليمات البرمجية أعلاه، استبدلنا LinearPercentIndicatorبـ CircularPercentIndicator. نستخدم نفس السمات لتعيين الألوان والنص المركزي والقيمة. بالإضافة إلى ذلك، نستخدم السمة circularStrokeCapلإعطاء خط التقدم زوايا مستديرة، lineWidthوضبط عرض الخطوط، وتعيين radiusحجم شريط التقدم.

تمامًا كما هو الحال مع LinearPercentIndicatorالأداة، CircularPercentIndicatorتوفر نتيجة مماثلة للنتيجة المضمنة CircularProgressIndicator، ولكن دون الحاجة إلى تغليف شريط التقدم بالأدوات Stackو SizedBox.

مثال عملي (عداد الخطوات)
كما ذكرنا سابقًا، تأتي أدوات شريط التقدم من حزمة مؤشر النسبة المئوية مزودة برسوم متحركة مدمجة. تتيح لنا هذه الميزة تبسيط مثال عداد الخطوات الذي أنشأناه سابقًا بشكل كبير.

import import ‘package:countup/countup.dart’;
import ‘package:flutter/material.dart’;
import ‘package:percent_indicator/circular_percent_indicator.dart’;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

final int goal = 7000;
final double steps = 5726;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: CircularPercentIndicator(
animation: true,
animationDuration: 1200,
arcBackgroundColor: Colors.grey.withOpacity(0.4),
arcType: ArcType.FULL,
center: Countup(
begin: 0,
duration: const Duration(milliseconds: 1200),
end: steps,
style: const TextStyle(fontSize: 30),
),
circularStrokeCap: CircularStrokeCap.round,
footer: const Text(‘Steps taken’, style: TextStyle(fontSize: 25)),
header: Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Text(
‘Goal: $goal’,
style: const TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
),
),
),
lineWidth: 30,
percent: steps / 7000,
progressColor: Colors.greenAccent,
radius: 100,
),
),
),
);
}
}

Click to Copy

في مقتطف التعليمات البرمجية أعلاه، بدلاً من جعل MyAppالأداة ذات حالة كما في مثال عداد الخطوات السابقة، نبقيها بدون حالة. في الدالة build، نستخدم CircularPercentIndicatorالأداة للتعامل مع كل من شريط التقدم والأدوات Text.

يتم عرض النص باستخدام السمات footerو header. بالإضافة إلى ذلك، نقوم بتمكين الرسوم المتحركة عن طريق تعيين animationالسمة إلى trueوتحديد مدة الرسوم المتحركة على أنها 1200 مللي ثانية باستخدام animationDurationالسمة. أخيرًا، قمنا بتصميم شريط التقدم باستخدام السمات arcTypeو arcBackgroundColor. arcTypeتتيح لك السمة تخصيص شكل قوس شريط التقدم، وتعيين arcBackgroundColorلون قوس الخلفية.

خاتمة
في هذا المنشور، تعلمت طرقًا متعددة لإنشاء أشرطة التقدم في Flutter. بدأنا بأدوات شريط التقدم المضمنة في Flutter واستخدمنا لاحقًا حزمة Percent Indicator. ولتوضيح حالة استخدام عملية، أنشأنا عداد خطوات باستخدام كلا النهجين. من خلال إنشاء هذا المثال العملي، لاحظت أن استخدام حزمة Percent Indicator يمكن أن يبسط التنفيذ. ومع ذلك، باستخدام الأدوات المضمنة فقط، لا يزال بإمكانك تحقيق وظائف مماثلة، على الرغم من أنها تتطلب كتابة المزيد من التعليمات البرمجية.