DEV Community: Esmaeil Ahmadipour

Unlocking the Power of Generics in Dart: Using List, Set, Map, and Queue Collections

Esmaeil Ahmadipour — Fri, 10 Mar 2023 00:07:33 +0000

Generics are a powerful feature of the Dart language that allow us to create collections that can only hold a single type of data. This ensures type safety and prevents us from accidentally adding the wrong type of data to a collection. Generics can be used with List, Set, Map, and Queue collections.

For example, a List can only hold strings, a Set can only hold integers, a Map can only hold key-value pairs where the key is a string and the value is an integer, and a Queue can only hold strings.

Using generics also allows us to easily access the data stored in a collection. For example, if we have a List we know that all of the elements in the list will be strings and we can easily access them without having to worry about type errors. Similarly, if we have a Map we know that all of the keys will be strings and all of the values will be integers and we can easily access them without having to worry about type errors.

1. 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 𝗟𝗶𝘀𝘁

In Dart, a List is simply an ordered group of objects. A list is simple an implementation of an array.
Example:

List<T> list = new List<String>();
list.add("John");
list.add("Mary");
list.add("Bob");

2. 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Set

In Dart, a Set represents a collection of objects in which each object can exist only once.
Example:

Set<T> set = new Set<Product>();
set.add(new Product("Shirt"));
set.add(new Product("Pants"));
set.add(new Product("Hat"));

3. 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Map

In Dart, Map is a dynamic collection of the key, value pairs.
Example:

Map<K, V> map = new Map<String, Customer>();
map["John"] = new Customer("John", 25);
map["Mary"] = new Customer("Mary", 30);
map["Bob"] = new Customer("Bob", 28);

4. 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 𝗤𝘂𝗲𝘂𝗲

A queue is a collection that is used when the data is to be inserted in a FIFO (First in first out) manner. In Dat, a queue can be manipulated at both ends, i.e. at the start as well as the end of the queue.
Example:

Queue<T> queue = new Queue<Order>();
queue.add(new Order("Red Shirt"));
queue.add(new Order("Green Pants"));
queue.add(new Order("Blue Hat"));

5. 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Class & 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Functions

Generics can also be used to create custom classes and functions. This allows us to create classes and functions that can be used with any type of data.
Example:

// 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Class
class MyClass<T> { 
T data;
 MyClass(this.data);
   void printData() {
     print(data); } 
} 

// 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Functions
void myFunction<T>(T data) {
   print(data); 
}

𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Example In Flutter

In below example, we have created a generic class called MyClass that can be used to store any type of data.
We have also created a object called WidgetListItem that takes a MyClass object and displays the data stored in it.
And we have used generics to ensure that the data stored in the MyClass object is of the correct type and that the WidgetListItem object can be used with any type of data.

import 'package:flutter/material.dart';

class MyClass<T,K> {
  Map<T,K>  data;
  Map<String,String>? type;

  MyClass(this.data, [this.type]) {
//The "type" variable is used to show "runtimeType" of the "MyClass" variables.
    type = {"${data.entries.first.key.runtimeType}":"${data.entries.first.value.runtimeType}"};
  }
}

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // We defines 3 object from generic classes
    MyClass universityName_term = MyClass<String,int>({"CentralUniversity":3});
    MyClass salary_tax = MyClass<int,double>({1000:0.09});
    MyClass firstName_lastName = MyClass<String,String>({"Esmaeil":"Ahmadipour"});

    return MaterialApp(
      title: 'Generics Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Using Generics')),
        body: Center(
          child: Padding(
              padding: const EdgeInsets.all(48.0),
              child:Column(
                children: [
                  const WidgetListTitle(),
                  WidgetListItem(myClass: universityName_term,color: Colors.red.shade300),
                  WidgetListItem(myClass: salary_tax,color: Colors.green.shade300),
                  WidgetListItem(myClass: firstName_lastName,color: Colors.blue.shade300),
                ],
              )
          ),
        ),
      ),
    );
  }
}

class WidgetListTitle extends StatelessWidget {
  const WidgetListTitle({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: const [
        Text('Map Side'),
        Text('Side Value'),
        Text('ValueType'),
      ],
    );
  }
}

class WidgetListItem extends StatelessWidget {
  const WidgetListItem({
    Key? key,
    required this.myClass, required this.color,
  }) : super(key: key);

  final MyClass myClass;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      color: color,
      child: Column(
        children: <Widget>[

          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('Kay:'),
              Text('${myClass.data.entries.first.key}'),
              Text(myClass.type!.entries.first.key),
            ],
          ),
          const Divider(),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('Value:'),
              Text('${myClass.data.entries.first.value}'),
              Text(myClass.type!.entries.first.value),
            ],
          ),
        ],
      ),
    );
  }
}

Understanding the Basics of Mockito in Flutter(Part1)

Esmaeil Ahmadipour — Wed, 08 Mar 2023 20:24:40 +0000

#Introduction to Mockito in Flutter
Mockito is a powerful mocking framework for unit testing in Flutter, allowing developers to create mock objects that simulate the behavior of real objects in controlled ways.
This helps developers to test the functionality of their code without having to rely on external dependencies. It also helps to identify bugs and errors in the code, as it isolates the code under test and verifies its behavior.
With Mockito, developers can create mocks of classes, interfaces, and even functions, allowing them to test their code in isolation and ensure that their code is working as expected.

#Setting up Mockito in flutter
Mockito is a popular mocking framework for unit testing in Java. It is now available for Flutter developers as well, thanks to the mocktail package. Setting up Mockito in Flutter and using the mocktail package is easy and straightforward.
The mocktail package provides a Mock class that can be used to create a mock object of any class. The mock object can then be used to define the behavior of the class and write tests.
In the example above, we have created a Calculator class with an add() method that takes two numbers as parameters and returns their sum. To test this method, we have created a mock object of the Calculator class using the Mock class provided by the mocktail package. We have then defined the behavior of the mock object using the when() method. Finally, we have written a test to verify that the mock object returns the expected result.

/// Full Code ;)

import 'package:test/test.dart';
import 'package:mocktail/mocktail.dart';

class MockCalculator extends Mock implements Calculator {}

void main() {

  test('add() should return the sum of two numbers', () {
// This is a test to verify the behavior of the add() method of the Calculator class.
// First, a mock object of the Calculator class is created.
    var  calculator = MockCalculator();

// The behavior of the mock object is then defined.
// When the add() method is called with 1 and 2 as parameters, it should return 3.
    when(() =>calculator.add(1, 2)).thenReturn(3);

// The test is written to call the add() method with 1 and 2 as parameters.
    int result = calculator.add(1, 2);

// Finally, the result is verified to be 3, which is the expected result.
    expect(result, 3);
  });
}

class Calculator {
  int add(int a, int b) {
    return a + b;
  }
}

#Writing Unit Tests with Mockito in flutter
Writing unit tests with Mockito in Flutter is a great way to ensure that your code is working as expected. Mockito is a mocking framework that allows you to create mock objects and stub methods for testing. With Mockito, you can easily create mocks of classes and methods, and then use them to test your code.

In this section , we’ll be looking at how to write unit tests with Mockito in Flutter. We’ll be using the MyClass class from the example above as our example class. We’ll be writing tests for the setData() and getData() methods of MyClass.

First, we’ll need to import the Mocktail library and the test package. Then, we’ll create a MyClassMock class that extends the Mock class. This will allow us to create mock objects of our MyClass class.

Next, we’ll create a setUp() method that will create an instance of MyClassMock and MyClass. This will allow us to use these instances in our tests.

Then, we’ll create a group() method that will group our tests together. This will make it easier to read our tests and understand what they are testing.

Finally, we’ll write three test() methods that will test the setData() and getData() methods of MyClass, as well as the getData() method of MyClassMock with a default value.

Once we have written our tests, we can run them to make sure that our code is working as expected. If any of the tests fail, we can go back and debug our code until all of the tests pass.

/// Full Code ;)
import 'package:mocktail/mocktail.dart';
import 'package:test/test.dart';

class MyClassMock extends Mock implements MyClass {}

// This test suite is used to test the functionality of the MyClass class.
void main() {
  late MyClassMock myClassMock;
  late MyClass myClass;
// The setUp() method is used to create an instance of MyClassMock and MyClass.
  setUp(() {
    myClassMock = MyClassMock();
    myClass = MyClass();
  });
// The group() method is used to group the tests together.
  group('do setData and getData succeed', () {
// The first test() method is used to test the setData() and getData() methods of MyClass.
    test('setData', () {
      myClass.setData("test");
      expect(myClass.getData(), equals("test"));
    });
// The second test() method is used to test the getData() method of MyClassMock.
    test('getData', () {
      when(() => myClassMock.getData()).thenReturn("TEST");
      expect(myClassMock.getData(), equals("TEST"));
    });
// The third test() method is used to test the getData() method of MyClassMock with a default value.
    test('getData with default value', () {
      expect(myClassMock.getData(), equals(null));
    });
  });
}

class MyClass {
  String? _data;

  String? getData() {
    return _data;
  }

  void setData(String data) {
    _data = data;
  }
}

The Challenge of Using the Same Code Base for Android and Web: A Conceptual Overview

Esmaeil Ahmadipour — Wed, 08 Mar 2023 20:18:29 +0000

Are you a programmer looking for a way to write code that works on both Android and web platforms? If so, you’ve come to the right place!
In this article, we’ll explore the concept of using the same code base for both Android and web platforms. We’ll look at how to write code that works on both platforms, as well as some of the challenges you may face when doing so.
The first step in writing code that works on both Android and web platforms is to import the appropriate libraries.

For web browsers, you’ll need to import 'dart:html'.
For Android devices, you’ll need to import 'dart:ui'.

Here’s an example of how to do this:

import 'package:flutter/material.dart';
import 'dart:html' as html; // For web browser.
import 'dart:ui' as ui; // For Android device.

Next, you’ll need to create a StatelessWidget class that contains the code that will be used for both Android and web platforms. Here’s an example of how to do this:

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 // Check the platform and use the appropriate library.

 if (html.window != null) { 
// Running on web browser.

// Create a new file.
 File('my_file.txt').create();

// Write to a file.
 File('my_file.txt').writeAsStringSync('Hello World!');

// Read the content of a file.
 String content = File('my_file.txt').readAsStringSync();
return Text(content);
 } else if (ui.window != null) {
// Running on Android device.

// Create a new file.
 File('my_file.txt').create();

// Write to a file.
 File('my_file.txt').writeAsStringSync('Hello World!');

// Read the content of a file.
 String content = File('my_file.txt').readAsStringSync();
return Text(content);
 } else {

// Unknown platform.
 return Text('Unknown platform!');
 }

Finally, you’ll need to call the runApp() method with your StatelessWidget class as an argument. This will ensure that your code runs on both Android and web platforms. Here’s an example of how to do this:

void main(){ 
runApp(MaterialApp( 
  home: Scaffold(body:Center(child:MyApp())),
  )); 
}

But, can we do it another way?

You can create three files that will allow you to switch between native and web code.

The first file, web.dart, will contain code specific to web applications. This file should import the dart:html library and contain any functions or variables that are specific to web applications. For example, the following code contains a reload() function that reloads the current page and a cookie variable that stores a cookie value:

import 'dart:html' as html;

void reload() {
  html.window.location.reload();
}

String cookie = "";

The second file, native.dart, will contain code specific to native applications. This file should not import the dart:html library and should contain any functions or variables that are specific to native applications. For example, the following code contains an empty reload() function and a cookie variable that stores a cookie value:

void reload() {}

String cookie = "";

The third file, switch_native_web.dart, will contain code that allows you to switch between native and web code. This file should import both the native.dart and web.dart files and contain a class that allows you to access functions and variables from either file depending on whether the application is running on a web or native platform. For example, the following code contains a SwitchNativeWeb class that allows you to access either the reload() function from web.dart or the empty reload() function from native.dart depending on which platform the application is running on:

import 'native.dart' if (dart.library.html) 'web.dart' as switch_value;

class SwitchNativeWeb {

  static String cookie = switch_value.cookie;

  static void reloadWeb() {
    switch_value.reload();
  }
}

By creating these three files, you can easily switch between native and web code depending on which platform your application is running on. This will allow you to write code that is optimized for both platforms without having to duplicate code or maintain two separate versions of your application.

// You can use like below code.

String cookie = SwitchNativeWeb.cookie; 
.
.
onTap:(){
   SwitchNativeWeb.reloadWeb();
}
.
.

Unlocking the Power of Generics in Dart: Using List, Set, Map, and Queue Collections

Esmaeil Ahmadipour — Wed, 08 Mar 2023 19:47:58 +0000

For example, a List can only hold strings, a Set can only hold integers, a Map can only hold key-value pairs where the key is a string and the value is an integer, and a Queue can only hold strings.

1.𝗚𝗲𝗻𝗲𝗿𝗶𝗰 𝗟𝗶𝘀𝘁

In Dart, a List is simply an ordered group of objects. A list is simple an implementation of an array.

Example:

List<T> list = new List<String>();

list.add("John");

list.add("Mary");

list.add("Bob");

2.𝗚𝗲𝗻𝗲𝗿𝗶𝗰 𝗦𝗲𝘁

In Dart, a Set represents a collection of objects in which each object can exist only once.

Example:

Set<T> set = new Set<Product>();

set.add(new Product("Shirt"));

set.add(new Product("Pants"));

set.add(new Product("Hat"));

3.𝗚𝗲𝗻𝗲𝗿𝗶𝗰 𝗠𝗮𝗽

In Dart, Map is a dynamic collection of the key, value pairs.

Example:

Map<K, V> map = new Map<String, Customer>();

map["John"] = new Customer("John", 25);

map["Mary"] = new Customer("Mary", 30);

map["Bob"] = new Customer("Bob", 28);

4.𝗚𝗲𝗻𝗲𝗿𝗶𝗰 𝗤𝘂𝗲𝘂𝗲

Example:

Queue<T> queue = new Queue<Order>();

queue.add(new Order("Red Shirt"));

queue.add(new Order("Green Pants"));

queue.add(new Order("Blue Hat"));

5. 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Class & 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Functions
Generics can also be used to create custom classes and functions. This allows us to create classes and functions that can be used with any type of data.

Example:

// 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Class
class MyClass<T> { 
T data;
 MyClass(this.data);
   void printData() {
     print(data); } 
} 

// 𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Functions
void myFunction<T>(T data) {
   print(data); 
}

𝗚𝗲𝗻𝗲𝗿𝗶𝗰 Example In Flutter
In below example, we have created a generic class called MyClass that can be used to store any type of data.
We have also created a object called WidgetListItem that takes a MyClass object and displays the data stored in it.
And we have used generics to ensure that the data stored in the MyClass object is of the correct type and that the WidgetListItem object can be used with any type of data.

import 'package:flutter/material.dart';

class MyClass<T,K> {
  Map<T,K>  data;
  Map<String,String>? type;

  MyClass(this.data, [this.type]) {
//The "type" variable is used to show "runtimeType" of the "MyClass" variables.
    type = {"${data.entries.first.key.runtimeType}":"${data.entries.first.value.runtimeType}"};
  }
}

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // We defines 3 object from generic classes
    MyClass universityName_term = MyClass<String,int>({"CentralUniversity":3});
    MyClass salary_tax = MyClass<int,double>({1000:0.09});
    MyClass firstName_lastName = MyClass<String,String>({"Esmaeil":"Ahmadipour"});

    return MaterialApp(
      title: 'Generics Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Using Generics')),
        body: Center(
          child: Padding(
              padding: const EdgeInsets.all(48.0),
              child:Column(
                children: [
                  const WidgetListTitle(),
                  WidgetListItem(myClass: universityName_term,color: Colors.red.shade300),
                  WidgetListItem(myClass: salary_tax,color: Colors.green.shade300),
                  WidgetListItem(myClass: firstName_lastName,color: Colors.blue.shade300),
                ],
              )
          ),
        ),
      ),
    );
  }
}

class WidgetListTitle extends StatelessWidget {
  const WidgetListTitle({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: const [
        Text('Map Side'),
        Text('Side Value'),
        Text('ValueType'),
      ],
    );
  }
}

class WidgetListItem extends StatelessWidget {
  const WidgetListItem({
    Key? key,
    required this.myClass, required this.color,
  }) : super(key: key);

  final MyClass myClass;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      color: color,
      child: Column(
        children: <Widget>[

          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('Kay:'),
              Text('${myClass.data.entries.first.key}'),
              Text(myClass.type!.entries.first.key),
            ],
          ),
          const Divider(),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text('Value:'),
              Text('${myClass.data.entries.first.value}'),
              Text(myClass.type!.entries.first.value),
            ],
          ),
        ],
      ),
    );
  }
}

How to work javascript file in flutter web ?

Esmaeil Ahmadipour — Wed, 08 Mar 2023 19:39:27 +0000

One of the capabilities of using flutter for development is creating pwa output. Can we change the final web output (html file) with the commands we wrote in dart? Can we add a tag (like meta or p, …) to the html file with dart commands? You can see how to do this in the following article.

To start, use the default project (counter app) in flutter!

At the top of the main file we add this line:



import 'dart: js' as dartJsFile;

In setState from the _incrementCounter method we add this line:



dartJsFile.context.callMethod ('insertTag');

Now we need to write the JavaScript file. To do this, we need to write the following command in the app terminal:



flutter create.

Add your JavaScript file to the project as shown below:

In my example , I have to write a method called (insertTag) in my js file that adds new tags inside a tag called (seo). In the file (app .js) I created, I write the method (insertTag):



function insertTag () {
var tag = document.createElement ("meta");
tag.setAttribute ("name", "custom name");
tag.setAttribute ("content", "custom content");
var element = document.getElementById ("seo");
element.appendChild (tag);
}

And in the head of the index .html file, I call it.



<head> <script src = "app.js"> </script> </head>

And inside the body, I define a tag called seo.



<body> <div id = "seo"> </div>

Now, after performing deploy operations on the server or localhost, you can add a new tag to your file (index.html) each time you press the (+) button.