# Collection data

{% hint style="info" %}
**Use tip:** At first, you'll have to install **Pulse-X** package. Here's [the installation tip.](https://ye-lwin-oo-1.gitbook.io/pulse-x-state-management/pulse-x-overview/use-tip)
{% endhint %}

## Usage

Pulse-X has provided you with three different collection view models. You can use each of them as you need.

1. PulseXListViewModel
2. PulseXSetViewModel
3. PulseXMapViewModel

### Example 1 - PulseXListViewModel

Let's create a random user list generator using Pulse.

{% hint style="info" %}
First you have to add`faker` package which generate users in your `pubspec.yaml` file `dependencies:` section.
{% endhint %}

Create a `UserModel` class to create user model.

```dart
class UserModel {
  String name;
  String age;
  String job;
  String city;
  UserModel({
    required this.name,
    required this.age,
    required this.job,
    required this.city,
  });
}
```

Then, create a service that returns a new user. Here, I'll use abstraction to obey **Open/Close Principle**.

```dart
abstract class IUserService{
  UserModel getNewUser();
}

class UserServiceImpl extends IUserService {
  final faker = Faker();
  @override
  UserModel getNewUser() {
    String city = faker.address.city();
    String name = faker.person.name();
    DateTime birthDate =
        faker.date.dateTimeBetween(DateTime(1940), DateTime.now());
    int age = DateTime.now().year - birthDate.year;
    String job = faker.job.title();
    return UserModel(
      name: name,
      age: age.toString(),
      job: job,
      city: city,
    );
  }
}

class UserServiceImpl extends IUserService {
  final faker = Faker();
  @override
  UserModel getNewUser() {
    String city = faker.address.city();
    String name = faker.person.name();
    DateTime birthDate =
        faker.date.dateTimeBetween(DateTime(1940), DateTime.now());
    int age = DateTime.now().year - birthDate.year;
    String job = faker.job.title();
    return UserModel(
      name: name,
      age: age.toString(),
      job: job,
      city: city,
    );
  }
}

```

After that, you are ready to create a `ViewModel` which extends Pulse's `PulseListViewModel`. We'll pass `IUserService` in constructor to do dependency inversion. 

```dart

class UsersViewModel extends PulseListViewModel<UserModel> { // specify your data type so that you won't get confused with type conversion
  final IUserService service;
  UsersViewModel({
    required this.service,
  });

  void addUser() {
    UserModel user = service.getNewUser();
    addValue(user); // when you want to add something, use `addValue(T)` method from Pulse
    // it'll automatically add your data to list
  }
}
```

Lastly, we'll have to create a view that shows a list of users.

```dart
class UsersView extends StatelessWidget {
  UsersView({Key? key}) : super(key: key);
  final viewModel = UsersViewModel(service: UserServiceImpl()); // initialize your view model, later we'll use Pulse's service locator
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Users'),
      ),
      body: PulseBuilder( // reactive when added a new user
        viewModel: viewModel,
        builder: (context, model, _) {
          return model.value.isEmpty
              ? const Center(
                  child: Text('No users created!'),
                )
              : GridView.builder(
                  padding: const EdgeInsets.only(bottom: 80),
                  addAutomaticKeepAlives: true,
                  addRepaintBoundaries: true,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  ),
                  itemCount: model.value.length,
                  itemBuilder: (context, index) {
                    UserModel user = model.value[index];
                    return Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16.0),
                        color: Colors.amber.shade200,
                      ),
                      margin: const EdgeInsets.all(8.0),
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Text(
                            user.name,
                            maxLines: 8,
                            style: Theme.of(context).textTheme.titleMedium,
                          ),
                          Text(
                            '${user.age} years',
                          ),
                          Text(
                            user.job,
                            textAlign: TextAlign.center,
                          ),
                          Text(
                            user.city,
                          ),
                        ],
                      ),
                    );
                  },
                );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: viewModel.addUser, // add a new user 
        child: const Icon(Icons.person_add_alt_rounded),
      ),
    );
  }
}
```

🍾Congratulations!! You've completed list data management with Pulse.

{% hint style="success" %}
Complete source code can be found here. <https://github.com/YeLwinOo-Steve/rand_user>
{% endhint %}

🚧 Set and map management examples are coming soon .....


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ye-lwin-oo-1.gitbook.io/pulse-x-state-management/state-management/collection-data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.