Flutter: how can I use service when using riverpod provider?

just start learning about riverpod and I want to use FlutterSecureStorage inside provider
the problem is I don't know if what I did is right or not

I want to create a service and implement some methods to help me use FlutterSecureStorage the use this service with Provider so I can access it from all the app

here's the code:

storage_service.dart

class StorageService {
final _secureStorage = const FlutterSecureStorage();
AndroidOptions _getAndroidOptions() => const AndroidOptions(
encryptedSharedPreferences: true,
);
Future<void> writeSecureData(StorageItem newItem) async {
await _secureStorage.write(
key: newItem.key, value: newItem.value, aOptions: _getAndroidOptions());
}
...
Future<List<StorageItem>> readAllSecureData() async {
var allData = await _secureStorage.readAll(aOptions: _getAndroidOptions());
List<StorageItem> list =
allData.entries.map((e) => StorageItem(e.key, e.value)).toList();
return list;
}
...
}
final storageServiceProvider = Provider((ref) => StorageService());

Home Screen:

class HomeScreen extends ConsumerStatefulWidget {
const HomeScreen({super.key});
@override
ConsumerState<ConsumerStatefulWidget> createState() => _HomeScreenState();
}
class _HomeScreenState extends ConsumerState<HomeScreen> {
@override
Widget build(BuildContext context) {
final storageService = ref.watch(storageServiceProvider);
List<StorageItem> data = [];
storageService.readAllSecureData().then((value) => data = value);
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
'HomeScreen',
),
Expanded(
flex: 2,
child: ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return Column(
children: [
Text('Key: ${data[index].key}'),
Text('Value: ${data[index].value}'),
],
);
},
),
),
Expanded(
flex: 1,
child: TextButton(
onPressed: () async {
final List<StorageItem> st =
await storageService.readAllSecureData();
debugPrint('button Pressed ${st.length}');
st.map(
(e) => debugPrint('Key: ${e.key} | Value: ${e.value}'));
final StorageItem newItem = StorageItem('sup', 'test');
storageService.writeSecureData(newItem);
// context.goNamed(AppRoutingConstans.loginScreenRouteName);
},
style: TextButton.styleFrom(
backgroundColor: Colors.amber,
minimumSize: const Size(50, 50),
padding: const EdgeInsets.symmetric(horizontal: 148.0),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
),
child: const Text(
'Go To Login Screen',
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
);
;
}
}

You can leave it the way it is. However, something needs to be done about this line:

storageService.readAllSecureData().then((value) => data = value);

Two options to choose from:

• use FutureBuilder or
• use setState within then:

storageService.readAllSecureData().then((value) {
  setState((){data = value;});
});

Next, you need to put it all in initState:

@override
void initState() {
  super.initState();

  final storageService = ref.read(storageServiceProvider);
  storageService.readAllSecureData().then((value) {
    setState((){data = value;});
  });
}

and add the creation of the list to the fields of the _HomeScreenState class:

class _HomeScreenState extends ConsumerState<HomeScreen> {
  List<StorageItem> data = [];

...

Next, you need to think about the right architecture and Single-responsibility principle. Your interface should only display the already PREPARED information and nothing more. He must not know anything about the repository, about how to change the data already in place, and not have unnecessary ways to change the data.

Everything that a class can do must be passed as a dependency in the constructor, or (in our case, Riverpod) as ref.watch(onlyNecessaryMethodsProvider).

Therefore, it would be necessary to allocate all the logic of reference to the storage, the conversion of existing data in a separate widget helper class. Usually it is called PageController or PagePresenter, which contains all the logic for working with this page and the methods that will be called during user interactions

Update:

Nowadays, with the advent of Riverpod 2.0, you should be using exactly (Async)NotifierProvider to build your states. You can write all dependencies in it directly in the build method using ref.watch and the provider will rebuild correctly.