DEV Community: Amr Azzam

Mastering Dart Operators!

Amr Azzam — Tue, 25 Feb 2025 09:17:00 +0000

When working with Dart in Flutter, operators make our code cleaner, more efficient, and expressive!
Let's explore some of the most useful ones with examples.

1️⃣ Null-aware operators (??, ??=, ?.)
Dart makes handling null values easy:

String? name;
print(name ?? 'Guest'); // ➡️ 'Guest' (uses default if null)

name ??= 'John'; // Assigns 'John' only if name is null
print(name); // ➡️ 'John'

int? length = name?.length; // Safe null access
print(length); // ➡️ 4

2️⃣ Spread (...) and Null-aware Spread (...?)
Great for working with collections:

List<int> numbers = [1, 2, 3];
List<int>? nullableList;

List<int> allNumbers = [0, ...numbers, 4, ...?nullableList];
print(allNumbers); // ➡️ [0, 1, 2, 3, 4]

3️⃣ Cascade (..) Operator
Used for chaining method calls:

final controller = TextEditingController()
  ..text = "Hello, Flutter!"
  ..selection = TextSelection.collapsed(offset: 5);

4️⃣ Ternary (? :) & Null-aware Conditional (??)
Simplifies conditional expressions:

int age = 18;
String status = age >= 18 ? 'Adult' : 'Minor';
print(status); // ➡️ 'Adult'

5️⃣ Null Check (!) Operator
Used when you're sure a value isn’t null:

String? nullableString = "Dart";
String nonNullable = nullableString!;
print(nonNullable.length); // ➡️ 4

Operators make Dart code cleaner, safer, and more readable—a must for any Flutter Developer! 🚀

Which operator is your favorite? Drop your thoughts in the comments! 💬👇

MediaQuery vs LayoutBuilder in Flutter

Amr Azzam — Thu, 18 Jul 2024 11:05:42 +0000

In Flutter, both MediaQuery and LayoutBuilder are used to build responsive UIs, but they serve different purposes and have different use cases. Here's a detailed comparison to help you understand when and why you might use each of these widgets.

MediaQuery
What is MediaQuery?
MediaQuery is a widget that provides information about the size, orientation, and other properties of the device's screen and the current app's environment. It is used for querying the current media properties such as screen dimensions, text scale factor, and device pixel ratio.

Key Features:

Global Context: MediaQuery provides information based on the BuildContext in which it is called.
Access to Screen Size: You can use MediaQuery to get screen width, height, and other dimensions.
Performance: Accessing MediaQuery data is relatively cheap and doesn't rebuild widgets unnecessarily.

Typical Use Cases:

Adjusting layout based on screen size.
Creating responsive designs where you need to access screen dimensions or orientation.
Implementing logic that depends on the device’s properties, such as adjusting font sizes based on screen size or text scale factor.

Example Usage:

Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  return Container(
    width: screenWidth * 0.5,
    child: Text('Hello World'),
  );
}

Pros:

Simple and direct way to access screen size and other media properties.
Best for global or static queries about the environment.

Cons:

Accessing MediaQuery in build method can cause inefficiencies if overused, as it does not listen to changes in layout.

LayoutBuilder
What is LayoutBuilder?
LayoutBuilder is a widget that allows you to build a widget tree based on the parent’s constraints. It gives you the ability to adapt your widget’s layout according to the constraints passed by its parent.

Key Features:

Constraint-Based: LayoutBuilder provides constraints from the parent widget, allowing you to build widgets based on the available space.
Dynamic Layouts: It rebuilds whenever the parent’s constraints change, allowing for more flexible and adaptive layouts.

Typical Use Cases:

Creating layouts that need to adapt to the parent’s constraints.
Building complex, responsive UI elements that need to change when the available space changes.
When you need to build widgets based on the parent widget’s size and constraints.

Example Usage:

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      final maxWidth = constraints.maxWidth;
      return Container(
        width: maxWidth * 0.5,
        child: Text('Hello World'),
      );
    },
  );
}

Pros:

More flexible for dynamic layouts that need to adjust to changing constraints.
Provides a mechanism to react to changes in the parent widget’s constraints.

Cons:

Slightly more complex to use than MediaQuery.
Can lead to excessive rebuilds if not used carefully.

When to Use Each

Use MediaQuery when you need to query the device’s properties or global environment settings. It’s ideal for static information that doesn’t depend on the parent’s size or constraints.
Use LayoutBuilder when you need to build a widget based on the constraints provided by the parent widget. It’s perfect for creating adaptive and responsive layouts that change according to available space.

𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 * 𝗮𝗻𝗱 ** 𝗶𝗻 𝗳𝗶𝗹𝗲 𝗽𝗮𝘁𝗵𝘀?

Amr Azzam — Wed, 21 Feb 2024 11:27:17 +0000

Single and Double Asterisks are both wildcard characters, but they have different meanings:
(Single Asterisk):
The * character matches zero or more characters within a single directory name or filename.
It's typically used to match multiple files or directories based on a specific pattern within a single directory level.
For example, file*.txt would match file1.txt, file2.txt, etc., within the same directory.

** (Double Asterisks):
The ** character, often used in glob patterns, matches zero or more directories and files, recursively.
It's typically used to match files or directories across multiple directory levels.
For example, root/*/.txt would match all text files in any subdirectory of root, regardless of how deep they are nested.

In summary, * matches within a single directory level, while ** matches recursively across multiple directory levels.

In Dart: extends vs. with vs. implements

Amr Azzam — Tue, 30 Jan 2024 06:15:49 +0000

𝐞𝐱𝐭𝐞𝐧𝐝𝐬: Use extends to create a subclass that inherits the properties and methods of a superclass. The new class will inherit all the properties and methods of the superclass and can add additional properties and methods of its own. For example, if you have a superclass called Animal, you might create a subclass called Dog that extends Animal.

𝐰𝐢𝐭𝐡: Use with to mix in the behavior of a mixin into a class. A mixin is a class that provides a set of methods and properties that can be added to another class without creating a new subclass. This allows you to reuse code across multiple classes in a flexible way. For example, you might define a mixin called Logger that provides a log method, and then mix it into several classes that need logging behavior.

𝐢𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐬: Use implements to declare that a class conforms to a certain interface. An interface is a set of methods and properties that a class must implement in order to satisfy the interface. This allows you to write code that works with any class that implements the interface, without needing to know the specifics of each class. For example, if you have an interface called Drawable that specifies a draw method, you might declare that a class called Rectangle implements Drawable.

Why Flutter BLoC is Loved and Popular by the Developers?

Amr Azzam — Wed, 24 Jan 2024 12:09:27 +0000

𝗦𝗲𝗽𝗮𝗿𝗮𝘁𝗶𝗼𝗻 𝗼𝗳 𝗖𝗼𝗻𝗰𝗲𝗿𝗻𝘀: Flutter BLoC allows for the separation of business logic and UI. This means that developers can focus on implementing the business logic in the BLoC without worrying about the UI, and vice versa.
𝗖𝗼𝗱𝗲 𝗥𝗲𝘂𝘀𝗮𝗯𝗶𝗹𝗶𝘁𝘆: With Flutter BLoC, developers can create reusable business logic components that can be used across different parts of the application. This reduces code duplication and makes it easier to maintain the application’s codebase.
𝗣𝗿𝗲𝗱𝗶𝗰𝘁𝗮𝗯𝗹𝗲 𝗦𝘁𝗮𝘁𝗲 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁: Flutter BLoC provides a predictable way of managing the state of the application. The BLoC emits new states in response to events from the UI, making it easier to reason about the application’s behavior.
𝗧𝗲𝘀𝘁𝗮𝗯𝗶𝗹𝗶𝘁𝘆: Flutter BLoC makes it easier to write unit tests for the business logic of the application. Since the BLoC is separate from the UI, it can be tested independently of the UI.
𝗟𝗮𝗿𝗴𝗲 𝗮𝗻𝗱 𝗖𝗼𝗺𝗽𝗹𝗲𝘅 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀: Flutter BLoC is particularly well-suited for large and complex applications, as it provides a scalable architecture that can be extended as the application grows.

Difference between APK and AAB Android files?

Amr Azzam — Tue, 23 Jan 2024 08:44:08 +0000

- Full form
APK: Android application package or Android package kit.
AAB: Android application bundle.

- Submission
APK: is submitted and later downloaded in the same form as it is created.
AAB: is split into smaller APK files. Each split APK corresponds to a specific device configuration.

- Installation
APK: can be used to directly install an app on an Android device.
AAB: cannot themselves trigger installation. They defer APK generation to Google Play.

- Size
APK: ensure larger app size because all resources are downloaded to the device irrespective of their need.
AAB: ensure smaller app size because each split APK contains device-specific resources.

- Dynamic features
APK: all feature-based resources are stored within the APK file.
AAB: dynamic feature resources are stored on Google Play and called upon when needed.

- Asset packs
APK: all assets are stored in the main APK file.
AAB: all assets not needed to install the app are stored on Google Play.

- App churn
APK: larger app size causes greater app churn.
AAB: smaller app size causes lower app churn.

- Storage efficiency
APK: unnecessary resources take up a lot of device storage and reduce efficiency.
AAB: is more efficient in terms of space.

'𝗮𝗱𝗱𝗔𝗹𝗹' 𝘃𝘀 '𝗮𝗱𝗱𝗘𝗻𝘁𝗿𝗶𝗲𝘀' 𝗶𝗻 𝗗𝗮𝗿𝘁?

Amr Azzam — Mon, 22 Jan 2024 11:49:40 +0000

Both addAll and addEntries are methods used with maps, but they serve slightly different purposes:

𝙖𝙙𝙙𝘼𝙡𝙡:
𝗨𝘀𝗮𝗴𝗲: addAll is used to add all key-value pairs from one map to another. It modifies the existing map.
𝗔𝗿𝗴𝘂𝗺𝗲𝗻𝘁 𝗧𝘆𝗽𝗲: It takes a Map as an argument.
𝗥𝗲𝘁𝘂𝗿𝗻 𝗧𝘆𝗽𝗲: void (it modifies the existing map).
𝙖𝙙𝙙𝙀𝙣𝙩𝙧𝙞𝙚𝙨:
𝗨𝘀𝗮𝗴𝗲: addEntries is used to create a new map by adding entries from an iterable of MapEntry objects. It does not modify the existing map but creates a new one.
𝗔𝗿𝗴𝘂𝗺𝗲𝗻𝘁 𝗧𝘆𝗽𝗲: It takes an Iterable> as an argument.
𝗥𝗲𝘁𝘂𝗿𝗻 𝗧𝘆𝗽𝗲: Map (it returns a new map).

Choose between addAll and addEntries based on whether you want to modify an existing map or create a new one with additional entries. If you want to keep the original maps unchanged and create a new map, use addEntries. If you want to modify an existing map, use addAll.

𝗪𝗵𝗮𝘁 𝗮𝗿𝗲 𝘁𝗵𝗲 𝗥𝗲𝗴𝗘𝘅 𝗣𝗮𝘁𝘁𝗲𝗿𝗻𝘀?

Amr Azzam — Wed, 17 Jan 2024 19:48:47 +0000

Regular expressions (regex or RegExp) consist of a combination of characters and special symbols that define a search pattern.

Here are some common patterns and symbols used in regex:

𝙇𝙞𝙩𝙚𝙧𝙖𝙡 𝘾𝙝𝙖𝙧𝙖𝙘𝙩𝙚𝙧𝙨:
◦ Regular characters, such as letters and digits, match themselves. For example, the pattern abc matches the string "abc" in the input.
𝙈𝙚𝙩𝙖𝙘𝙝𝙖𝙧𝙖𝙘𝙩𝙚𝙧𝙨:
◦ Special characters that have a specific meaning in regex. Examples include:
▪ . (dot): Matches any single character except a newline.
▪ ^: Anchors the regex at the start of the string.
▪ $: Anchors the regex at the end of the string.
𝘾𝙝𝙖𝙧𝙖𝙘𝙩𝙚𝙧 𝘾𝙡𝙖𝙨𝙨𝙚𝙨:
◦ Enclosed in square brackets [] and match any single character within the brackets. For example, [aeiou] matches any vowel.
𝙌𝙪𝙖𝙣𝙩𝙞𝙛𝙞𝙚𝙧𝙨:
◦ Specify the number of occurrences of the preceding character or group. Examples include:
▪ *: Matches 0 or more occurrences.
▪ +: Matches 1 or more occurrences.
▪ ?: Matches 0 or 1 occurrence.
▪ {n}: Matches exactly n occurrences.
▪ {n,}: Matches n or more occurrences.
▪ {n,m}: Matches between n and m occurrences.
𝙀𝙨𝙘𝙖𝙥𝙚 𝘾𝙝𝙖𝙧𝙖𝙘𝙩𝙚𝙧𝙨:
◦ The backslash \ is used to escape a metacharacter, allowing it to be treated as a literal character. For example, . matches a literal dot.
𝙂𝙧𝙤𝙪𝙥𝙞𝙣𝙜 𝙖𝙣𝙙 𝘾𝙖𝙥𝙩𝙪𝙧𝙞𝙣𝙜:
◦ Parentheses () are used to group characters and capture the matched content. For example, (\d{2})/(\d{2})/(\d{4}) captures day, month, and year in a date pattern.
𝘼𝙡𝙩𝙚𝙧𝙣𝙖𝙩𝙞𝙤𝙣:
◦ The pipe | symbol is used for alternation, allowing the regex to match either of the patterns. For example, cat|dog matches either "cat" or "dog".
𝘾𝙝𝙖𝙧𝙖𝙘𝙩𝙚𝙧 𝙀𝙨𝙘𝙖𝙥𝙚𝙨:
◦ Backslashes followed by certain characters represent special sequences. For example, \d matches any digit, and \s matches any whitespace character.
𝘼𝙣𝙘𝙝𝙤𝙧𝙨:
◦ Anchors assert a position in the string. Examples include ^ for the start of the string and $ for the end of the string.
𝙒𝙤𝙧𝙙 𝘽𝙤𝙪𝙣𝙙𝙖𝙧𝙞𝙚𝙨:
◦ \b is a word boundary anchor that matches the position between a word character (as defined by \w) and a non-word character.

𝗛𝗼𝘄 𝘁𝗼 𝘂𝘀𝗲 𝗥𝗲𝗴𝗘𝘅 𝗶𝗻 𝗗𝗮𝗿𝘁?

Amr Azzam — Wed, 17 Jan 2024 07:47:53 +0000

It's used to match patterns in strings, allowing you to perform more complex string manipulations, validations, and extractions.

Here's a brief overview:
1- Creating a RegExp object:
Use the RegExp class to create a regular expression object. In Flutter, you can use this class to define patterns that you want to match.

𝘙𝘦𝘨𝘌𝘹𝘱 𝘮𝘺𝘙𝘦𝘨𝘌𝘹𝘱 = 𝘙𝘦𝘨𝘌𝘹𝘱(𝘳'𝘱𝘢𝘵𝘵𝘦𝘳𝘯');

The r prefix before the string literal is used to denote a raw string.

2- Testing for a match:
Use the hasMatch method to check if a string contains a match for the regular expression.

𝘚𝘵𝘳𝘪𝘯𝘨 𝘮𝘺𝘚𝘵𝘳𝘪𝘯𝘨 = "𝘦𝘹𝘢𝘮𝘱𝘭𝘦 𝘵𝘦𝘹𝘵";
𝘪𝘧 (𝘮𝘺𝘙𝘦𝘨𝘌𝘹𝘱.𝘩𝘢𝘴𝘔𝘢𝘵𝘤𝘩(𝘮𝘺𝘚𝘵𝘳𝘪𝘯𝘨)) { 
𝘱𝘳𝘪𝘯𝘵("𝘔𝘢𝘵𝘤𝘩 𝘧𝘰𝘶𝘯𝘥!");
} 𝘦𝘭𝘴𝘦 {
𝘱𝘳𝘪𝘯𝘵("𝘕𝘰 𝘮𝘢𝘵𝘤𝘩 𝘧𝘰𝘶𝘯𝘥.");
}

3- Finding matches:
Use the allMatches method to find all matches in a given string.

𝘚𝘵𝘳𝘪𝘯𝘨 𝘮𝘺𝘚𝘵𝘳𝘪𝘯𝘨 = "𝘦𝘹𝘢𝘮𝘱𝘭𝘦 𝘵𝘦𝘹𝘵 𝘸𝘪𝘵𝘩 𝘱𝘢𝘵𝘵𝘦𝘳𝘯 𝘱𝘢𝘵𝘵𝘦𝘳𝘯";
𝘓𝘪𝘴𝘵<𝘔𝘢𝘵𝘤𝘩> 𝘮𝘢𝘵𝘤𝘩𝘦𝘴 = 𝘮𝘺𝘙𝘦𝘨𝘌𝘹𝘱.𝘢𝘭𝘭𝘔𝘢𝘵𝘤𝘩𝘦𝘴(𝘮𝘺𝘚𝘵𝘳𝘪𝘯𝘨);
𝘧𝘰𝘳 (𝘔𝘢𝘵𝘤𝘩 𝘮𝘢𝘵𝘤𝘩 𝘪𝘯 𝘮𝘢𝘵𝘤𝘩𝘦𝘴) { 
𝘱𝘳𝘪𝘯𝘵("𝘔𝘢𝘵𝘤𝘩 𝘧𝘰𝘶𝘯𝘥 𝘢𝘵 ${𝘮𝘢𝘵𝘤𝘩.𝘴𝘵𝘢𝘳𝘵} - ${𝘮𝘢𝘵𝘤𝘩.𝘦𝘯𝘥}: ${𝘮𝘢𝘵𝘤𝘩.𝘨𝘳𝘰𝘶𝘱(0)}");
}

4- Extracting matched groups:
If your regular expression contains groups, you can access them using the group method of the Match object.

𝘙𝘦𝘨𝘌𝘹𝘱 𝘮𝘺𝘙𝘦𝘨𝘌𝘹𝘱 = 𝘙𝘦𝘨𝘌𝘹𝘱(𝘳'(\𝘥{2})/(\𝘥{2})/(\𝘥{4})');
𝘚𝘵𝘳𝘪𝘯𝘨 𝘥𝘢𝘵𝘦𝘚𝘵𝘳𝘪𝘯𝘨 = "01/17/2024";
𝘔𝘢𝘵𝘤𝘩 𝘮𝘢𝘵𝘤𝘩 = 𝘮𝘺𝘙𝘦𝘨𝘌𝘹𝘱.𝘧𝘪𝘳𝘴𝘵𝘔𝘢𝘵𝘤𝘩(𝘥𝘢𝘵𝘦𝘚𝘵𝘳𝘪𝘯𝘨);
𝘪𝘧 (𝘮𝘢𝘵𝘤𝘩 != 𝘯𝘶𝘭𝘭) { 
𝘚𝘵𝘳𝘪𝘯𝘨 𝘥𝘢𝘺 = 𝘮𝘢𝘵𝘤𝘩.𝘨𝘳𝘰𝘶𝘱(1);
 𝘚𝘵𝘳𝘪𝘯𝘨 𝘮𝘰𝘯𝘵𝘩 = 𝘮𝘢𝘵𝘤𝘩.𝘨𝘳𝘰𝘶𝘱(2);
 𝘚𝘵𝘳𝘪𝘯𝘨 𝘺𝘦𝘢𝘳 = 𝘮𝘢𝘵𝘤𝘩.𝘨𝘳𝘰𝘶𝘱(3);
 𝘱𝘳𝘪𝘯𝘵("𝘋𝘢𝘵𝘦: $𝘮𝘰𝘯𝘵𝘩/$𝘥𝘢𝘺/$𝘺𝘦𝘢𝘳");
}

5- Testing in a Flutter application:
You can use regular expressions in various scenarios in Flutter, such as form validations, parsing data, or filtering lists. For example, you might use a regular expression to validate an email address entered in a form.

𝘙𝘦𝘨𝘌𝘹𝘱 𝘦𝘮𝘢𝘪𝘭𝘙𝘦𝘨𝘌𝘹𝘱 = 𝘙𝘦𝘨𝘌𝘹𝘱(𝘳'^[\𝘸-]+(\.[\𝘸-]+)*@([\𝘸-]+\.)+[𝘢-𝘻𝘈-𝘡] {2,7}$');
𝘚𝘵𝘳𝘪𝘯𝘨 𝘦𝘮𝘢𝘪𝘭𝘈𝘥𝘥𝘳𝘦𝘴𝘴 = "𝘦𝘹𝘢𝘮𝘱𝘭𝘦@𝘦𝘮𝘢𝘪𝘭.𝘤𝘰𝘮";
𝘪𝘧 (𝘦𝘮𝘢𝘪𝘭𝘙𝘦𝘨𝘌𝘹𝘱.𝘩𝘢𝘴𝘔𝘢𝘵𝘤𝘩(𝘦𝘮𝘢𝘪𝘭𝘈𝘥𝘥𝘳𝘦𝘴𝘴)) {
𝘱𝘳𝘪𝘯𝘵("𝘝𝘢𝘭𝘪𝘥 𝘦𝘮𝘢𝘪𝘭 𝘢𝘥𝘥𝘳𝘦𝘴𝘴");
} 𝘦𝘭𝘴𝘦 {
 𝘱𝘳𝘪𝘯𝘵("𝘐𝘯𝘷𝘢𝘭𝘪𝘥 𝘦𝘮𝘢𝘪𝘭 𝘢𝘥𝘥𝘳𝘦𝘴𝘴");
}

𝙒𝙖𝙞𝙩 𝙛𝙤𝙧 𝙩𝙝𝙚 𝙋𝙖𝙩𝙩𝙚𝙧𝙣𝙨 𝙤𝙛 𝙍𝙚𝙜𝙀𝙭 𝙥𝙤𝙨𝙩 🚀