Getting started

Riverpod এর অভ্যন্তরীণ বিষয়ে ডুব দেওয়ার আগে বেসিক দিয়ে শুরু করা যাক: Riverpod ইন্সটল করা, এবং "Hello world" প্রোগ্রাম লেখা.

কি প্যাকেজ ইন্সটল করবেন

যে কোন কিছু করার আগে, আপনার খেয়াল রাখতে হবে Riverpod কয়েকটি প্যাকেজ এর মধ্যে ভাগ করা রয়েছে, সামান্য ব্যবহারবিধি এর পার্থক্য রেখে। আপনি Riverpod এর যে ভ্যারিয়েন্টটি ইন্সটল করবেন তা আপনার এ্যাপ এর উপর নির্ভর করে।

কোন প্যাকেজ ব্যবহার করতে হবে তা নির্ধারণ করতে আপনি নিম্নলিখিত টেবিলটি উল্লেখ করতে পারেন:

এ্যাপ টাইপ	প্যাকেজ এর নাম	ব্যাখ্যা
Flutter + flutter_hooks	hooks_riverpod	একইসাথে flutter_hooks এবং Riverpod ব্যবহার করতে পারবেন.
Flutter uniquement	flutter_riverpod	ফ্লাটার এ Riverpod ব্যবহার করার একটি সহজ উপায়.
Dart uniquement (ফ্লাটার ছাড়া)	riverpod	একটি Riverpod ভার্সন যেটিতে ফ্লাটার এর কোন ক্লাস নেই.

ইন্সটল প্রক্রিয়া

আপনি কোন প্যাকেজ ইনস্টল করতে চান তা জানার পরে, আপনার pubspec.yaml-এ নিম্নলিখিতগুলি যুক্ত করতে এগিয়ে যান:

Flutter + flutter_hooks

pubspec.yaml

environment:
  sdk: ">=2.12.0 <3.0.0"
  flutter: ">=2.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0
  hooks_riverpod: ^1.0.0-dev.11

তারপর টার্মিনালে রান করুন pub get.

Flutter

pubspec.yaml

environment:
  sdk: ">=2.12.0-0 <3.0.0"
  flutter: ">=2.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0-dev.11

তারপর টার্মিনালে রান করুন pub get.

Dart only

pubspec.yaml

environment:
  sdk: ">=2.12.0-0 <3.0.0"

dependencies:
  riverpod: ^1.0.0-dev.10

তারপর টার্মিনালে রান করুন pub get.

এটাই, আপনি আপনার এ্যাপে Riverpod এড করে ফেলেছেন!

Usage example: Hello world

এখন আমরা যখন Riverpod ইন্সটল করে ফেলছি, ব্যবহার শুরু করা যাক.

নিচের কোড স্নিপেট টি দেখে বুঝা যায়, নতুন ডিপেন্ডেন্সী ব্যবহার করে কিভাবে আমরা "Hello World" বানাতে পারি:

Flutter + flutter_hooks

lib/main.dart

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

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
    // This is where the state of our providers will be stored.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Note: MyApp is a HookConsumerWidget, from hooks_riverpod.
class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

যা আপনি তখন flutter run দিয়ে এক্সিকিউট করতে পারবেন। এটি আপনার ডিভাইসে "Hello World" রেন্ডার করবে।

Flutter

lib/main.dart

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

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  runApp(
    // For widgets to be able to read providers, we need to wrap the entire
    // application in a "ProviderScope" widget.
    // This is where the state of our providers will be stored.
    ProviderScope(
      child: MyApp(),
    ),
  );
}

// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Example')),
        body: Center(
          child: Text(value),
        ),
      ),
    );
  }
}

Which you can then execute with flutter run.
This will render "Hello world" in on your device.

যা আপনি তখন flutter run দিয়ে এক্সিকিউট করতে পারবেন। এটি আপনার ডিভাইসে "Hello World" রেন্ডার করবে।

Dart only

lib/main.dart

import 'package:riverpod/riverpod.dart';

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
  // This object is where the state of our providers will be stored.
  final container = ProviderContainer();

  // Thanks to "container", we can read our provider.
  final value = container.read(helloWorldProvider);

  print(value); // Hello world
}

যেটি আপনি এক্সিকিউট করতে পারবেন dart lib/main.dart.
এটি কনসোল এ "Hello world" প্রিন্ট করতে পারবে.

আরও এগিয়ে যাওয়া: কোড স্নিপেট ইনস্টল করা

যদি আপনি Flutter এবং Vscode ব্যবহার করেন, তাহলে আপনি এই এক্সটেনশেন ইন্সটল করতে পারেন Flutter Riverpod Snippets

যদি আপনি Flutter এবং Android Studio/IntelliJ ব্যবহার করেন, তাহলে আপনি এই প্লাগিন ইন্সটল করতে পারেন Flutter Riverpod Snippets