> For the complete documentation index, see [llms.txt](https://ye-lwin-oo-1.gitbook.io/pulse-x-state-management/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ye-lwin-oo-1.gitbook.io/pulse-x-state-management/state-management/collection-data.md).

# Collection data

{% hint style="info" %}
**Use tip:** At first, you'll have to install **Pulse-X** package. Here's [the installation tip.](/pulse-x-state-management/pulse-x-overview/use-tip.md)
{% 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 .....