> 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/stream-data.md).

# Stream 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

**Stream data management** is difficult. With **Pulse-X**, you won't have to use StreamController or Stream, or listen to StreamController. Pulse-X provides you with **PulseXStreamViewModel** class that you can extend and **PulseXStreamBuilder** for reactive UI.

Now, we'll create a realtime clock project that uses Stream data with Pulse-X.

{% hint style="info" %}
First, you'll need to install `intl` package to convert date format.
{% endhint %}

Then, start creating a `TimerViewModel` class like this.

```dart
class TimerViewModel extends PulseXStreamViewModel<String> { // specify stream data type
  late Timer _timer;
  final DateFormat formattedDate = DateFormat('h:mm:ss a'); // convert date format
  void addDateTime() {
    _timer = Timer.periodic(
      const Duration(seconds: 1),
          (timer) {
        String currentTime = formattedDate.format(DateTime.now());
        addValue(currentTime); // Pulse will automatically add data via sink 
      },
    );
  }

  @override
  void onDispose() {
    _timer.cancel(); // cancel your timer or it'll probably make memory leak
  }
}
```

<mark style="background-color:green;">See! You don't even use stream here</mark>. Because Pulse is handling Stream automatically.

Then, it's time to create `TimerView` class.

```dart
final amber500 = Colors.amber.shade500;

class TimerView extends StatefulWidget {
  const TimerView({Key? key}) : super(key: key);

  @override
  State<TimerView> createState() => _TimerViewState();
}

class _TimerViewState extends State<TimerView> {
  final timerViewModel = TimerViewModel(); // create timer view model
  @override
  void initState() {
    super.initState();
    timerViewModel.addDateTime(); // add stream data
  }

  @override
  void dispose() {
    timerViewModel.onDispose(); // dispose view model to cancel timer
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Timer'),
      ),
      body: Center(
        child: PulseXStreamBuilder( // for reactive UI
          viewModel: timerViewModel,
          builder: (_, viewModel, snapshot) { // three parameters -context,view model, snapshot
            // you have to use snapshot to retrieve stream data
            if (snapshot.hasData) {
              return TimerLabel(time: snapshot.data.toString());
            } else if (snapshot.hasError) {
              return const Text('Something went wrong');
            }
            return CupertinoActivityIndicator(
              radius: 20,
              color: amber500,
            );
          },
        ),
      ),
    );
  }
}

class TimerLabel extends StatelessWidget {
  const TimerLabel({Key? key, required this.time}) : super(key: key);
  final String time;
  @override
  Widget build(BuildContext context) {
    return Text(
      time,
      style: Theme.of(context).textTheme.displayLarge?.copyWith(
        color: amber500,
      ),
    );
  }
}

```

😎 Ez done!!&#x20;

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.