<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Codexlancers</title>
    <description>The latest articles on Forem by Codexlancers (@codexlancers).</description>
    <link>https://forem.com/codexlancers</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3857287%2Fa8e4508f-a0b0-447b-a06a-9bc5efa2ebf5.jpeg</url>
      <title>Forem: Codexlancers</title>
      <link>https://forem.com/codexlancers</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/codexlancers"/>
    <language>en</language>
    <item>
      <title>📸 Google Pay–Like Screenshot Sharing in FlutterFlow</title>
      <dc:creator>Codexlancers</dc:creator>
      <pubDate>Fri, 01 May 2026 04:30:00 +0000</pubDate>
      <link>https://forem.com/codexlancers/google-pay-like-screenshot-sharing-in-flutterflow-4mc5</link>
      <guid>https://forem.com/codexlancers/google-pay-like-screenshot-sharing-in-flutterflow-4mc5</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffcplh0f94eqd2zgse0sl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffcplh0f94eqd2zgse0sl.png" alt=" " width="720" height="540"&gt;&lt;/a&gt;&lt;br&gt;
💡 &lt;strong&gt;Introduction&lt;/strong&gt;&lt;br&gt;
Have you ever noticed how smoothly Google Pay lets users share a payment screenshot instantly?&lt;/p&gt;

&lt;p&gt;With just one tap, a clean, perfectly formatted image is generated and shared — no manual screenshots, no cropping, no hassle.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fel7quse1d1lpbq5lnr59.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fel7quse1d1lpbq5lnr59.png" alt=" " width="800" height="192"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I implemented a similar one-tap screenshot sharing feature in FlutterFlow using Custom Actions, and in this article, I’ll walk you through the approach, tools, and benefits.&lt;/p&gt;

&lt;p&gt;🚧 &lt;strong&gt;The Problem&lt;/strong&gt;&lt;br&gt;
Before implementing this feature, users typically relied on manual screenshots:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;❌ Taking screenshots manually&lt;/li&gt;
&lt;li&gt;❌ Cropping unwanted UI elements&lt;/li&gt;
&lt;li&gt;❌ Sharing inconsistent or messy images
This leads to a poor user experience, especially in apps where sharing data (like payments or receipts) is frequent.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;✅ &lt;strong&gt;The Solution&lt;/strong&gt;&lt;br&gt;
To solve this, we implemented:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1. ✅ One-tap screenshot capture&lt;/li&gt;
&lt;li&gt;2. ✅ Capture only the required UI section&lt;/li&gt;
&lt;li&gt;3. ✅ Direct sharing via native share sheet&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All of this was built &lt;strong&gt;inside FlutterFlow using Custom Actions&lt;/strong&gt;, combining low-code UI with custom Flutter logic.&lt;/p&gt;

&lt;p&gt;⚙️ &lt;strong&gt;How It Works&lt;/strong&gt;&lt;br&gt;
The implementation is simple yet powerful:&lt;/p&gt;

&lt;p&gt;Wrap the required UI inside a &lt;strong&gt;Screenshot widget&lt;/strong&gt;&lt;br&gt;
Use a &lt;strong&gt;ScreenshotController&lt;/strong&gt; to manage capture&lt;br&gt;
Trigger the capture on button tap&lt;br&gt;
📸 Only the wrapped UI is captured — ensuring clean and consistent output every time.&lt;/p&gt;

&lt;p&gt;📦 &lt;strong&gt;Packages Used&lt;/strong&gt;&lt;br&gt;
We used lightweight and production-ready packages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;screenshot → Capture widget as an image&lt;/li&gt;
&lt;li&gt;path_provider → Store the image temporarily&lt;/li&gt;
&lt;li&gt;share_plus → Share using native apps
This combination keeps the implementation efficient and scalable.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🎨 &lt;strong&gt;Smart UI Handling&lt;/strong&gt;&lt;br&gt;
To ensure professional output, we also handled:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🎨 Light &amp;amp; Dark mode compatibility&lt;/li&gt;
&lt;li&gt;🖼 Custom background images for better presentation&lt;/li&gt;
&lt;li&gt;📐 Consistent layout across devices
👉 Result: Clean, polished, and share-ready screenshots every time.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🎯 Use Cases&lt;br&gt;
This feature is extremely useful for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;💳 Payment confirmations&lt;/li&gt;
&lt;li&gt;🧾 Transaction receipts&lt;/li&gt;
&lt;li&gt;📦 Order summaries&lt;/li&gt;
&lt;li&gt;📊 Reports and dashboards
It is especially valuable in &lt;strong&gt;fintech and utility apps&lt;/strong&gt; where sharing information is frequent.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;⚡ &lt;strong&gt;Why FlutterFlow + Custom Actions&lt;/strong&gt;&lt;br&gt;
This implementation highlights the power of combining:&lt;/p&gt;

&lt;p&gt;⚡ Rapid UI development with FlutterFlow&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🧠 Full flexibility using custom Flutter code&lt;/li&gt;
&lt;li&gt;🔗 Easy integration with native capabilities&lt;/li&gt;
&lt;li&gt;👉 You truly get the best of both worlds: &lt;strong&gt;speed + control&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🚀 &lt;strong&gt;Final Outcome&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🚀 Improved overall user experience&lt;/li&gt;
&lt;li&gt;📉 Reduced friction in sharing workflows&lt;/li&gt;
&lt;li&gt;📤 Faster and cleaner content sharing&lt;/li&gt;
&lt;li&gt;🎯 Achieved a Google Pay–like seamless UX&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🔚 &lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
If you’re building apps in FlutterFlow and want to deliver advanced, polished user experiences — Custom Actions are the key.&lt;/p&gt;

&lt;p&gt;They allow you to go beyond limitations and implement features that feel truly native and professional.&lt;/p&gt;

&lt;p&gt;✨ &lt;strong&gt;Final Thoughts&lt;/strong&gt;&lt;br&gt;
Low-code doesn’t mean low-power.&lt;/p&gt;

&lt;p&gt;With the right approach, you can &lt;strong&gt;build high-quality, production-ready&lt;/strong&gt; features that rival top-tier apps like Google Pay.&lt;/p&gt;

&lt;h1&gt;
  
  
  Flutter #FlutterFlow #Mobile Development #UX Design
&lt;/h1&gt;

</description>
      <category>flutter</category>
      <category>mobile</category>
      <category>nocode</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>🚀 Identity Verification in FlutterFlow using uqudo SDK</title>
      <dc:creator>Codexlancers</dc:creator>
      <pubDate>Thu, 30 Apr 2026 04:30:00 +0000</pubDate>
      <link>https://forem.com/codexlancers/identity-verification-in-flutterflow-using-uqudo-sdk-24fo</link>
      <guid>https://forem.com/codexlancers/identity-verification-in-flutterflow-using-uqudo-sdk-24fo</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwbiqbr8i5j6kbfawnziv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwbiqbr8i5j6kbfawnziv.png" alt=" " width="720" height="480"&gt;&lt;/a&gt;&lt;br&gt;
🔍 &lt;strong&gt;Overview&lt;/strong&gt;&lt;br&gt;
In modern applications, secure and seamless user onboarding is critical — especially when identity verification (KYC) is involved.&lt;/p&gt;

&lt;p&gt;In this article, I’ll walk through how we integrated the &lt;strong&gt;uqudo SDK Flutter plugin&lt;/strong&gt; into a &lt;strong&gt;FlutterFlow application&lt;/strong&gt; using Custom Actions to enable a robust identity verification flow.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fugkid2zjdor8aqhcnxru.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fugkid2zjdor8aqhcnxru.png" alt=" " width="800" height="192"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This solution leverages uqudo’s official Android and iOS SDKs to deliver a secure, scalable, and efficient KYC experience — particularly optimized for users across the &lt;strong&gt;Middle East &amp;amp; Africa&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;🎯 &lt;strong&gt;Objective&lt;/strong&gt;&lt;br&gt;
The goal was to implement a reliable identity verification system in FlutterFlow that:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Accelerates user onboarding&lt;/li&gt;
&lt;li&gt;Reduces manual verification efforts&lt;/li&gt;
&lt;li&gt;Seamlessly integrates into a no-code / low-code workflow&lt;/li&gt;
&lt;li&gt;Maintains high security and accuracy&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🛠 &lt;strong&gt;Technology Stack&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;FlutterFlow&lt;/li&gt;
&lt;li&gt;Custom Actions (Flutter code)&lt;/li&gt;
&lt;li&gt;uqudo SDK Flutter Plugin&lt;/li&gt;
&lt;li&gt;Android &amp;amp; iOS Native SDKs&lt;/li&gt;
&lt;li&gt;Device Camera (Front Camera)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🧩 &lt;strong&gt;Architecture &amp;amp; Implementation Approach&lt;/strong&gt;&lt;br&gt;
To integrate uqudo into FlutterFlow, we followed a hybrid approach:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The uqudo Flutter plugin was added to the FlutterFlow project&lt;/li&gt;
&lt;li&gt;Custom Actions were used to bridge FlutterFlow UI with SDK functionality&lt;/li&gt;
&lt;li&gt;Platform-specific logic was handled in:&lt;/li&gt;
&lt;li&gt;android/ (native implementation)&lt;/li&gt;
&lt;li&gt;&lt;p&gt;ios/ (native implementation)&lt;br&gt;
This approach allowed us to:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use advanced native SDK features&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Keep FlutterFlow UI clean and manageable&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Maintain flexibility for future enhancements&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🔄 &lt;strong&gt;Verification Flow&lt;/strong&gt;&lt;br&gt;
1️⃣ &lt;strong&gt;Identity Document Scanning&lt;/strong&gt;&lt;br&gt;
We implemented document scanning for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Aadhaar Card&lt;/li&gt;
&lt;li&gt;PAN Card
Using uqudo’s document verification capabilities, the app extracts and validates identity data efficiently.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;2️⃣ &lt;strong&gt;Face Capture &amp;amp; Biometric Verification&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The device’s front camera is used to capture the user’s face&lt;/li&gt;
&lt;li&gt;Face matching is performed against the scanned document&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This ensures:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Authenticity&lt;/li&gt;
&lt;li&gt;Fraud prevention&lt;/li&gt;
&lt;li&gt;Real-time verification&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;3️⃣ &lt;strong&gt;Verification Result Handling&lt;/strong&gt;&lt;br&gt;
Clear outcomes are displayed directly in the UI:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;✅ Face matched successfully&lt;/li&gt;
&lt;li&gt;❌ Face mismatch detected
This improves transparency and user trust during onboarding.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;4️⃣ &lt;strong&gt;Error Handling &amp;amp; User Feedback&lt;/strong&gt;&lt;br&gt;
Robust error handling was implemented using Custom Actions to manage:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Invalid document scans&lt;/li&gt;
&lt;li&gt;Face mismatch scenarios&lt;/li&gt;
&lt;li&gt;Camera permission issues&lt;/li&gt;
&lt;li&gt;SDK-related errors
Providing clear feedback significantly improved the user experience.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;✅ &lt;strong&gt;Outcome &amp;amp; Impact&lt;/strong&gt;&lt;br&gt;
Successfully implemented a production-ready KYC flow within FlutterFlow&lt;br&gt;
Reduced onboarding friction with automation&lt;br&gt;
Enabled seamless integration of native SDKs in a low-code environment&lt;br&gt;
Improved user trust with real-time verification feedback&lt;/p&gt;

&lt;p&gt;🚀 &lt;strong&gt;Key Learnings&lt;/strong&gt;&lt;br&gt;
FlutterFlow Custom Actions are powerful for integrating complex SDKs&lt;br&gt;
Combining low-code UI with custom Flutter logic offers both speed and flexibility&lt;br&gt;
Native SDK integration is achievable without compromising maintainability&lt;br&gt;
Proper error handling is critical for user trust and retention&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
Integrating the &lt;strong&gt;uqudo SDK in FlutterFlow&lt;/strong&gt; using Custom Actions proved to be an effective approach for building a secure and scalable identity verification system.&lt;/p&gt;

&lt;p&gt;This method bridges the gap between &lt;strong&gt;low-code development&lt;/strong&gt; and &lt;strong&gt;advanced native capabilities&lt;/strong&gt;, enabling faster delivery without sacrificing control or performance.&lt;/p&gt;

&lt;p&gt;✨ &lt;strong&gt;Final Thoughts&lt;/strong&gt;&lt;br&gt;
If you’re building a FlutterFlow app that requires &lt;strong&gt;KYC&lt;/strong&gt;, &lt;strong&gt;identity verification, or onboarding automation,&lt;/strong&gt; this approach can significantly reduce development complexity while ensuring a high-quality user experience.&lt;/p&gt;

&lt;h1&gt;
  
  
  FlutterFlow #Flutter #MobileDevelopment #KYC #IdentityVerification
&lt;/h1&gt;

</description>
      <category>flutter</category>
      <category>nocode</category>
      <category>security</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>🚀 Which Flutter State Management Should You Use? (Complete Developer Guide)</title>
      <dc:creator>Codexlancers</dc:creator>
      <pubDate>Wed, 29 Apr 2026 12:30:00 +0000</pubDate>
      <link>https://forem.com/codexlancers/which-flutter-state-management-should-you-use-complete-developer-guide-5442</link>
      <guid>https://forem.com/codexlancers/which-flutter-state-management-should-you-use-complete-developer-guide-5442</guid>
      <description>&lt;p&gt;Flutter makes building beautiful apps easy — but as your app grows, managing data across screens becomes challenging.&lt;/p&gt;

&lt;p&gt;You may have faced issues like:&lt;/p&gt;

&lt;p&gt;UI not updating properly&lt;br&gt;
Data not syncing between screens&lt;br&gt;
Too many unnecessary rebuilds&lt;br&gt;
👉 This is exactly where &lt;strong&gt;state management&lt;/strong&gt; becomes essential.&lt;/p&gt;

&lt;p&gt;In this guide, we’ll break down everything — from basics to advanced approaches — so you can confidently choose the right solution.&lt;/p&gt;

&lt;p&gt;🧠** What is State Management?**&lt;br&gt;
In simple terms:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;👉 State = Any data that changes in your app&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Examples:&lt;/p&gt;

&lt;p&gt;Counter value&lt;br&gt;
API response&lt;br&gt;
User login status&lt;br&gt;
Theme (dark/light)&lt;br&gt;
👉 &lt;strong&gt;State Management = How you manage and update that data efficiently across your app&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Without proper state management:&lt;/p&gt;

&lt;p&gt;Your UI becomes unpredictable&lt;br&gt;
Code becomes hard to maintain&lt;br&gt;
Scaling becomes difficult&lt;br&gt;
&lt;strong&gt;🔰 1. setState (The Simplest Way)&lt;/strong&gt;&lt;br&gt;
🧾 &lt;strong&gt;What it is&lt;/strong&gt;&lt;br&gt;
Built-in Flutter method to update UI when state changes.&lt;/p&gt;

&lt;p&gt;📦 Example :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;CounterPage&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;StatefulWidget&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;CounterPage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="nd"&gt;@override&lt;/span&gt;
  &lt;span class="n"&gt;State&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;CounterPage&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;createState&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;_CounterPageState&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;_CounterPageState&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;State&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;CounterPage&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;_count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="n"&gt;_increment&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;         &lt;span class="c1"&gt;// triggers a rebuild&lt;/span&gt;
      &lt;span class="n"&gt;_count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nd"&gt;@override&lt;/span&gt;
  &lt;span class="n"&gt;Widget&lt;/span&gt; &lt;span class="n"&gt;build&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BuildContext&lt;/span&gt; &lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;Scaffold&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="nl"&gt;body:&lt;/span&gt; &lt;span class="n"&gt;Center&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;child:&lt;/span&gt; &lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'Count: &lt;/span&gt;&lt;span class="si"&gt;$_count&lt;/span&gt;&lt;span class="s"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)),&lt;/span&gt;
      &lt;span class="nl"&gt;floatingActionButton:&lt;/span&gt; &lt;span class="n"&gt;FloatingActionButton&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="nl"&gt;onPressed:&lt;/span&gt; &lt;span class="n"&gt;_increment&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="nl"&gt;child:&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;Icon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Icons&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;add&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✅ When to use :&lt;br&gt;
Purely local UI interactions with no cross-widget communication — toggle buttons, form field validation, simple animations, local loading spinners.&lt;/p&gt;

&lt;p&gt;🌱 &lt;strong&gt;2. Provider&lt;/strong&gt;&lt;br&gt;
🧾 &lt;strong&gt;What it is&lt;/strong&gt;&lt;br&gt;
A wrapper around InheritedWidget for structured state management.&lt;/p&gt;

&lt;p&gt;📦 Example :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="c1"&gt;// 1. Define a ChangeNotifier&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;CartProvider&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;ChangeNotifier&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;List&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;String&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;_items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
  &lt;span class="kt"&gt;List&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;String&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="kd"&gt;get&lt;/span&gt; &lt;span class="n"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;_items&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="n"&gt;addItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;_items&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;item&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;notifyListeners&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// triggers rebuild in listeners&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// 2. Wrap your tree with ChangeNotifierProvider&lt;/span&gt;
&lt;span class="n"&gt;ChangeNotifierProvider&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nl"&gt;create:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;_&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;CartProvider&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
  &lt;span class="nl"&gt;child:&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;MyApp&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;// 3. Read or watch in any descendant widget&lt;/span&gt;
&lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;cart&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;watch&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;CartProvider&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;();&lt;/span&gt;
&lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'&lt;/span&gt;&lt;span class="si"&gt;${cart.items.length}&lt;/span&gt;&lt;span class="s"&gt; items in cart'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✅ &lt;strong&gt;When to use :&lt;/strong&gt;&lt;br&gt;
Small-to-medium apps with straightforward state that doesn’t need complex async logic. Great for your first real Flutter project beyond tutorials.&lt;/p&gt;

&lt;p&gt;⚡ &lt;strong&gt;3. Riverpod (Modern Approach)&lt;/strong&gt;&lt;br&gt;
🧾 &lt;strong&gt;What it is&lt;/strong&gt;&lt;br&gt;
A more powerful and safer version of Provider.&lt;/p&gt;

&lt;p&gt;📦 Example :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="c1"&gt;// pubspec.yaml&lt;/span&gt;
&lt;span class="c1"&gt;// riverpod_annotation: ^4.0.2&lt;/span&gt;
&lt;span class="c1"&gt;// riverpod_generator: ^4.0.3&lt;/span&gt;

&lt;span class="kn"&gt;part&lt;/span&gt; &lt;span class="s"&gt;'auth_notifier.g.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Class-based notifier with codegen&lt;/span&gt;
&lt;span class="nd"&gt;@riverpod&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;AuthNotifier&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;_$AuthNotifier&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nd"&gt;@override&lt;/span&gt;
  &lt;span class="n"&gt;AuthState&lt;/span&gt; &lt;span class="n"&gt;build&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;initial&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="n"&gt;Future&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;signIn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;password&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="kd"&gt;async&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;loading&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;try&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;AuthService&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;signIn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;password&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="n"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;authenticated&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;user&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;catch&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="n"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// In a ConsumerWidget — no BuildContext magic needed&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;AuthScreen&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;ConsumerWidget&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;AuthScreen&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;key&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="nd"&gt;@override&lt;/span&gt;
  &lt;span class="n"&gt;Widget&lt;/span&gt; &lt;span class="n"&gt;build&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BuildContext&lt;/span&gt; &lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;WidgetRef&lt;/span&gt; &lt;span class="n"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;authState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;ref&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;watch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;authNotifierProvider&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;authState&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;when&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="nl"&gt;initial:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;LoginScreen&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
      &lt;span class="nl"&gt;loading:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;CircularProgressIndicator&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
      &lt;span class="nl"&gt;authenticated:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;HomeScreen&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;user:&lt;/span&gt; &lt;span class="n"&gt;user&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="nl"&gt;error:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;ErrorView&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;message:&lt;/span&gt; &lt;span class="n"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✅ &lt;strong&gt;When to use :&lt;/strong&gt;&lt;br&gt;
Medium-to-large apps where you want clean architecture, excellent async support, and testability without Bloc’s ceremony. Excellent choice for solo developers and small teams building production apps.&lt;/p&gt;

&lt;p&gt;🧱** 4. Bloc / Cubit (Enterprise-Level)**&lt;br&gt;
🧾 &lt;strong&gt;What it is&lt;/strong&gt;&lt;br&gt;
A structured pattern using streams.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Bloc&lt;/strong&gt; → Event-driven&lt;br&gt;
&lt;strong&gt;Cubit&lt;/strong&gt; → Simpler version&lt;br&gt;
📦 Example :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="c1"&gt;// State class&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;AuthState&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;bool&lt;/span&gt; &lt;span class="n"&gt;isAuthenticated&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt;&lt;span class="o"&gt;?&lt;/span&gt; &lt;span class="n"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="kd"&gt;required&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;isAuthenticated&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Cubit — logic lives here, NOT in the widget&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;AuthCubit&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;Cubit&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;AuthCubit&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;isAuthenticated:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

  &lt;span class="n"&gt;Future&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;signIn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;password&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="kd"&gt;async&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;AuthService&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;signIn&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;email&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;password&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;isAuthenticated:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nl"&gt;userId:&lt;/span&gt; &lt;span class="n"&gt;user&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="n"&gt;signOut&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nl"&gt;isAuthenticated:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Widget — just listens, zero logic&lt;/span&gt;
&lt;span class="n"&gt;BlocBuilder&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;AuthCubit&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;AuthState&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;(&lt;/span&gt;
  &lt;span class="nl"&gt;builder:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;state&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;state&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;isAuthenticated&lt;/span&gt;
        &lt;span class="o"&gt;?&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;HomeScreen&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
        &lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;LoginScreen&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✅ &lt;strong&gt;When to use :&lt;/strong&gt;&lt;br&gt;
Large-scale apps with complex business logic, multiple async operations, strict testability requirements, or teams that need predictable, traceable state transitions. Common in enterprise and fintech Flutter apps.&lt;/p&gt;

&lt;p&gt;⚡ &lt;strong&gt;5. GetX (Fast &amp;amp; Lightweight)&lt;/strong&gt;&lt;br&gt;
🧾 &lt;strong&gt;What it is&lt;/strong&gt;&lt;br&gt;
All-in-one solution (state + routing + dependency injection).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnilf5u0yjikl8tstu921.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnilf5u0yjikl8tstu921.png" alt=" "&gt;&lt;/a&gt;&lt;br&gt;
📦 Example :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Controller — reactive variables with .obs&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ProfileController&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;GetxController&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;RxString&lt;/span&gt; &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;''&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;obs&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;RxBool&lt;/span&gt; &lt;span class="n"&gt;isLoading&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;obs&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="n"&gt;Future&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kt"&gt;void&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;loadProfile&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="kd"&gt;async&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;isLoading&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;ApiService&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;getProfile&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="n"&gt;isLoading&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Widget — Obx auto-rebuilds when .obs changes&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ProfilePage&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;GetView&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="n"&gt;ProfileController&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nd"&gt;@override&lt;/span&gt;
  &lt;span class="n"&gt;Widget&lt;/span&gt; &lt;span class="n"&gt;build&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BuildContext&lt;/span&gt; &lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;Obx&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;controller&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;isLoading&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;CircularProgressIndicator&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;controller&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Navigation — no BuildContext needed&lt;/span&gt;
&lt;span class="n"&gt;Get&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;to&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="n"&gt;ProfilePage&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="n"&gt;Get&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;back&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✅ &lt;strong&gt;When to use :&lt;/strong&gt;&lt;br&gt;
Prototypes, hackathons, small personal projects, or when you need to move very fast and want everything under one roof. Use with caution in large team environments.&lt;/p&gt;

&lt;p&gt;🧩 &lt;strong&gt;Real-World Use Cases&lt;/strong&gt;&lt;br&gt;
🟢 &lt;strong&gt;Small Apps&lt;/strong&gt;&lt;br&gt;
Use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;setState&lt;/li&gt;
&lt;li&gt;Provider
👉 Example: Forms, basic apps&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🟡 &lt;strong&gt;Medium Apps&lt;/strong&gt;&lt;br&gt;
Use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Provider&lt;/li&gt;
&lt;li&gt;GetX
👉 Example: Dashboard, e-commerce&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🔵 &lt;strong&gt;Large Apps&lt;/strong&gt;&lt;br&gt;
Use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Riverpod&lt;/li&gt;
&lt;li&gt;Bloc
👉 Example: Production apps with APIs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🔴 &lt;strong&gt;Team / Enterprise&lt;/strong&gt;&lt;br&gt;
Use:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bloc&lt;/li&gt;
&lt;li&gt;Riverpod
👉 Better maintainability and structure&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fet0rg58n07unt8ai9rcu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fet0rg58n07unt8ai9rcu.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🏁** Final Recommendation**&lt;br&gt;
👶 &lt;strong&gt;Beginner&lt;/strong&gt;&lt;br&gt;
Start with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;setState → then Provider&lt;br&gt;
🧑‍💻 &lt;strong&gt;Intermediate&lt;/strong&gt;&lt;br&gt;
Use:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Riverpod (recommended)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;or GetX&lt;br&gt;
🧠 &lt;strong&gt;Advanced / Production&lt;/strong&gt;&lt;br&gt;
Use:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Riverpod (modern + scalable)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Bloc (enterprise structure)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;💡 &lt;strong&gt;Final Thoughts&lt;/strong&gt;&lt;br&gt;
There is no single “best” state management solution.&lt;/p&gt;

&lt;p&gt;👉 The right choice depends on:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;App complexity&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Team size&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Development speed&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Maintainability needs&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>beginners</category>
      <category>flutter</category>
      <category>mobile</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Flutter Plugin vs Flutter Package: What’s the Difference?</title>
      <dc:creator>Codexlancers</dc:creator>
      <pubDate>Wed, 29 Apr 2026 04:30:00 +0000</pubDate>
      <link>https://forem.com/codexlancers/flutter-plugin-vs-flutter-package-whats-the-difference-5ehe</link>
      <guid>https://forem.com/codexlancers/flutter-plugin-vs-flutter-package-whats-the-difference-5ehe</guid>
      <description>&lt;p&gt;As Flutter developers, we often use the terms plugin and package interchangeably. However, they are not the same thing. Understanding the distinction between the two is important when developing or choosing the right tool for your app.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8s7l8ls5a2x851rsemtu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8s7l8ls5a2x851rsemtu.png" alt=" " width="720" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;📦 What is a Flutter Package?&lt;/strong&gt;&lt;br&gt;
A Flutter package is a collection of Dart code and assets (like images, fonts, etc.) that adds functionality to a Flutter app. Packages help developers avoid reinventing the wheel by providing reusable solutions for common problems.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🔑 Key Characteristics:&lt;/strong&gt;&lt;br&gt;
Written entirely in Dart.&lt;br&gt;
Does not include any native platform-specific code (e.g., no Java/Kotlin for Android or Objective-C/Swift for iOS).&lt;br&gt;
Can contain widgets, utilities, models, state management solutions, and more.&lt;br&gt;
Works purely within the Flutter framework.&lt;br&gt;
&lt;strong&gt;🌟 Examples:&lt;/strong&gt;&lt;br&gt;
🧩 provider (state management)&lt;br&gt;
🌐 http (network requests)&lt;br&gt;
💾 shared_preferences (basic key-value storage without heavy native dependencies)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🔌 What is a Flutter Plugin?&lt;/strong&gt;&lt;br&gt;
A Flutter plugin is a special type of package that provides an interface between Dart code and platform-specific code (Android, iOS, Web, Desktop). Plugins are needed when Flutter apps need to access platform services, sensors, or APIs that are outside the Flutter framework.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🔑 Key Characteristics:&lt;/strong&gt;&lt;br&gt;
Includes Dart code and platform-specific native code.&lt;br&gt;
Uses platform channels to communicate between Flutter and native layers.&lt;br&gt;
Needed when you require access to hardware features or native platform APIs (e.g., camera, GPS, file system).&lt;br&gt;
&lt;strong&gt;🌟 Examples:&lt;/strong&gt;&lt;br&gt;
📸 camera (access device camera)&lt;br&gt;
🗺️ google_maps_flutter (display Google Maps)&lt;br&gt;
📱 device_info_plus (fetch device hardware info)&lt;br&gt;
&lt;strong&gt;🔍 How to Identify if It’s a Package or Plugin?&lt;/strong&gt;&lt;br&gt;
When browsing pub.dev:&lt;/p&gt;

&lt;p&gt;If you see “Plugin” tag: it’s a Flutter Plugin (native code included).&lt;br&gt;
If you only see “Package” tag: it’s a Dart-only Flutter Package.&lt;br&gt;
You can also look at the repository:&lt;/p&gt;

&lt;p&gt;A plugin will usually have folders like android/, ios/, web/, macos/, windows/, or linux/.&lt;br&gt;
A Dart-only package typically has only lib/, test/, and maybe assets/.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffwzanzr4k9c4vd1320s5.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffwzanzr4k9c4vd1320s5.gif" alt=" " width="360" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Thank you for reading!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh99wy6sx68lj73e3ajgm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh99wy6sx68lj73e3ajgm.png" alt=" " width="800" height="192"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I’d love to hear your thoughts — feel free to share your experiences or questions about Flutter plugins and packages in the comments.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>flutter</category>
      <category>mobile</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Islamic Hijri Calendar Package</title>
      <dc:creator>Codexlancers</dc:creator>
      <pubDate>Tue, 28 Apr 2026 04:30:00 +0000</pubDate>
      <link>https://forem.com/codexlancers/islamic-hijri-calendar-package-aj2</link>
      <guid>https://forem.com/codexlancers/islamic-hijri-calendar-package-aj2</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhq18br69z2xhge8n0uau.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhq18br69z2xhge8n0uau.png" alt=" " width="720" height="240"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Introduction&lt;/strong&gt;&lt;br&gt;
Introducing our Islamic Hijri Calendar Package for displaying most fully featured dates in Arabic and English numerals. In this solution, customers can easily notice the month’s name in Hijri, with a year and move months without any hassle. Today, I am going to introduce the Islamic Hijri&lt;/p&gt;

&lt;p&gt;Calendar Package, which is a versatile, easy-to-use Flutter package that has the ability to show both the Islamic Hijri and the Gregorian Calendars in your Flutter apps.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Dual Calendar View:&lt;/strong&gt; Toggle between the Hijri and Gregorian calendars effortlessly.&lt;br&gt;
&lt;strong&gt;Customizable Appearance:&lt;/strong&gt; Adjust the border colors, text colors, background colors, and font styles to match your app’s theme.&lt;br&gt;
&lt;strong&gt;Google Fonts Support:&lt;/strong&gt; Use Google Fonts to ensure your calendar looks modern and clean.&lt;br&gt;
&lt;strong&gt;Date Selection Callbacks:&lt;/strong&gt; Get the selected date in both Gregorian and Hijri formats.&lt;br&gt;
&lt;strong&gt;Date Adjustment:&lt;/strong&gt; Adjust the Hijri calendar by a certain number of days as needed.&lt;br&gt;
&lt;strong&gt;Disable Out-of-Month Dates:&lt;/strong&gt; Show or hide dates that are not part of the current month.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Installation&lt;/strong&gt;&lt;br&gt;
First, add the package to your &lt;code&gt;pubspec.yaml&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;dependencies&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;islamic_hijri_calendar&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;^1.0.0&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Usage&lt;br&gt;
Here’s how you can integrate the Islamic Hijri Calendar Package into your Flutter app:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:flutter/material.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:islamic_hijri_calendar/islamic_hijri_calendar.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;runApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;MyApp&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;MyApp&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;StatelessWidget&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nd"&gt;@override&lt;/span&gt;
  &lt;span class="n"&gt;Widget&lt;/span&gt; &lt;span class="n"&gt;build&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;BuildContext&lt;/span&gt; &lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;MaterialApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="nl"&gt;theme:&lt;/span&gt; &lt;span class="n"&gt;ThemeData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="nl"&gt;colorScheme:&lt;/span&gt; &lt;span class="n"&gt;ColorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;fromSwatch&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;copyWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="nl"&gt;primary:&lt;/span&gt; &lt;span class="n"&gt;Colors&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="nl"&gt;onBackground:&lt;/span&gt; &lt;span class="n"&gt;Colors&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;black&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="nl"&gt;background:&lt;/span&gt; &lt;span class="n"&gt;Colors&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;white&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="nl"&gt;home:&lt;/span&gt; &lt;span class="n"&gt;Scaffold&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="nl"&gt;appBar:&lt;/span&gt; &lt;span class="n"&gt;AppBar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="nl"&gt;title:&lt;/span&gt; &lt;span class="n"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'Islamic Hijri Calendar'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="nl"&gt;body:&lt;/span&gt; &lt;span class="n"&gt;Center&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="nl"&gt;child:&lt;/span&gt; &lt;span class="n"&gt;IslamicHijriCalendar&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="nl"&gt;isHijriView:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nl"&gt;highlightBorder:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;primary&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nl"&gt;defaultBorder:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;onBackground&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;withOpacity&lt;/span&gt;&lt;span class="p"&gt;(.&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
            &lt;span class="nl"&gt;highlightTextColor:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nl"&gt;defaultTextColor:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;onBackground&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nl"&gt;defaultBackColor:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nl"&gt;adjustmentValue:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nl"&gt;isGoogleFont:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nl"&gt;fontFamilyName:&lt;/span&gt; &lt;span class="s"&gt;"Lato"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
            &lt;span class="nl"&gt;getSelectedEnglishDate:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;selectedDate&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
              &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"English Date : &lt;/span&gt;&lt;span class="si"&gt;$selectedDate&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="p"&gt;},&lt;/span&gt;
            &lt;span class="nl"&gt;getSelectedHijriDate:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;selectedDate&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
              &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Hijri Date : &lt;/span&gt;&lt;span class="si"&gt;$selectedDate&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
            &lt;span class="p"&gt;},&lt;/span&gt;
            &lt;span class="nl"&gt;isDisablePreviousNextMonthDates:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="p"&gt;),&lt;/span&gt;
        &lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Customization Options&lt;br&gt;
Dual Calendar View:&lt;/strong&gt;&lt;br&gt;
The &lt;code&gt;isHijriView&lt;/code&gt; property allows users to toggle between viewing the Hijri calendar and the Gregorian calendar.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="nl"&gt;isHijriView:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// Show Hijri calendar&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Appearance Customization:&lt;/strong&gt;&lt;br&gt;
Customize the appearance of the calendar using the following properties:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmpmvgmabsjbgi04vjohv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmpmvgmabsjbgi04vjohv.png" alt=" " width="800" height="192"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;highlightBorder:&lt;/strong&gt; Sets the border color for the selected date.&lt;br&gt;
&lt;strong&gt;defaultBorder:&lt;/strong&gt; Sets the border color for other dates.&lt;br&gt;
&lt;strong&gt;highlightTextColor:&lt;/strong&gt; Sets the text color for today’s date.&lt;br&gt;
&lt;strong&gt;defaultTextColor:&lt;/strong&gt; Sets the text color for other dates.&lt;br&gt;
&lt;strong&gt;defaultBackColor:&lt;/strong&gt; Sets the background color for dates.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="nl"&gt;highlightBorder:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;primary&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="nl"&gt;defaultBorder:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;onBackground&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;withOpacity&lt;/span&gt;&lt;span class="p"&gt;(.&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="nl"&gt;highlightTextColor:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="nl"&gt;defaultTextColor:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;onBackground&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="nl"&gt;defaultBackColor:&lt;/span&gt; &lt;span class="n"&gt;Theme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;of&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;background&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Google Fonts:&lt;/strong&gt;&lt;br&gt;
Use Google Fonts to enhance the appearance of your calendar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="nl"&gt;isGoogleFont:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="nl"&gt;fontFamilyName:&lt;/span&gt; &lt;span class="s"&gt;"Lato"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Date Selection Callbacks:&lt;/strong&gt;&lt;br&gt;
Capture the selected date in both Gregorian and Hijri formats using these callbacks:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="nl"&gt;getSelectedEnglishDate:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;selectedDate&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"English Date : &lt;/span&gt;&lt;span class="si"&gt;$selectedDate&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="nl"&gt;getSelectedHijriDate:&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;selectedDate&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Hijri Date : &lt;/span&gt;&lt;span class="si"&gt;$selectedDate&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Date Adjustment:&lt;/strong&gt;&lt;br&gt;
Adjust the Hijri calendar dates by a specific value:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="nl"&gt;adjustmentValue:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// No adjustmen&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Disable Previous/Next Month Dates:&lt;/strong&gt;&lt;br&gt;
Decide whether to show or hide dates from previous or next months:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="nl"&gt;isDisablePreviousNextMonthDates:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="c1"&gt;// Disable dates not in the current month&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;br&gt;
There is a calendar widget for Muslim users available for Flutter apps. This widget shows dates according to the Islamic Hijri Calendar with the familiar Gregorian calendar. This widget is pretty easy to set up in your app and has some appearance customization. It will help any Flutter app that is specifically targeted to engage Muslim users. For more information, you can check it out at Pub.dev&lt;/p&gt;

&lt;p&gt;more information, check out the&lt;/p&gt;

&lt;p&gt;&lt;a href="https://pub.dev/packages/islamic_hijri_calendar" rel="noopener noreferrer"&gt;https://pub.dev/packages/islamic_hijri_calendar&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnlj1e1bffm440353tvlv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnlj1e1bffm440353tvlv.png" alt=" " width="640" height="640"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dxu0w8c5mrj6npwmxqo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dxu0w8c5mrj6npwmxqo.png" alt=" " width="640" height="640"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu4s7hv6h3vz09tndbjxh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu4s7hv6h3vz09tndbjxh.png" alt=" " width="640" height="640"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frqryz1g5r5jcq2r3r5hy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frqryz1g5r5jcq2r3r5hy.png" alt=" " width="300" height="168"&gt;&lt;/a&gt;&lt;br&gt;
Thanks for reading! If you found this post useful, please share it with others in your network and follow me for more Flutter insights and tutorials. Keep coding and stay awesome!&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>mobile</category>
      <category>showdev</category>
      <category>ui</category>
    </item>
    <item>
      <title>Rating and Feedback Collector</title>
      <dc:creator>Codexlancers</dc:creator>
      <pubDate>Mon, 27 Apr 2026 12:30:00 +0000</pubDate>
      <link>https://forem.com/codexlancers/rating-and-feedback-collector-46i1</link>
      <guid>https://forem.com/codexlancers/rating-and-feedback-collector-46i1</guid>
      <description>&lt;p&gt;``&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frv9v763dl1zkc42clhwc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frv9v763dl1zkc42clhwc.png" alt=" " width="720" height="240"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Introduction&lt;/strong&gt;&lt;br&gt;
User feedback collection cannot be overemphasized, therefore, if an app is to grow in both quality and satisfaction, The package offers a developer versatile solutions into making bars rated with icons, emojis, and even custom images. Further, this allows dynamic feedback alerts, hence allowing the user to include as much detail in their feedback as possible and rate your app. This will walk you through the setup and usage of this package, hence you can make full use of its features.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Custom Icon Rating:&lt;/strong&gt; Use any icon to represent rating units.&lt;br&gt;
&lt;strong&gt;Smiley Emojis Rating:&lt;/strong&gt; Default emoji images to express ratings.&lt;br&gt;
&lt;strong&gt;Custom Image Rating:&lt;/strong&gt; Use your custom images for ratings.&lt;br&gt;
&lt;strong&gt;Feedback Alert Box for Low Ratings&lt;/strong&gt;: Prompt users to provide feedback if they rate low.&lt;br&gt;
&lt;strong&gt;Redirect to Store for High Ratings:&lt;/strong&gt; Redirect users to the app store for a review if they rate high.&lt;br&gt;
&lt;strong&gt;Customizable UI &amp;amp; Contents:&lt;/strong&gt; Fully customizable to fit your app’s theme.&lt;br&gt;
&lt;strong&gt;Submission Callback:&lt;/strong&gt; Get feedback data with a callback function.&lt;br&gt;
&lt;strong&gt;Installation&lt;/strong&gt;&lt;br&gt;
First, add the rating_and_feedback_collector package to your pubspec.yaml file:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;`yaml&lt;br&gt;
dependencies:&lt;br&gt;
  rating_and_feedback_collector: ^0.0.2&lt;br&gt;
`&lt;/code&gt;&lt;br&gt;
Then, run &lt;strong&gt;pub get&lt;/strong&gt; to fetch the package.&lt;br&gt;
Importing the Package&lt;br&gt;
Next, import the package into your Dart file:&lt;/p&gt;

&lt;p&gt;`&lt;code&gt;&lt;/code&gt;dart&lt;br&gt;
import 'package:rating_and_feedback_collector/rating_and_feedback_collector.dart';&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;br&gt;
&lt;strong&gt;Usage&lt;/strong&gt;&lt;br&gt;
Here are examples of how to use the package’s main features:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Rating Bar with Icons&lt;/strong&gt;&lt;br&gt;
The RatingBar widget allows you to use icons to represent ratings. You can customize the icons, their size, colors, and whether half ratings are allowed.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;`dart&lt;br&gt;
double _rating = 0.0;&lt;br&gt;
RatingBar(&lt;br&gt;
  iconSize: 40, // Size of the rating icons&lt;br&gt;
  allowHalfRating: true, // Allows selection of half ratings&lt;br&gt;
  filledIcon: Icons.star, // Icon for a filled rating unit&lt;br&gt;
  halfFilledIcon: Icons.star_half, // Icon for a half-filled rating unit&lt;br&gt;
  emptyIcon: Icons.star_border, // Icon for an empty rating unit&lt;br&gt;
  filledColor: Colors.amber, // Color of filled rating units&lt;br&gt;
  emptyColor: Colors.grey, // Color of empty rating units&lt;br&gt;
  currentRating: _rating, // Set initial rating value&lt;br&gt;
  onRatingChanged: (rating) { // Callback triggered when the rating is changed&lt;br&gt;
    setState(() { _rating = rating; });&lt;br&gt;
  },&lt;br&gt;
),&lt;br&gt;
`&lt;/code&gt;&lt;br&gt;
Rating Bar with Emoji Images&lt;br&gt;
The RatingBarEmoji widget uses default emoji images to represent ratings.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;`dart&lt;br&gt;
double _rating = 0.0;&lt;br&gt;
RatingBarEmoji(&lt;br&gt;
  imageSize: 45, // Size of image in the rating bar&lt;br&gt;
  currentRating: _rating, // Set initial rating value&lt;br&gt;
  onRatingChanged: (rating) { // Callback triggered when the rating is changed&lt;br&gt;
    setState(() { _rating = rating; });&lt;br&gt;
  },&lt;br&gt;
),&lt;br&gt;
`&lt;/code&gt;&lt;br&gt;
Rating Bar with Custom Images&lt;br&gt;
The RatingBarCustomImage widget allows you to use custom images for different rating levels.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;`dart&lt;br&gt;
double _rating = 0.0;&lt;br&gt;
RatingBarCustomImage(&lt;br&gt;
  imageSize: 45, // Size of image in the rating bar&lt;br&gt;
  currentRating: _rating, // Set initial rating value&lt;br&gt;
  activeImages: const [&lt;br&gt;
    AssetImage('assets/Images/ic_angry.png'),&lt;br&gt;
    AssetImage('assets/Images/ic_sad.png'),&lt;br&gt;
    AssetImage('assets/Images/ic_neutral.png'),&lt;br&gt;
    AssetImage('assets/Images/ic_happy.png'),&lt;br&gt;
    AssetImage('assets/Images/ic_excellent.png'),&lt;br&gt;
  ],&lt;br&gt;
  deActiveImages: const [&lt;br&gt;
    AssetImage('assets/Images/ic_angryDisable.png'),&lt;br&gt;
    AssetImage('assets/Images/ic_sadDisable.png'),&lt;br&gt;
    AssetImage('assets/Images/ic_neutralDisable.png'),&lt;br&gt;
    AssetImage('assets/Images/ic_happyDisable.png'),&lt;br&gt;
    AssetImage('assets/Images/ic_excellentDisable.png'),&lt;br&gt;
  ],&lt;br&gt;
  onRatingChanged: (rating) { // Callback triggered when the rating is changed&lt;br&gt;
    setState(() { _rating = rating; });&lt;br&gt;
  },&lt;br&gt;
),&lt;br&gt;
`&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Customization Properties&lt;/strong&gt;&lt;br&gt;
The package offers various properties to customize the rating bar and feedback dialog:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;currentRating (double):&lt;/strong&gt; Set initial rating value&lt;br&gt;
&lt;strong&gt;filledIcon (only for RatingBar) (IconData?):&lt;/strong&gt; Icon for a filled rating unit&lt;br&gt;
&lt;strong&gt;halfFilledIcon (only for RatingBar) (IconData?):&lt;/strong&gt; Icon for a half-filled rating unit&lt;br&gt;
&lt;strong&gt;emptyIcon (only for RatingBar) (IconData?):&lt;/strong&gt; Icon for an empty rating unit&lt;br&gt;
&lt;strong&gt;filledColor (only for RatingBar) (Color?):&lt;/strong&gt; Color of filled rating units&lt;br&gt;
&lt;strong&gt;emptyColor (only for RatingBar) (Color?):&lt;/strong&gt; Color of empty rating units&lt;br&gt;
&lt;strong&gt;iconSize (double?):&lt;/strong&gt; Size of the rating icons&lt;br&gt;
&lt;strong&gt;onRatingChanged (Function(double)):&lt;/strong&gt; Callback triggered when the rating is changed&lt;br&gt;
&lt;strong&gt;allowHalfRating (only for RatingBar) (bool?):&lt;/strong&gt; Allows selection of half ratings&lt;br&gt;
&lt;strong&gt;isGoogleFont (bool?):&lt;/strong&gt; Set to true for using Google fonts&lt;br&gt;
&lt;strong&gt;fontFamilyName (String?):&lt;/strong&gt; Custom font family name or Google font family name&lt;br&gt;
&lt;strong&gt;showFeedbackForRatingsLessThan (double?):&lt;/strong&gt; Threshold rating value below which feedback box is shown&lt;br&gt;
&lt;strong&gt;feedbackBoxTitle (String?):&lt;/strong&gt; Title for the feedback box&lt;br&gt;
&lt;strong&gt;lowRatingFeedbackTitle (String?):&lt;/strong&gt; Title for feedback options in the low rating feedback box&lt;br&gt;
&lt;strong&gt;lowRatingFeedback (List?):&lt;/strong&gt; List of feedback strings for low ratings&lt;br&gt;
&lt;strong&gt;showDescriptionInput (bool?):&lt;/strong&gt; Option to show input box for user descriptions in the feedback dialog&lt;br&gt;
&lt;strong&gt;descriptionTitle (String?):&lt;/strong&gt; Title for the description input box in the feedback dialog&lt;br&gt;
&lt;strong&gt;descriptionPlaceHolder (String?):&lt;/strong&gt; Placeholder text for the description input box&lt;br&gt;
&lt;strong&gt;descriptionCharacterLimit (int?):&lt;/strong&gt; Character limit for the description input&lt;br&gt;
&lt;strong&gt;submitButtonTitle (String?):&lt;/strong&gt; Title for the submit button in the feedback dialog&lt;br&gt;
&lt;strong&gt;onSubmitTap (Function(selectedFeedback, description)):&lt;/strong&gt; Callback function triggered on submission of feedback&lt;br&gt;
&lt;strong&gt;showRedirectToStoreForRatingsGreaterThan (double?):&lt;/strong&gt; Threshold rating value above which the app redirects to the store for a review&lt;br&gt;
&lt;strong&gt;androidPackageName (String?):&lt;/strong&gt; Android package name for the app, used in the store redirect&lt;br&gt;
&lt;strong&gt;iosBundleId (String?):&lt;/strong&gt; iOS bundle ID for the app, used in the store redirect&lt;br&gt;
&lt;strong&gt;innerWidgetsBorderRadius (double?): **Border radius for the feedback dialog widgets&lt;br&gt;
**alertDialogBorderRadius (double?): **Border radius for the feedback dialog&lt;br&gt;
**Conclusion&lt;/strong&gt;&lt;br&gt;
Rating_and_feedback_collector Package is the optimal solution for adding highly flexible rating bars and in-app feedback alerts into your Flutter app.&lt;br&gt;
By incorporating this package you can raise user’s interest, collect useful feedback and eventually boost your app’s ratings in the store. Include this package into your app and enjoy its flexible and user-friendly elements.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdm9zq7of4917vem5asnl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdm9zq7of4917vem5asnl.png" alt=" " width="800" height="192"&gt;&lt;/a&gt;&lt;br&gt;
more information, check out the&lt;br&gt;
&lt;a href="https://pub.dev/packages/rating_and_feedback_collector" rel="noopener noreferrer"&gt;https://pub.dev/packages/rating_and_feedback_collector&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpebjfdns2ydlu0l7qjn0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpebjfdns2ydlu0l7qjn0.png" alt=" " width="640" height="640"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7yrpgdiod4mnd7t3mizo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7yrpgdiod4mnd7t3mizo.png" alt=" " width="640" height="640"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1e66zs65l7xtb47zqpal.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1e66zs65l7xtb47zqpal.png" alt=" " width="500" height="500"&gt;&lt;/a&gt;&lt;br&gt;
Thanks for reading! If you found this post useful, please share it with others in your network and follow me for more Flutter insights and tutorials. Keep coding and stay awesome!&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>tutorial</category>
      <category>ui</category>
      <category>ux</category>
    </item>
  </channel>
</rss>
