استخدام الألوان السداسية العشرية Hexadecimal في فلاتر

عند تنسيق تطبيق Flutter، قد تستخدم Color.fromRGBO() ولكن الطريقة الأكثر استخدامًا في تطوير المستوى العالي هي الطريقة السداسية عشرية Hexadecimal حيث يتم إنشاء معظم ألوان التصميم بها. ومن الأسهل استخدام Color مع الطريقة السداسية عشرية على الفور في Flutter. في هذه المقالة، سنتعلم كيفية استخدام الطريقة السداسية عشرية Hexadecimal مع Color.

Color السداسية العشرية في Flutter

تنشئ  Color() لونًا من ال 32 bits الأدنى لعدد صحيح. تتم تفسير bits كما يلي:

• bits 24-31 هي قيمة الشفافية.
• bits 16-23 هي قيمة الأحمر.
• bits 8-15 هي قيمة الأخضر.
• bits 0-7 هي قيمة الأزرق.

يمكنك ببساطة إنشاء لون باستخدام Color(0xFF...) حيث يعني 0xFF الشفافية بنسبة 100٪ وتتبعه الطريقة السداسية عشرية Hexadecimal. على سبيل المثال، نفترض أن لدينا لون سداسي عشري أزرق على التصميم # 3399ff. لتحويله إلى Color في Flutter، نكتب ببساطة: Color(0xFF3399FF).

“اقرأ أيضاً: شرح استخدام ReorderableListView في فلاتر“

التعامل مع الشفافية في Color السداسية العشرية

عندما نريد إضافة بعض الشفافية، يمكننا استخدام .withOpacity() في نهاية Color. ومع ذلك، سنواجه خطأً لأن المتغيرات const يجب أن يتم تهيئتها بقيمة ثابتة. لحل هذه المشكلة، بدلاً من استخدام .withOpacity()، سنستخدم الطريقة السداسية العشرية Hexadecimal لإضافة الشفافية.

“اقرأ أيضاً: شرح استخدام ويدجت SimpleDialog في فلاتر“

Color السداسية العشرية والشفافية في Flutter

يمكن استخدام الشفافية في الألوان السداسية العشرية Hexadecimal بسهولة باستخدام مختلف القيم السداسية العشرية للشفافية. على سبيل المثال، يمكن استخدام AD لتمثيل الشفافية بنسبة 68٪. في Flutter، يمكن استخدام Color(0xAD...) لتمثيل لون يحتوي على شفافية بنسبة 68٪. هنا قائمة بالشفافية السداسية العشرية Hexadecimal:

• 100٪ – Color(0xFF...)
• 99٪ – Color(0xFC...)
• 98٪ – Color(0xFA...)
• 97٪ – Color(0xF7...)
• 96٪ – Color(0xF5...)
• 95٪ – Color(0xF2...)
• 94٪ – Color(0xF0...)
• 93٪ – Color(0xED...)
• 92٪ – Color(0xEB...)
• 91٪ – Color(0xE8...)
• 90٪ – Color(0xE6...)
• 89٪ – Color(0xE3...)
• 88٪ – Color(0xE0...)
• 87٪ – Color(0xDE...)
• 86٪ – Color(0xDB...)
• 85٪ – Color(0xD9...)
• 84٪ – Color(0xD6...)
• 83٪ – Color(0xD4...)
• 82٪ – Color(0xD1...)
• 81٪ – Color(0xCF...)
• 80٪ – Color(0xCC...)
• 79٪ – Color(0xC9...)
• 78٪ – Color(0xC7...)
• 77٪ – Color(0xC4...)
• 76٪ – Color(0xC2...)
• 75٪ – Color(0xBF...)
• 74٪ – Color(0xBD...)
• 73٪ – Color(0xBA...)
• 72٪ – Color(0xB8...)
• 71٪ – Color(0xB5...)
• 70٪ – Color(0xB3...)
• 69٪ – Color(0xB0...)
• 68٪ – Color(0xAD...)
• 67٪ – Color(0xAB...)
• 66٪ – Color(0xA8...)
• 65٪ – Color(0xA6...)
• 64٪ – Color(0xA3...)
• 63٪ – Color(0xA1...)
• 62٪ – Color(0x9E...)
• 61٪ – Color(0x9C...)
• 60٪ – Color(0x99...)
• 59٪ – Color(0x96...)
• 58٪ – Color(0x94...)
• 57٪ – Color(0x91...)
• 56٪ – Color(0x8F...)
• 55٪ – Color(0x8C...)
• 54٪ – Color(0x8A...)
• 53٪ – Color(0x87...)
• 52٪ – Color(0x85...)
• 51٪ – Color(0x82...)
• 50٪ – Color(0x80...)
• 49٪ – Color(0x7D...)
• 48٪ – Color(0x7A...)
• 47٪ – Color(0x78...)
• 46٪ – Color(0x75...)
• 45٪ – Color(0x73...)
• 44٪ – Color(0x70...)
• 43٪ – Color(0x6E...)
• 42٪ – Color(0x6B...)
• 41٪ – Color(0x69...)
• 40٪ – Color(0x66...)
• 39٪ – Color(0x63...)
• 38٪ – Color(0x61...)
• 37٪ – Color(0x5E...)
• 36٪ – Color(0x5C...)
• 35٪ – Color(0x59...)
• 34٪ – Color(0x57...)
• 33٪ – Color(0x54...)
• 32٪ – Color(0x52...)
• 31٪ – Color(0x4F...)
• 30٪ – Color(0x4D...)
• 29٪ – Color(0x4A...)
• 28٪ – Color(0x47...)
• 27٪ – Color(0x45...)
• 26٪ – Color(0x42...)
• 25٪ – Color(0x40...)
• 24٪ – Color(0x3D...)`
• 23٪ – Color(0x3B...)
• 22٪ – Color(0x38...)
• 21٪ – Color(0x36...)
• 20٪ – Color(0x33...)
• 19٪ – Color(0x30...)
• 18٪ – Color(0x2E...)
• 17٪ – Color(0x2B...)
• 16٪ – Color(0x29...)
• 15٪ – Color(0x26...)
• 14٪ – Color(0x24...)
• 13٪ – Color(0x21...)
• 12٪ – Color(0x1F...)
• 11٪ – Color(0x1C...)
• 10٪ – Color(0x1A...)
• 9٪ – Color(0x17...)
• 8٪ – Color(0x14...)
• 7٪ – Color(0x12...)
• 6٪ – Color(0x0F...)
• 5٪ – Color(0x0D...)
• 4٪ – Color(0x0A...)
• 3٪ – Color(0x08...)
• 2٪ – Color(0x05...)
• 1٪ – Color(0x03...)
• 0٪ – Color(0x00...)

“اقرأ أيضاً: شرح استخدام ThemeData في فلاتر“

مثال على استخدام الألوان السداسية العشرية في Flutter

فيما يلي مثال بسيط يوضح كيفية استخدام الألوان السداسية العشرية Hexadecimal في Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xFF3399FF),
        appBar: AppBar(
          title: const Text('Hexadecimal Colors'),
          backgroundColor: const Color(0xFF9932CC),
        ),
        body: const Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(
              color: Color(0xFFE6E6E6),
              fontSize: 32.0,
            ),
          ),
        ),
      ),
    );
  }
}

في هذا المثال، استخدمنا لونًا سداسيًا عشريًا أزرقًا في خلفية Scaffold ولونًا آخر سداسيًا عشريًا أرجوانيًا في AppBar. كما استخدمنا لونًا سداسيًا عشريًا آخر للنص في جسم التطبيق.

“اقرأ أيضاً: شرح استخدام ويدجت AlertDialog في فلاتر“

في هذه المقالة، تعلمنا كيفية استخدام الألوان السداسية العشرية Hexadecimal في تطبيقات Flutter. بدلاً من استخدام Color.fromRGBO()، يمكننا استخدام Color مع الطريقة السداسية العشرية مباشرةً في Flutter. يمكننا أيضًا استخدام الشفافية مع الألوان السداسية العشرية Hexadecimal عن طريق استخدام القيم السداسية العشرية للشفافية.