Building a Wheel of Fortune app in Flutter 🎡✨

The training video is available on YouTube:
https://youtu.be/2HGUGjEEPck

Implementation of Flip animation in Flutter

The training video is available on YouTube:
https://youtu.be/IiaUgN14C9U

Building an Onboarding Screen for a Car Rental App using Flutter

The training video is available on YouTube:
https://youtu.be/MnCjAqQFtoE?si=k33zFyYzJNxhMHJP

If you're in china or in a country under an embargo and need to use a Chinese Pub repository (or any custom package repository) in Flutter, you can configure your Flutter environment to use a mirror repository hosted in China. This is useful if the official Pub repository (https://pub.dev) is inaccessible due to embargo restrictions.

Here’s how you can set it up:

1. Identify a Reliable Chinese Pub Mirror
Some popular Chinese Pub mirrors include:
- https://pub.flutter-io.cn (official Flutter China mirror)
- https://pub.dev.ixigua.com (by ByteDance)

These mirrors host the same packages as the official Pub repository but are hosted on servers in China.

2. Configure Flutter to Use the Chinese Pub Mirror
You need to set the PUB_HOSTED_URL environment variable to point to the Chinese mirror.

Option 1: Set Environment Variables
- On macOS/Linux:
1. Open your terminal.
2. Edit your shell configuration file (e.g., .bashrc, .zshrc, or .bash_profile):

        export PUB_HOSTED_URL=https://pub.flutter-io.cn
        

3. Save the file and reload the shell:

        source ~/.bashrc  # or source ~/.zshrc
        

- On Windows:
1. Open Command Prompt or PowerShell.
2. Run the following command to set the environment variable:

        setx PUB_HOSTED_URL "https://pub.flutter-io.cn"
        

3. Restart your terminal or IDE for the changes to take effect.

Option 2: Use a flutter Command
You can also specify the custom repository directly when running Flutter commands:

   flutter pub get --hosted-url=https://pub.flutter-io.cn
   

Update Your pubspec.yaml
- Your pubspec.yaml file does not need any special changes. Flutter will automatically use the repository specified in the PUB_HOSTED_URL environment variable.
- Example pubspec.yaml:

     dependencies:
       flutter:
         sdk: flutter
       http: ^0.13.3
     

---

4.Run flutter pub get
- After configuring the custom repository, run:

     flutter pub get
     

- Flutter will fetch the packages from the Chinese mirror repository.

Verify the Configuration
- Check the logs when running flutter pub get. It should show the custom repository URL in the output, confirming that Flutter is using the Chinese mirror.

Troubleshooting
- If you encounter issues:
- Ensure the PUB_HOSTED_URL environment variable is correctly set.
- Verify that the mirror repository is accessible from your network.
- Make sure your Flutter SDK is up to date.

Switch Back to the Default Pub Repository
If you want to switch back to the default Pub repository, unset the PUB_HOSTED_URL environment variable or set it to the official URL:

   export PUB_HOSTED_URL=https://pub.dev
   

Additional Notes for Embargoed Countries
- If you are in a country under an embargo, you may also need to use a VPN or proxy to access certain resources or repositories.
- Ensure that using a Chinese mirror complies with your local laws and regulations.


By following these steps, you can configure Flutter to use a Chinese Pub repository, allowing you to access Flutter packages even if the official Pub repository is inaccessible due to embargo restrictions.

Boost Your Flutter Development with Fake Data Using the Faker Package!

Hey Flutter Enthusiasts! 👋

Ever found yourself in a situation where you needed dummy data to test your app, but creating it manually felt like a waste of time? Worry no more! The Faker package is here to save the day! 🦸‍♂️

What is the Faker Package?
The Faker package is a Dart library that generates fake data for you. Whether you need names, addresses, phone numbers, or even lorem ipsum text, Faker has got you covered. It’s perfect for prototyping, testing, or even creating mockups for your Flutter apps.

Why Use Fake Data?
- Speed up development: No more wasting time creating dummy data manually.
- Realistic testing: Generate data that looks real, making your tests more accurate.
- Prototyping: Quickly build and showcase your app with realistic-looking data.

How to Use Faker in Flutter

1. Add the Dependency:
First, add the Faker package to your pubspec.yaml file:

   dependencies:
     faker: ^2.0.0
   

Don’t forget to run flutter pub get to install the package.

2. Import the Package:
Import the Faker package in your Dart file:

   import 'package:faker/faker.dart';
   

3. Generate Fake Data:
Now, you can start generating fake data! Here are some examples:

   final faker = Faker();

   // Generate a fake name
   String name = faker.person.name();

   // Generate a fake email
   String email = faker.internet.email();

   // Generate a fake address
   String address = faker.address.streetAddress();

   // Generate a random lorem ipsum sentence
   String lorem = faker.lorem.sentence();

   // Generate a fake phone number
   String phoneNumber = faker.phoneNumber.us();
   

4. Use It in Your App:
You can use this fake data in your widgets, models, or anywhere you need it. For example:

   ListTile(
     noscript: Text(name),
     subnoscript: Text(email),
   );
   

Example: Generating a List of Fake Users
Here’s a quick example of how you can generate a list of fake users:

List<Map<String, String>> generateFakeUsers(int count) {
  final faker = Faker();
  return List.generate(count, (index) {
    return {
      'name': faker.person.name(),
      'email': faker.internet.email(),
      'phone': faker.phoneNumber.us(),
    };
  });
}

Wrap-Up
The Faker package is a must-have tool for any Flutter developer.
It saves time, makes testing easier, and helps you focus on what really matters—building awesome apps!

#Flutter #FakerPackage #FakeData #FlutterDev #MobileDevelopment #Prototyping #Testing

Join my Telegram channel for more Flutter tips, tricks, and updates!
👉 @alesdevstudio 👈

Keep Fluttering! 🦋

Implementation of Mobile OTP Authentication for a Car Rental app using Flutter

The training video is available on YouTube: https://youtu.be/DeR_fsx0JuI?si=TZUKNeY6mI257Uan

Boost Your Flutter Development with flutter_gen!

Tired of manually managing assets and dealing with runtime errors?
Say hello to flutter_gen a game-changing package that automates resource management and brings type safety to your Flutter projects!

The flutter_gen package is a code generation tool for Flutter that helps automate the process of managing assets, fonts, colors, and other resources in your Flutter project.
Instead of manually writing paths or configurations for assets, flutter_gen generates type-safe, easy-to-use Dart code, reducing the risk of errors and improving developer productivity.

Benefits of using flutter_gen package:
1. Asset Management: Automatically generates Dart classes for accessing assets (images, icons, etc.) with type-safe references.
2. Font Management: Simplifies the process of using custom fonts by generating font family classes.
3. Color Management: Generates color constants from your project's color definitions.
4. Localization Support: Can integrate with localization tools to generate type-safe access to localized strings.
5. Customizable: Allows customization of the generated code to fit your project's needs.

Example Usage:
1. Add flutter_gen to your pubspec.yaml under dev_dependencies.

2. Configure the flutter_gen settings in pubspec.yaml to specify asset paths, fonts, etc.

3. Run the code generator using the command flutter pub run build_runner build.

4. Use the generated classes to access assets, fonts, or colors in your app.

Example:

// Accessing an image asset
Image.asset(Assets.images.logo.path);

// Using a custom font
Text(
  'Hello, Flutter!',
  style: TextStyle(fontFamily: FontFamily.roboto),
);

By using flutter_gen, you can streamline resource management in your Flutter projects, making your code cleaner and more maintainable.

Package URL:
You can find the flutter_gen package on https://pub.dev/packages/flutter_gen

Flutter Keys Explained: Unlocking Widget Identity & State!

Hey Flutter Devs!
Ever wondered how Flutter keeps track of widgets when the UI rebuilds?
The secret lies in Keys! Let’s dive into the world of Flutter keys and learn how they help manage widget identity and state. 🗝️

What Are Keys?
Keys are unique identifiers for widgets in the widget tree. They help Flutter determine which widgets have changed, been added, or been removed during rebuilds. Without keys, Flutter might lose track of the widget state, leading to unexpected behavior.

Types of keys:
1️⃣ ValueKey 
Use a value (like a string or number) to identify a widget. 

ValueKey<String>('item1')

2️⃣ UniqueKey 
Generates a unique key every time it’s created. 

UniqueKey()

3️⃣ GlobalKey 
Access a widget’s state globally. 

GlobalKey<FormState>()

4️⃣ PageStorageKey 
Save and restore state (e.g., scroll position). 

PageStorageKey<String>('scrollPosition')

Example: Using Keys in a List 
When reordering items in a list, keys help Flutter know which widgets moved: 

List<Widget> items = [
  ListTile(key: ValueKey('item1'), noscript: Text('Item 1')),
  ListTile(key: ValueKey('item2'), noscript: Text('Item 2')),
];

Example: GlobalKey in a Form
Use a GlobalKey to validate a form from anywhere: 

final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

void _submit() {
  if (_formKey.currentState!.validate()) {
    print('Form is valid!');
  }
}

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(validator: (value) => value!.isEmpty ? 'Required' : null),
      ElevatedButton(onPressed: _submit, child: Text('Submit')),
    ],
  ),
);

When to Use Keys:
✅ Preserving State: Keep widget state intact during rebuilds.

✅ Reordering Widgets: Ensure Flutter correctly identifies moved widgets in a list.

✅ Accessing State: Use GlobalKey to access widget state from outside its subtree.

Why Are Keys Important?
Keys ensure Flutter can efficiently update the UI and maintain widget state. They’re essential for building dynamic, stateful, and performant apps.

Flutter Accessibility Made Easy with accessibility_tools!

Ensuring your Flutter app is accessible is crucial for inclusivity. The accessibility_tools package helps you catch common accessibility issues during development.
Here’s how to use it with examples:

1. Enable Accessibility
Wrap your MaterialApp with AccessibilityTools:

void main() {
  runApp(
    const AccessibilityTools(
      child: MyApp(),
    ),
  );
}

2. Check for Missing Semanticscs
The package warns you if a Text widget lacks semantics:

❌ Before:

Text('Click me') // Warning: Missing Semantics!

✅ After:

Text(
  'Click me',
  semanticsLabel: 'Click me button', // Screen readers will announce this
)

3. Detect Low Contrast Text
Ensures text is readable:

Text(
  'Low contrast',
  style: TextStyle(color: Colors.grey[300]), // Warning: Low contrast!
)

4. Check Tap Target Size
Buttons should be at least 48x48px:

❌ Too small:

SizedBox(
  width: 30,
  height: 30,
  child: IconButton(/*...*/), // Warning: Small tap target!
)

✅ Fixed:

IconButton(
  iconSize: 48, // Meets minimum size
  onPressed: () {},
  icon: Icon(Icons.add),
)

Why Use This?
✔️ Catch issues early
✔️ Improve app usability
✔️ Support screen readers & motor impairments

Get the package:

dependencies:
  accessibility_tools: ^latest_version

Try it in your project and make your app more inclusive!

Search-as-You-Type with Debouncing! 🔍

I'm excited to introduce a smoother & faster search experience in Flutter apps!
With this feature, users can get real-time results as they type, without unnecessary API calls.

How It Works?
✅ Search-as-you-type: Results update instantly with every keystroke.
✅ Debouncing: Reduces redundant API calls, improving performance.
✅ Optimized UX: No more lag or overload—just seamless searching!

💡 Why Debouncing?
Debouncing ensures that the app waits for a short pause (e.g., 300ms) before triggering a search. This prevents excessive network requests while keeping the search responsive!

Before: Typing "flutter" could trigger 6 API calls.
After: With debouncing, only 1 call is made after a brief pause.

👨‍💻 Flutter Implementation Sneak Peek
Here’s a snippet of how i did it with RxDart or Timer:

final _searchController = TextEditingController();  
final _debouncer = Debouncer(delay: Duration(milliseconds: 300));  

_searchController.addListener(() {  
  _debouncer.run(() {  
    _fetchResults(_searchController.text);  
  });  
});  

🔥 Try it out now and enjoy lightning-fast searches!

Flutter FFI: How to Call C/C++ Code from Dart for Max Performance!

Did you know you can supercharge your Flutter apps by integrating native code?
With Flutter FFI (Foreign Function Interface), you can directly call C/C++ libraries from Dart, unlocking high-performance computing, hardware access, and legacy code reuse!

Why Use FFI?
✅ Performance Boost – Optimize CPU-heavy tasks with native code.
✅ Access Native APIs – Interact with platform-specific libraries.
✅ Reuse Existing Code – Integrate legacy C/C++ code without rewriting.

How It Works
Flutter FFI allows Dart to call functions from compiled native libraries (.so, .dll, .dylib).
You define the bindings in Dart and let the FFI handle the rest!

Quick Example

import 'dart:ffi';
import 'package:ffi/ffi.dart';

// Load native library
final dylib = DynamicLibrary.open('libnative.so');

// Define C function signature
typedef SumFunc = Int32 Function(Int32, Int32);
typedef Sum = int Function(int, int);

// Call native function
final sum = dylib.lookupFunction<SumFunc, Sum>('sum');
print(sum(5, 3)); // Output: 8

Use Cases
- Game Engines (e.g., integrating C++ physics engines)
- Media Processing (FFmpeg, OpenCV)
- Cryptography & Security (OpenSSL, custom encryption)
- IoT & Hardware (Bluetooth, sensors)

Getting Started
Official Flutter FFI Docs: https://docs.flutter.dev/development/platform-integration/c-interop

Implementation of a Car Rental app Home Screen using Flutter

The training video is available on YouTube: https://youtu.be/Ji6mw_3i_Ew?si=CtXx3BvbwwGhzn5Z

Implementation of a Car Rental App Details Screen using Flutter

The training video is available on YouTube:
https://youtu.be/qZBBYPdBrAg?si=Ji0hTGhDl4j6l4aC

Boost Your Flutter Workflow with FVM (Flutter Version Management)!

Are you working on multiple Flutter projects with different SDK versions? Struggling with version conflicts or team consistency? Meet FVM—your solution for seamless Flutter version management!

Flutter Version Management (FVM) is an essential tool for Flutter developers that streamlines the process of managing multiple Flutter SDK versions across different projects.

As Flutter evolves rapidly with frequent updates, having a robust version management system becomes crucial for maintaining project stability.

Why Use FVM?
✅ Switch between Flutter versions effortlessly
✅ Pin specific versions per project
✅ Test on stable/beta/dev channels without hassle
✅ Keep your team in sync with the exact Flutter version

🛠️ Quick Setup

# Install FVM  
dart pub global activate fvm  

# Install a Flutter version  
fvm install 3.19.0  

# Use it in your project  
cd my_project  
fvm use 3.19.0  

🔧 IDE Setup (VS Code)
Add this to your settings.json:

"dart.flutterSdkPath": ".fvm/flutter_sdk"  

🔗 Learn more: https://fvm.app

Mastering Flutter GridView: Simple to Advanced (With Animations & Actions!)

The training video is available on YouTube:
https://youtu.be/a1UkcEcNMKc?si=pzMRCUuLVIDVfIYe

Flutter Security Tutorial: Best Practices for Secure Mobile Apps

1. Secure Data Storage
Sensitive Data Storage
- Avoid storing sensitive data in plain text (e.g., API keys, passwords, tokens).
- Use secure storage solutions:
- Flutter Secure Storage (for mobile) encrypts data using platform-specific keychains (iOS) and Keystore (Android).
- Hive with encryption for local NoSQL storage.
- SharedPreferences should not be used for sensitive data as it’s not encrypted by default.

Securing API Keys & Secrets
- Never hardcode API keys in your app’s source code.
- Use environment variables (via .env files) with packages like flutter_dotenv.
- Fetch secrets from a backend service instead of embedding them in the app.
- Use Firebase Remote Config for dynamic configuration without exposing keys.

2. Secure Network Communication
HTTPS & Certificate Pinning
- Always use HTTPS (not HTTP) for API calls to encrypt data in transit.
- Implement certificate pinning to prevent man-in-the-middle (MITM) attacks:
- Use packages like http_certificate_pinning or Dio’s certificate pinning.
- Only trust certificates from your backend.

Secure API Authentication
- Use OAuth2, JWT, or Firebase Auth for secure authentication.
- Store tokens securely (e.g., in Flutter Secure Storage).
- Implement token expiration and refresh mechanisms.
- Avoid sending sensitive data in URLs (use POST instead of GET for sensitive requests).

3. Authentication & Authorization
Best Practices for User Authentication
- Use trusted auth providers (Firebase Auth, AWS Cognito).
- Enable multi-factor authentication (MFA) where possible.
- Implement proper session management (e.g. auto-logout after inactivity).
- Sanitize and validate all user inputs to prevent injection attacks.

Role-Based Access Control (RBAC)
- Define user roles and permissions on the backend.
- Never trust client-side checks alone—validate permissions server-side.

4. Code & Dependency Security
Secure Your Code
- Obfuscate and minify release builds to make reverse engineering harder:

  flutter build apk --obfuscate --split-debug-info=/<path-to-symbols>
  

- Disable logging in production to avoid leaking sensitive data.

Dependency Management
- Regularly update dependencies to patch vulnerabilities.
- Audit third-party packages before using them (check popularity, maintenance, and security issues).
- Use tools like dart pub outdated to identify outdated package5. Platform-Specific SecuritytAndroid Securityty Enable ProGuard/R8R8 to obfuscate Java/Kotlin code.
- Set android:usesCleartextTraffic="false" in AndroidManifest.xml to block HTTP requests on Android and on iOS use Security Enable App Transport Security (ATS) (ATS) (ATS) to enforce HTTPS:

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <false/>
  </dict>
  

- Use Keychain Services for security. Preventing Common Attacks on SQL Injection In Use parameterized queri (if using SQLite with Avoid dynamic SQL queriesQL queriesQL queries based on Cross-Site Scripting (XSS) in Sanitize user-generated content before rendering it Use HtmlEscapeHtmlEscapeHtmlEscape to escape HTML content.

By adopting these measures, you'll build more resilient and trustworthy Flutter applications.

Using Secure Storage in Flutter to Avoid Plain Text Sensitive Data

When handling sensitive data like API keys, tokens, or credentials in Flutter, it's crucial to avoid storing them in plain text. Here are the best approaches:

1. flutter_secure_storage Package

The most common solution is the flutter_secure_storage package, which uses platform-specific secure storage mechanisms:

Implementation:

import 'package:flutter_secure_storage/flutter_secure_storage.dart';

// Create storage instance
final storage = FlutterSecureStorage();

// Write data securely
await storage.write(key: 'api_key', value: 'your_sensitive_data');

// Read data
String? value = await storage.read(key: 'api_key');

// Delete data
await storage.delete(key: 'api_key');

Platform-specific behavior:
- Android: Uses EncryptedSharedPreferences or KeyStore
- iOS: Uses Keychain
- Web: Uses Web Cryptography API or localStorage (less secure)
- Windows/Linux/Mac: Uses libsecret, Keyring, or other platform-specific solutions

2. Encrypted Shared Preferences

For a balance between security and convenience:

import 'package:encrypted_shared_preferences/encrypted_shared_preferences.dart';

final prefs = EncryptedSharedPreferences();
await prefs.setString('token', 'sensitive_value');
String? token = await prefs.getString('token');

3. For Very Sensitive Data: Biometric-protected Storage

import 'package:flutter_secure_storage/flutter_secure_storage.dart';

final storage = FlutterSecureStorage(
  aOptions: AndroidOptions(
    encryptedSharedPreferences: true,
    storageCipherAlgorithm: StorageCipherAlgorithm.AES_CBC_PKCS7Padding,
  ),
  iOptions: IOSOptions(
    accessibility: KeychainAccessibility.first_unlock,
  ),
);

// Write with biometric protection
await storage.write(
  key: 'ultra_secure',
  value: 'data',
  iOptions: IOSOptions(accessibility: KeychainAccessibility.first_unlock_this_device),
  aOptions: AndroidOptions(authenticationRequired: true),
);

Best Practices

1. Never hardcode sensitive data in your source code
2. Use environment variables for build-time secrets (with flutter_dotenv)
3. Combine approaches - Use secure storage for runtime secrets and env vars for build-time config
4. Implement auto-delete for temporary tokens
5. Consider backend solutions for extremely sensitive data (have your server handle it)

For API Keys and Build-time Secrets

Use flutter_dotenv:

1. Add to .env file (add to .gitignore):

   API_KEY=your_key_here
   

2. In pubspec.yaml:

   dependencies:
     flutter_dotenv: ^5.1.0
   

3. In code:

   await dotenv.load(fileName: ".env");
   String apiKey = dotenv.env['API_KEY']!;
   

Remember that no client-side storage is 100% secure, but these methods significantly improve protection against common attacks.

Jailbreak & Root Detection 🔒

As Flutter apps grow in complexity, security becomes critical—especially when dealing with sensitive data, banking apps, or enterprise solutions. One major threat? Jailbroken (iOS) or rooted (Android) devices, which bypass security measures and expose your app to exploits.

Why Detect Jailbreak/Root?

Prevent reverse engineering (tampering, cheating, piracy).

Secure financial transactions (block rooted devices in banking apps).

Comply with security policies (HIPAA, PCI-DSS).

How to Detect Jailbreak/Root in Flutter

1. Using Plugins (Easy Mode)
[flutter_jailbreak_detection](https://pub.dev/packages/flutter_jailbreak_detection):

  bool isJailbroken = await FlutterJailbreakDetection.jailbroken;  
  bool isRooted = await FlutterJailbreakDetection.developerMode; // Android  
  

- [root_check](https://pub.dev/packages/root_check): Lightweight root detection.

2. Advanced Manual Checks (Platform Channels)
For custom detection logic, use platform channels to call native code:

Android (Kotlin):

fun isRooted(): Boolean {  
    val paths = arrayOf("/system/bin/su", "/system/xbin/su", "/sbin/su")  
    return paths.any { File(it).exists() }  
}  

iOS (Swift):

func isJailbroken() -> Bool {  
    return FileManager.default.fileExists(atPath: "/Applications/Cydia.app")  
}  

Limitations & Workarounds

⚠ False positives: Some legit devices may trigger checks (e.g., Xiaomi devs).

⚠ Advanced users can hide root/jailbreak (Magisk, Kernbypass).

✅ Defense in depth: Pair with certificate pinning, RASP (Runtime App Self-Protection).

Barber booking app main screens UI in Flutter

The training video is available on YouTube:
https://youtu.be/E5mMyne5N3s

Complete Email Authentication Project with Flutter

Youtube:
https://youtu.be/WY-FHfMNa58?si=ejOeo_qoPHmxo9nz

Github:
https://github.com/ales-dev-studio/Flutter-Email-Authentication.git

Build a Sweet Shop App in Flutter #1

Training course:
https://youtu.be/sewOZ-FZiBQ