Installation

Get started with reactiv in your Flutter project in just a few minutes. This guide will walk you through the installation process and initial setup.

Prerequisites

Before installing reactiv, make sure you have:

• Flutter SDK: Version 3.0.0 or higher
• Dart SDK: Version 2.17.0 or higher
• A Flutter project (existing or new)

You can check your versions with:

flutter --version
dart --version

Add reactiv to Your Project

1. Add to pubspec.yaml

Add reactiv to your project's dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  reactiv: ^1.1.0

2. Install the Package

Run the following command in your project directory:

flutter pub get

This will download and install reactiv and its dependencies.

3. Import reactiv

In your Dart files where you want to use reactiv, add the import:

import 'package:reactiv/reactiv.dart';

Verify Installation

Create a simple test to verify reactiv is working correctly:

import 'package:flutter/material.dart';
import 'package:reactiv/reactiv.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'reactiv Test',
      home: TestScreen(),
    );
  }
}

class TestScreen extends StatelessWidget {
  // Create a simple reactive value
  final counter = ReactiveInt(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('reactiv Test')),
      body: Center(
        child: ReactiveBuilder(
          reactiv: counter,
          builder: (context, value) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Counter: $value', style: TextStyle(fontSize: 24)),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () => counter.value++,
                  child: Text('Increment'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

Run your app with flutter run and tap the increment button. If the counter updates, reactiv is working correctly!

Development Dependencies (Optional)

For enhanced development experience, consider adding these dev dependencies:

dev_dependencies:
  flutter_test:
    sdk: flutter
  reactiv_test: ^1.0.0  # Testing utilities for reactiv
  build_runner: ^2.3.0  # For code generation (if using)

IDE Setup

VS Code Extensions

For the best development experience with VS Code, install:

• Flutter: Official Flutter extension
• Dart: Official Dart language support
• Flutter Widget Snippets: Helpful code snippets

Android Studio

Android Studio comes with built-in Flutter support. Make sure you have:

• Flutter Plugin: Installed and enabled
• Dart Plugin: Installed and enabled

Next Steps

Now that reactiv is installed, you're ready to:

1. Learn Basic Usage - Understanding reactive values and observers
2. Build Your First Example - Create a complete reactive app
3. Explore Advanced Features - Undo/redo, computed values, and more

Troubleshooting

Common Installation Issues

Problem: flutter pub get fails with dependency conflicts

Solution: Check your Flutter version and update if necessary:

flutter upgrade
flutter clean
flutter pub get

Problem: Import errors or "Package not found"

Solution: Ensure you've run flutter pub get and your IDE has refreshed:

flutter pub get
# In VS Code: Ctrl/Cmd + Shift + P → "Dart: Restart Analysis Server"

Problem: Hot reload not working with reactive values

Solution: reactiv supports hot reload, but complex state changes may require hot restart:

# Hot restart instead of hot reload
flutter run
# Press 'R' (capital R) for hot restart

Version Compatibility

Getting Help

If you encounter issues:

1. Check the GitHub Issues
2. Join our Discord Community
3. Post on Stack Overflow with the reactiv-flutter tag

What's Next?

Ready to start building reactive UIs? Continue to the Basic Usage Guide to learn the fundamentals of reactiv.