flutter provider replaced with flutter_riverpod

2025-09-13 07:55:18 +00:00 · 2022-02-11 10:44:16 +06:00 · 2022-02-11 10:44:16 +06:00 · d05ec0099d
commit d05ec0099d
parent 88b201b24b
26 changed files with 472 additions and 484 deletions
--- a/lib/components/Album/AlbumCard.dart
+++ b/lib/components/Album/AlbumCard.dart
@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Album/AlbumView.dart';
 import 'package:spotube/components/Shared/PlaybuttonCard.dart';
@ -9,13 +9,13 @@ import 'package:spotube/helpers/simple-track-to-track.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyDI.dart';

-class AlbumCard extends StatelessWidget {
+class AlbumCard extends ConsumerWidget {
  final Album album;
  const AlbumCard(this.album, {Key? key}) : super(key: key);

  @override
-  Widget build(BuildContext context) {
-    Playback playback = context.watch<Playback>();
+  Widget build(BuildContext context, ref) {
+    Playback playback = ref.watch(playbackProvider);
    bool isPlaylistPlaying = playback.currentPlaylist != null &&
        playback.currentPlaylist!.id == album.id;

@ -34,7 +34,7 @@ class AlbumCard extends StatelessWidget {
        ));
      },
      onPlaybuttonPressed: () async {
-        SpotifyApi spotify = context.read<SpotifyDI>().spotifyApi;
+        SpotifyApi spotify = ref.read(spotifyProvider);
        if (isPlaylistPlaying) return;
        List<Track> tracks = (await spotify.albums.getTracks(album.id!).all())
            .map((track) => simpleTrackToTrack(track, album))
--- a/lib/components/Album/AlbumView.dart
+++ b/lib/components/Album/AlbumView.dart
@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/components/Shared/TracksTableView.dart';
@ -8,7 +8,7 @@ import 'package:spotube/helpers/simple-track-to-track.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyDI.dart';

-class AlbumView extends StatelessWidget {
+class AlbumView extends ConsumerWidget {
  final AlbumSimple album;
  const AlbumView(this.album, {Key? key}) : super(key: key);

@ -31,11 +31,11 @@ class AlbumView extends StatelessWidget {
  }

  @override
-  Widget build(BuildContext context) {
-    Playback playback = context.watch<Playback>();
+  Widget build(BuildContext context, ref) {
+    Playback playback = ref.watch(playbackProvider);

    var isPlaylistPlaying = playback.currentPlaylist?.id == album.id;
-    SpotifyApi spotify = context.watch<SpotifyDI>().spotifyApi;
+    SpotifyApi spotify = ref.watch(spotifyProvider);
    return Scaffold(
      body: FutureBuilder<Iterable<TrackSimple>>(
          future: spotify.albums.getTracks(album.id!).all(),
--- a/lib/components/Artist/ArtistAlbumView.dart
+++ b/lib/components/Artist/ArtistAlbumView.dart
@ -1,12 +1,12 @@
 import 'package:flutter/material.dart' hide Page;
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
-import 'package:provider/provider.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Album/AlbumCard.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/provider/SpotifyDI.dart';

-class ArtistAlbumView extends StatefulWidget {
+class ArtistAlbumView extends ConsumerStatefulWidget {
  final String artistId;
  final String artistName;
  const ArtistAlbumView(
@ -16,10 +16,10 @@ class ArtistAlbumView extends StatefulWidget {
  }) : super(key: key);

  @override
-  State<ArtistAlbumView> createState() => _ArtistAlbumViewState();
+  ConsumerState<ArtistAlbumView> createState() => _ArtistAlbumViewState();
 }

-class _ArtistAlbumViewState extends State<ArtistAlbumView> {
+class _ArtistAlbumViewState extends ConsumerState<ArtistAlbumView> {
  final PagingController<int, Album> _pagingController =
      PagingController<int, Album>(firstPageKey: 0);

@ -39,10 +39,9 @@ class _ArtistAlbumViewState extends State<ArtistAlbumView> {

  _fetchPage(int pageKey) async {
    try {
-      SpotifyDI data = context.read<SpotifyDI>();
-      Page<Album> albums = await data.spotifyApi.artists
-          .albums(widget.artistId)
-          .getPage(8, pageKey);
+      SpotifyApi spotifyApi = ref.watch(spotifyProvider);
+      Page<Album> albums =
+          await spotifyApi.artists.albums(widget.artistId).getPage(8, pageKey);

      var items = albums.items!.toList();

--- a/lib/components/Artist/ArtistProfile.dart
+++ b/lib/components/Artist/ArtistProfile.dart
@ -1,7 +1,7 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Album/AlbumCard.dart';
 import 'package:spotube/components/Artist/ArtistAlbumView.dart';
@ -14,7 +14,7 @@ import 'package:spotube/helpers/zero-pad-num-str.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyDI.dart';

-class ArtistProfile extends StatefulWidget {
+class ArtistProfile extends ConsumerStatefulWidget {
  final String artistId;
  const ArtistProfile(this.artistId, {Key? key}) : super(key: key);

@ -22,10 +22,10 @@ class ArtistProfile extends StatefulWidget {
  _ArtistProfileState createState() => _ArtistProfileState();
 }

-class _ArtistProfileState extends State<ArtistProfile> {
+class _ArtistProfileState extends ConsumerState<ArtistProfile> {
  @override
  Widget build(BuildContext context) {
-    SpotifyApi spotify = context.watch<SpotifyDI>().spotifyApi;
+    SpotifyApi spotify = ref.watch(spotifyProvider);
    return Scaffold(
      appBar: const PageWindowTitleBar(
        leading: BackButton(),
@ -134,7 +134,7 @@ class _ArtistProfileState extends State<ArtistProfile> {
                      return const Center(
                          child: CircularProgressIndicator.adaptive());
                    }
-                    Playback playback = context.watch<Playback>();
+                    Playback playback = ref.watch(playbackProvider);
                    var isPlaylistPlaying =
                        playback.currentPlaylist?.id == snapshot.data?.id;
                    playPlaylist(List<Track> tracks, {Track? currentTrack}) {
--- a/lib/components/Category/CategoryCard.dart
+++ b/lib/components/Category/CategoryCard.dart
@ -1,5 +1,5 @@
 import 'package:flutter/material.dart' hide Page;
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Playlist/PlaylistCard.dart';
 import 'package:spotube/components/Playlist/PlaylistGenreView.dart';
@ -51,14 +51,15 @@ class _CategoryCardState extends State<CategoryCard> {
            ],
          ),
        ),
-        Consumer<SpotifyDI>(
-          builder: (context, data, child) {
+        Consumer(
+          builder: (context, ref, child) {
+            SpotifyApi spotifyApi = ref.watch(spotifyProvider);
            return FutureBuilder<Iterable<PlaylistSimple>>(
                future: widget.playlists == null
                    ? (widget.category.id != "user-featured-playlists"
-                            ? data.spotifyApi.playlists
+                            ? spotifyApi.playlists
                                .getByCategoryId(widget.category.id!)
-                            : data.spotifyApi.playlists.featured)
+                            : spotifyApi.playlists.featured)
                        .getPage(4, 0)
                        .then((value) => value.items ?? [])
                    : Future.value(widget.playlists),
--- a/lib/components/Home.dart
+++ b/lib/components/Home.dart
@ -3,8 +3,8 @@ import 'dart:io';
 import 'package:bitsdojo_window/bitsdojo_window.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart' hide Page;
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
-import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:oauth2/oauth2.dart' show AuthorizationException;
 import 'package:spotify/spotify.dart' hide Image, Player, Search;
@ -33,14 +33,14 @@ List<String> spotifyScopes = [
  "playlist-read-collaborative"
 ];

-class Home extends StatefulWidget {
+class Home extends ConsumerStatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
 }

-class _HomeState extends State<Home> {
+class _HomeState extends ConsumerState<Home> {
  final PagingController<int, Category> _pagingController =
      PagingController(firstPageKey: 0);

@ -63,7 +63,7 @@ class _HomeState extends State<Home> {
      DateTime? expiration =
          expirationStr != null ? DateTime.parse(expirationStr) : null;
      try {
-        Auth authProvider = context.read<Auth>();
+        Auth auth = ref.read(authProvider);

        if (clientId != null && clientSecret != null) {
          SpotifyApi spotifyApi = SpotifyApi(
@ -78,7 +78,7 @@ class _HomeState extends State<Home> {
          );
          SpotifyApiCredentials credentials = await spotifyApi.getCredentials();
          if (credentials.accessToken?.isNotEmpty ?? false) {
-            authProvider.setAuthState(
+            auth.setAuthState(
              clientId: clientId,
              clientSecret: clientSecret,
              accessToken:
@ -91,8 +91,8 @@ class _HomeState extends State<Home> {
        }
        _pagingController.addPageRequestListener((pageKey) async {
          try {
-            SpotifyDI data = context.read<SpotifyDI>();
-            Page<Category> categories = await data.spotifyApi.categories
+            SpotifyApi spotifyApi = ref.read(spotifyProvider);
+            Page<Category> categories = await spotifyApi.categories
                .list(country: "US")
                .getPage(15, pageKey);

@ -113,10 +113,10 @@ class _HomeState extends State<Home> {
            _pagingController.error = e;
          }
        });
-      } on AuthorizationException catch (e) {
+      } on AuthorizationException catch (_) {
        if (clientId != null && clientSecret != null) {
          oauthLogin(
-            context,
+            ref.read(authProvider),
            clientId: clientId,
            clientSecret: clientSecret,
          );
@ -136,8 +136,9 @@ class _HomeState extends State<Home> {

  @override
  Widget build(BuildContext context) {
-    Auth authProvider = Provider.of<Auth>(context);
-    if (!authProvider.isLoggedIn) {
+    Auth auth = ref.watch(authProvider);
+    SpotifyApi spotify = ref.watch(spotifyProvider);
+    if (!auth.isLoggedIn) {
      return const Login();
    }

@ -199,49 +200,45 @@ class _HomeState extends State<Home> {
                          style: Theme.of(context).textTheme.headline4),
                    ]),
                  ),
-                  trailing:
-                      Consumer<SpotifyDI>(builder: (context, data, widget) {
-                    return FutureBuilder<User>(
-                      future: data.spotifyApi.me.get(),
-                      builder: (context, snapshot) {
-                        var avatarImg = imageToUrlString(snapshot.data?.images,
-                            index: (snapshot.data?.images?.length ?? 1) - 1);
-                        return Padding(
-                          padding: const EdgeInsets.all(16),
-                          child: Row(
-                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                            children: [
-                              Row(
-                                children: [
-                                  CircleAvatar(
-                                    backgroundImage:
-                                        CachedNetworkImageProvider(avatarImg),
+                  trailing: FutureBuilder<User>(
+                    future: spotify.me.get(),
+                    builder: (context, snapshot) {
+                      var avatarImg = imageToUrlString(snapshot.data?.images,
+                          index: (snapshot.data?.images?.length ?? 1) - 1);
+                      return Padding(
+                        padding: const EdgeInsets.all(16),
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Row(
+                              children: [
+                                CircleAvatar(
+                                  backgroundImage:
+                                      CachedNetworkImageProvider(avatarImg),
+                                ),
+                                const SizedBox(width: 10),
+                                Text(
+                                  snapshot.data?.displayName ?? "User's name",
+                                  style: const TextStyle(
+                                    fontWeight: FontWeight.bold,
                                  ),
-                                  const SizedBox(width: 10),
-                                  Text(
-                                    snapshot.data?.displayName ?? "User's name",
-                                    style: const TextStyle(
-                                      fontWeight: FontWeight.bold,
-                                    ),
-                                  ),
-                                ],
-                              ),
-                              IconButton(
-                                  icon: const Icon(Icons.settings_outlined),
-                                  onPressed: () {
-                                    Navigator.of(context)
-                                        .push(MaterialPageRoute(
-                                      builder: (context) {
-                                        return const Settings();
-                                      },
-                                    ));
-                                  }),
-                            ],
-                          ),
-                        );
-                      },
-                    );
-                  }),
+                                ),
+                              ],
+                            ),
+                            IconButton(
+                                icon: const Icon(Icons.settings_outlined),
+                                onPressed: () {
+                                  Navigator.of(context).push(MaterialPageRoute(
+                                    builder: (context) {
+                                      return const Settings();
+                                    },
+                                  ));
+                                }),
+                          ],
+                        ),
+                      );
+                    },
+                  ),
                ),
                // contents of the spotify
                if (_selectedIndex == 0)
--- a/lib/components/Library/UserArtists.dart
+++ b/lib/components/Library/UserArtists.dart
@ -1,18 +1,18 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
-import 'package:provider/provider.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Artist/ArtistCard.dart';
 import 'package:spotube/provider/SpotifyDI.dart';

-class UserArtists extends StatefulWidget {
+class UserArtists extends ConsumerStatefulWidget {
  const UserArtists({Key? key}) : super(key: key);

  @override
-  State<UserArtists> createState() => _UserArtistsState();
+  ConsumerState<UserArtists> createState() => _UserArtistsState();
 }

-class _UserArtistsState extends State<UserArtists> {
+class _UserArtistsState extends ConsumerState<UserArtists> {
  final PagingController<String, Artist> _pagingController =
      PagingController(firstPageKey: "");

@ -22,8 +22,8 @@ class _UserArtistsState extends State<UserArtists> {
    WidgetsBinding.instance?.addPostFrameCallback((timestamp) {
      _pagingController.addPageRequestListener((pageKey) async {
        try {
-          SpotifyDI data = context.read<SpotifyDI>();
-          CursorPage<Artist> artists = await data.spotifyApi.me
+          SpotifyApi spotifyApi = ref.read(spotifyProvider);
+          CursorPage<Artist> artists = await spotifyApi.me
              .following(FollowingType.artist)
              .getPage(15, pageKey);

@ -51,10 +51,10 @@ class _UserArtistsState extends State<UserArtists> {

  @override
  Widget build(BuildContext context) {
-    SpotifyDI data = context.watch<SpotifyDI>();
+    SpotifyApi spotifyApi = ref.watch(spotifyProvider);

    return FutureBuilder<CursorPage<Artist>>(
-      future: data.spotifyApi.me.following(FollowingType.artist).first(),
+      future: spotifyApi.me.following(FollowingType.artist).first(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const Center(child: CircularProgressIndicator.adaptive());
--- a/lib/components/Library/UserPlaylists.dart
+++ b/lib/components/Library/UserPlaylists.dart
@ -1,18 +1,18 @@
 import 'package:flutter/material.dart' hide Image;
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Playlist/PlaylistCard.dart';
 import 'package:spotube/provider/SpotifyDI.dart';

-class UserPlaylists extends StatelessWidget {
+class UserPlaylists extends ConsumerWidget {
  const UserPlaylists({Key? key}) : super(key: key);

  @override
-  Widget build(BuildContext context) {
-    SpotifyDI data = context.watch<SpotifyDI>();
+  Widget build(BuildContext context, ref) {
+    SpotifyApi spotifyApi = ref.watch(spotifyProvider);

    return FutureBuilder<Iterable<PlaylistSimple>>(
-      future: data.spotifyApi.playlists.me.all(),
+      future: spotifyApi.playlists.me.all(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const Center(child: CircularProgressIndicator.adaptive());
--- a/lib/components/Login.dart
+++ b/lib/components/Login.dart
@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:spotube/components/Shared/Hyperlink.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
@ -8,14 +8,14 @@ import 'package:spotube/models/LocalStorageKeys.dart';
 import 'package:spotube/provider/Auth.dart';
 import 'package:spotube/provider/UserPreferences.dart';

-class Login extends StatefulWidget {
+class Login extends ConsumerStatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  _LoginState createState() => _LoginState();
 }

-class _LoginState extends State<Login> {
+class _LoginState extends ConsumerState<Login> {
  String clientId = "";
  String clientSecret = "";
  String accessToken = "";
@ -28,7 +28,8 @@ class _LoginState extends State<Login> {
          _fieldError = true;
        });
      }
-      await oauthLogin(context, clientId: clientId, clientSecret: clientSecret);
+      await oauthLogin(ref.read(authProvider),
+          clientId: clientId, clientSecret: clientSecret);
    } catch (e) {
      print("[Login.handleLogin] $e");
    }
@ -36,99 +37,95 @@ class _LoginState extends State<Login> {

  @override
  Widget build(BuildContext context) {
-    return Consumer<Auth>(
-      builder: (context, authState, child) {
-        return Scaffold(
-          appBar: const PageWindowTitleBar(),
-          body: SingleChildScrollView(
-            child: Center(
-              child: Column(
-                children: [
-                  Image.asset(
-                    "assets/spotube-logo.png",
-                    width: 400,
-                    height: 400,
-                  ),
-                  Text("Add your spotify credentials to get started",
-                      style: Theme.of(context).textTheme.headline4),
-                  const Text(
-                      "Don't worry, any of your credentials won't be collected or shared with anyone"),
-                  const Hyperlink("How to get these client-id & client-secret?",
-                      "https://github.com/KRTirtho/spotube#configuration"),
-                  const SizedBox(
-                    height: 10,
-                  ),
-                  Container(
-                    constraints: const BoxConstraints(
-                      maxWidth: 400,
-                    ),
-                    child: Column(
-                      children: [
-                        TextField(
-                          decoration: const InputDecoration(
-                            hintText: "Spotify Client ID",
-                            label: Text("ClientID"),
-                          ),
-                          onChanged: (value) {
-                            setState(() {
-                              clientId = value;
-                            });
-                          },
-                        ),
-                        const SizedBox(height: 10),
-                        TextField(
-                          decoration: const InputDecoration(
-                            hintText: "Spotify Client Secret",
-                            label: Text("Client Secret"),
-                          ),
-                          onChanged: (value) {
-                            setState(() {
-                              clientSecret = value;
-                            });
-                          },
-                        ),
-                        const SizedBox(height: 10),
-                        const Divider(color: Colors.grey),
-                        const SizedBox(height: 10),
-                        TextField(
-                          decoration: const InputDecoration(
-                            label: Text("Genius Access Token (optional)"),
-                          ),
-                          onChanged: (value) {
-                            setState(() {
-                              accessToken = value;
-                            });
-                          },
-                        ),
-                        const SizedBox(
-                          height: 10,
-                        ),
-                        ElevatedButton(
-                          onPressed: () async {
-                            await handleLogin(authState);
-                            UserPreferences preferences =
-                                context.read<UserPreferences>();
-                            SharedPreferences localStorage =
-                                await SharedPreferences.getInstance();
-                            preferences.setGeniusAccessToken(accessToken);
-                            await localStorage.setString(
-                                LocalStorageKeys.geniusAccessToken,
-                                accessToken);
-                            setState(() {
-                              accessToken = "";
-                            });
-                          },
-                          child: const Text("Submit"),
-                        )
-                      ],
-                    ),
-                  ),
-                ],
+    Auth authState = ref.watch(authProvider);
+    return Scaffold(
+      appBar: const PageWindowTitleBar(),
+      body: SingleChildScrollView(
+        child: Center(
+          child: Column(
+            children: [
+              Image.asset(
+                "assets/spotube-logo.png",
+                width: 400,
+                height: 400,
              ),
-            ),
+              Text("Add your spotify credentials to get started",
+                  style: Theme.of(context).textTheme.headline4),
+              const Text(
+                  "Don't worry, any of your credentials won't be collected or shared with anyone"),
+              const Hyperlink("How to get these client-id & client-secret?",
+                  "https://github.com/KRTirtho/spotube#configuration"),
+              const SizedBox(
+                height: 10,
+              ),
+              Container(
+                constraints: const BoxConstraints(
+                  maxWidth: 400,
+                ),
+                child: Column(
+                  children: [
+                    TextField(
+                      decoration: const InputDecoration(
+                        hintText: "Spotify Client ID",
+                        label: Text("ClientID"),
+                      ),
+                      onChanged: (value) {
+                        setState(() {
+                          clientId = value;
+                        });
+                      },
+                    ),
+                    const SizedBox(height: 10),
+                    TextField(
+                      decoration: const InputDecoration(
+                        hintText: "Spotify Client Secret",
+                        label: Text("Client Secret"),
+                      ),
+                      onChanged: (value) {
+                        setState(() {
+                          clientSecret = value;
+                        });
+                      },
+                    ),
+                    const SizedBox(height: 10),
+                    const Divider(color: Colors.grey),
+                    const SizedBox(height: 10),
+                    TextField(
+                      decoration: const InputDecoration(
+                        label: Text("Genius Access Token (optional)"),
+                      ),
+                      onChanged: (value) {
+                        setState(() {
+                          accessToken = value;
+                        });
+                      },
+                    ),
+                    const SizedBox(
+                      height: 10,
+                    ),
+                    ElevatedButton(
+                      onPressed: () async {
+                        await handleLogin(authState);
+                        UserPreferences preferences =
+                            ref.read(userPreferencesProvider);
+                        SharedPreferences localStorage =
+                            await SharedPreferences.getInstance();
+                        preferences.setGeniusAccessToken(accessToken);
+                        await localStorage.setString(
+                            LocalStorageKeys.geniusAccessToken, accessToken);
+                        setState(() {
+                          accessToken = "";
+                        });
+                      },
+                      child: const Text("Submit"),
+                    )
+                  ],
+                ),
+              ),
+            ],
          ),
-        );
-      },
+        ),
+      ),
    );
  }
 }
--- a/lib/components/Lyrics.dart
+++ b/lib/components/Lyrics.dart
@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Settings.dart';
 import 'package:spotube/helpers/artist-to-string.dart';
@ -7,20 +7,20 @@ import 'package:spotube/helpers/getLyrics.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/UserPreferences.dart';

-class Lyrics extends StatefulWidget {
+class Lyrics extends ConsumerStatefulWidget {
  const Lyrics({Key? key}) : super(key: key);

  @override
-  State<Lyrics> createState() => _LyricsState();
+  ConsumerState<Lyrics> createState() => _LyricsState();
 }

-class _LyricsState extends State<Lyrics> {
+class _LyricsState extends ConsumerState<Lyrics> {
  Map<String, String> _lyrics = {};

  @override
  Widget build(BuildContext context) {
-    Playback playback = context.watch<Playback>();
-    UserPreferences userPreferences = context.watch<UserPreferences>();
+    Playback playback = ref.watch(playbackProvider);
+    UserPreferences userPreferences = ref.watch(userPreferencesProvider);

    bool hasToken = (userPreferences.geniusAccessToken != null ||
        (userPreferences.geniusAccessToken?.isNotEmpty ?? false));
--- a/lib/components/Player/Player.dart
+++ b/lib/components/Player/Player.dart
@ -1,6 +1,7 @@
 import 'dart:async';

 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:just_audio/just_audio.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Shared/DownloadTrackButton.dart';
@ -10,18 +11,17 @@ import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/helpers/search-youtube.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
 import 'package:youtube_explode_dart/youtube_explode_dart.dart';

-class Player extends StatefulWidget {
+class Player extends ConsumerStatefulWidget {
  const Player({Key? key}) : super(key: key);

  @override
  _PlayerState createState() => _PlayerState();
 }

-class _PlayerState extends State<Player> with WidgetsBindingObserver {
+class _PlayerState extends ConsumerState<Player> with WidgetsBindingObserver {
  late AudioPlayer player;
  bool _isPlaying = false;
  bool _shuffled = false;
@ -111,7 +111,7 @@ class _PlayerState extends State<Player> with WidgetsBindingObserver {
  }

  void _movePlaylistPositionBy(int pos) {
-    Playback playback = context.read<Playback>();
+    Playback playback = ref.read(playbackProvider);
    if (playback.currentTrack != null && playback.currentPlaylist != null) {
      int index = playback.currentPlaylist!.trackIds
              .indexOf(playback.currentTrack!.id!) +
@ -198,8 +198,9 @@ class _PlayerState extends State<Player> with WidgetsBindingObserver {
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).backgroundColor,
-      child: Consumer<Playback>(
-        builder: (context, playback, widget) {
+      child: Consumer(
+        builder: (context, ref, widget) {
+          Playback playback = ref.watch(playbackProvider);
          if (playback.currentPlaylist != null &&
              playback.currentTrack != null) {
            _playTrack(playback.currentTrack!, playback);
@ -348,10 +349,11 @@ class _PlayerState extends State<Player> with WidgetsBindingObserver {
                          DownloadTrackButton(
                            track: playback.currentTrack,
                          ),
-                          Consumer<SpotifyDI>(builder: (context, data, widget) {
+                          Consumer(builder: (context, ref, widget) {
+                            SpotifyApi spotifyApi = ref.watch(spotifyProvider);
                            return FutureBuilder<bool>(
                                future: playback.currentTrack?.id != null
-                                    ? data.spotifyApi.tracks.me
+                                    ? spotifyApi.tracks.me
                                        .containsOne(playback.currentTrack!.id!)
                                    : Future.value(false),
                                initialData: false,
@ -367,7 +369,7 @@ class _PlayerState extends State<Player> with WidgetsBindingObserver {
                                      onPressed: () {
                                        if (!isLiked &&
                                            playback.currentTrack?.id != null) {
-                                          data.spotifyApi.tracks.me
+                                          spotifyApi.tracks.me
                                              .saveOne(
                                                  playback.currentTrack!.id!)
                                              .then((value) => setState(() {}));
--- a/lib/components/Player/PlayerControls.dart
+++ b/lib/components/Player/PlayerControls.dart
@ -1,13 +1,13 @@
 import 'dart:async';

 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:hotkey_manager/hotkey_manager.dart';
 import 'package:spotube/helpers/zero-pad-num-str.dart';
 import 'package:spotube/models/GlobalKeyActions.dart';
 import 'package:spotube/provider/UserPreferences.dart';
-import 'package:provider/provider.dart';

-class PlayerControls extends StatefulWidget {
+class PlayerControls extends ConsumerStatefulWidget {
  final Stream<Duration> positionStream;
  final bool isPlaying;
  final Duration duration;
@ -38,7 +38,7 @@ class PlayerControls extends StatefulWidget {
  _PlayerControlsState createState() => _PlayerControlsState();
 }

-class _PlayerControlsState extends State<PlayerControls> {
+class _PlayerControlsState extends ConsumerState<PlayerControls> {
  StreamSubscription? _timePositionListener;
  late List<GlobalKeyActions> _hotKeys = [];

@ -88,7 +88,7 @@ class _PlayerControlsState extends State<PlayerControls> {

  @override
  Widget build(BuildContext context) {
-    UserPreferences preferences = context.watch<UserPreferences>();
+    UserPreferences preferences = ref.watch(userPreferencesProvider);
    _configureHotKeys(preferences);

    return Container(
--- a/lib/components/Playlist/PlaylistCard.dart
+++ b/lib/components/Playlist/PlaylistCard.dart
@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Playlist/PlaylistView.dart';
 import 'package:spotube/components/Shared/PlaybuttonCard.dart';
@ -7,17 +7,17 @@ import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyDI.dart';

-class PlaylistCard extends StatefulWidget {
+class PlaylistCard extends ConsumerStatefulWidget {
  final PlaylistSimple playlist;
  const PlaylistCard(this.playlist, {Key? key}) : super(key: key);
  @override
  _PlaylistCardState createState() => _PlaylistCardState();
 }

-class _PlaylistCardState extends State<PlaylistCard> {
+class _PlaylistCardState extends ConsumerState<PlaylistCard> {
  @override
  Widget build(BuildContext context) {
-    Playback playback = context.watch<Playback>();
+    Playback playback = ref.watch(playbackProvider);
    bool isPlaylistPlaying = playback.currentPlaylist != null &&
        playback.currentPlaylist!.id == widget.playlist.id;
    return PlaybuttonCard(
@ -33,13 +33,13 @@ class _PlaylistCardState extends State<PlaylistCard> {
      },
      onPlaybuttonPressed: () async {
        if (isPlaylistPlaying) return;
-        SpotifyDI data = context.read<SpotifyDI>();
+        SpotifyApi spotifyApi = ref.read(spotifyProvider);

        List<Track> tracks = (widget.playlist.id != "user-liked-tracks"
-                ? await data.spotifyApi.playlists
+                ? await spotifyApi.playlists
                    .getTracksByPlaylistId(widget.playlist.id!)
                    .all()
-                : await data.spotifyApi.tracks.me.saved
+                : await spotifyApi.tracks.me.saved
                    .all()
                    .then((tracks) => tracks.map((e) => e.track!)))
            .toList();
--- a/lib/components/Playlist/PlaylistGenreView.dart
+++ b/lib/components/Playlist/PlaylistGenreView.dart
@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/components/Playlist/PlaylistCard.dart';
@ -33,39 +33,42 @@ class _PlaylistGenreViewState extends State<PlaylistGenreView> {
            style: Theme.of(context).textTheme.headline4,
            textAlign: TextAlign.center,
          ),
-          Consumer<SpotifyDI>(
-            builder: (context, data, child) => Expanded(
-              child: SingleChildScrollView(
-                child: FutureBuilder<Iterable<PlaylistSimple>>(
-                    future: widget.playlists == null
-                        ? (widget.genreId != "user-featured-playlists"
-                            ? data.spotifyApi.playlists
-                                .getByCategoryId(widget.genreId)
-                                .all()
-                            : data.spotifyApi.playlists.featured.all())
-                        : Future.value(widget.playlists),
-                    builder: (context, snapshot) {
-                      if (snapshot.hasError) {
-                        return const Center(child: Text("Error occurred"));
-                      }
-                      if (!snapshot.hasData) {
-                        return const CircularProgressIndicator.adaptive();
-                      }
-                      return Center(
-                        child: Wrap(
-                          children: snapshot.data!
-                              .map(
-                                (playlist) => Padding(
-                                  padding: const EdgeInsets.all(8.0),
-                                  child: PlaylistCard(playlist),
-                                ),
-                              )
-                              .toList(),
-                        ),
-                      );
-                    }),
-              ),
-            ),
+          Consumer(
+            builder: (context, ref, child) {
+              SpotifyApi spotifyApi = ref.watch(spotifyProvider);
+              return Expanded(
+                child: SingleChildScrollView(
+                  child: FutureBuilder<Iterable<PlaylistSimple>>(
+                      future: widget.playlists == null
+                          ? (widget.genreId != "user-featured-playlists"
+                              ? spotifyApi.playlists
+                                  .getByCategoryId(widget.genreId)
+                                  .all()
+                              : spotifyApi.playlists.featured.all())
+                          : Future.value(widget.playlists),
+                      builder: (context, snapshot) {
+                        if (snapshot.hasError) {
+                          return const Center(child: Text("Error occurred"));
+                        }
+                        if (!snapshot.hasData) {
+                          return const CircularProgressIndicator.adaptive();
+                        }
+                        return Center(
+                          child: Wrap(
+                            children: snapshot.data!
+                                .map(
+                                  (playlist) => Padding(
+                                    padding: const EdgeInsets.all(8.0),
+                                    child: PlaylistCard(playlist),
+                                  ),
+                                )
+                                .toList(),
+                          ),
+                        );
+                      }),
+                ),
+              );
+            },
          )
        ],
      ),
--- a/lib/components/Playlist/PlaylistView.dart
+++ b/lib/components/Playlist/PlaylistView.dart
@ -1,20 +1,20 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/components/Shared/TracksTableView.dart';
 import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/provider/SpotifyDI.dart';

-class PlaylistView extends StatefulWidget {
+class PlaylistView extends ConsumerStatefulWidget {
  final PlaylistSimple playlist;
  const PlaylistView(this.playlist, {Key? key}) : super(key: key);
  @override
  _PlaylistViewState createState() => _PlaylistViewState();
 }

-class _PlaylistViewState extends State<PlaylistView> {
+class _PlaylistViewState extends ConsumerState<PlaylistView> {
  playPlaylist(Playback playback, List<Track> tracks, {Track? currentTrack}) {
    currentTrack ??= tracks.first;
    var isPlaylistPlaying = playback.currentPlaylist?.id != null &&
@ -36,71 +36,70 @@ class _PlaylistViewState extends State<PlaylistView> {

  @override
  Widget build(BuildContext context) {
-    Playback playback = context.watch<Playback>();
+    Playback playback = ref.watch(playbackProvider);
+    SpotifyApi spotifyApi = ref.watch(spotifyProvider);
    var isPlaylistPlaying = playback.currentPlaylist?.id != null &&
        playback.currentPlaylist?.id == widget.playlist.id;
-    return Consumer<SpotifyDI>(builder: (_, data, __) {
-      return Scaffold(
-        body: FutureBuilder<Iterable<Track>>(
-            future: widget.playlist.id != "user-liked-tracks"
-                ? data.spotifyApi.playlists
-                    .getTracksByPlaylistId(widget.playlist.id)
-                    .all()
-                : data.spotifyApi.tracks.me.saved
-                    .all()
-                    .then((tracks) => tracks.map((e) => e.track!)),
-            builder: (context, snapshot) {
-              List<Track> tracks = snapshot.data?.toList() ?? [];
-              return Column(
-                children: [
-                  PageWindowTitleBar(
-                    leading: Row(
-                      children: [
-                        // nav back
-                        const BackButton(),
-                        // heart playlist
-                        IconButton(
-                          icon: const Icon(Icons.favorite_outline_rounded),
-                          onPressed: () {},
+    return Scaffold(
+      body: FutureBuilder<Iterable<Track>>(
+          future: widget.playlist.id != "user-liked-tracks"
+              ? spotifyApi.playlists
+                  .getTracksByPlaylistId(widget.playlist.id)
+                  .all()
+              : spotifyApi.tracks.me.saved
+                  .all()
+                  .then((tracks) => tracks.map((e) => e.track!)),
+          builder: (context, snapshot) {
+            List<Track> tracks = snapshot.data?.toList() ?? [];
+            return Column(
+              children: [
+                PageWindowTitleBar(
+                  leading: Row(
+                    children: [
+                      // nav back
+                      const BackButton(),
+                      // heart playlist
+                      IconButton(
+                        icon: const Icon(Icons.favorite_outline_rounded),
+                        onPressed: () {},
+                      ),
+                      // play playlist
+                      IconButton(
+                        icon: Icon(
+                          isPlaylistPlaying
+                              ? Icons.stop_rounded
+                              : Icons.play_arrow_rounded,
                        ),
-                        // play playlist
-                        IconButton(
-                          icon: Icon(
-                            isPlaylistPlaying
-                                ? Icons.stop_rounded
-                                : Icons.play_arrow_rounded,
-                          ),
-                          onPressed: snapshot.hasData
-                              ? () => playPlaylist(playback, tracks)
-                              : null,
-                        )
-                      ],
-                    ),
+                        onPressed: snapshot.hasData
+                            ? () => playPlaylist(playback, tracks)
+                            : null,
+                      )
+                    ],
                  ),
-                  Center(
-                    child: Text(widget.playlist.name!,
-                        style: Theme.of(context).textTheme.headline4),
-                  ),
-                  snapshot.hasError
-                      ? const Center(child: Text("Error occurred"))
-                      : !snapshot.hasData
-                          ? const Expanded(
-                              child: Center(
-                                  child: CircularProgressIndicator.adaptive()),
-                            )
-                          : TracksTableView(
+                ),
+                Center(
+                  child: Text(widget.playlist.name!,
+                      style: Theme.of(context).textTheme.headline4),
+                ),
+                snapshot.hasError
+                    ? const Center(child: Text("Error occurred"))
+                    : !snapshot.hasData
+                        ? const Expanded(
+                            child: Center(
+                                child: CircularProgressIndicator.adaptive()),
+                          )
+                        : TracksTableView(
+                            tracks,
+                            onTrackPlayButtonPressed: (currentTrack) =>
+                                playPlaylist(
+                              playback,
                              tracks,
-                              onTrackPlayButtonPressed: (currentTrack) =>
-                                  playPlaylist(
-                                playback,
-                                tracks,
-                                currentTrack: currentTrack,
-                              ),
+                              currentTrack: currentTrack,
                            ),
-                ],
-              );
-            }),
-      );
-    });
+                          ),
+              ],
+            );
+          }),
+    );
  }
 }
--- a/lib/components/Search/Search.dart
+++ b/lib/components/Search/Search.dart
@ -1,5 +1,5 @@
 import 'package:flutter/material.dart' hide Page;
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Album/AlbumCard.dart';
 import 'package:spotube/components/Artist/ArtistCard.dart';
@ -11,14 +11,14 @@ import 'package:spotube/helpers/zero-pad-num-str.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyDI.dart';

-class Search extends StatefulWidget {
+class Search extends ConsumerStatefulWidget {
  const Search({Key? key}) : super(key: key);

  @override
-  State<Search> createState() => _SearchState();
+  ConsumerState<Search> createState() => _SearchState();
 }

-class _SearchState extends State<Search> {
+class _SearchState extends ConsumerState<Search> {
  late TextEditingController _controller;

  String searchTerm = "";
@ -31,7 +31,7 @@ class _SearchState extends State<Search> {

  @override
  Widget build(BuildContext context) {
-    SpotifyApi spotify = context.watch<SpotifyDI>().spotifyApi;
+    SpotifyApi spotify = ref.watch(spotifyProvider);

    return Expanded(
      child: Column(
@ -80,7 +80,7 @@ class _SearchState extends State<Search> {
              } else if (!snapshot.hasData && searchTerm.isEmpty) {
                return Container();
              }
-              Playback playback = context.watch<Playback>();
+              Playback playback = ref.watch(playbackProvider);
              List<AlbumSimple> albums = [];
              List<Artist> artists = [];
              List<Track> tracks = [];
--- a/lib/components/Settings.dart
+++ b/lib/components/Settings.dart
@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:hotkey_manager/hotkey_manager.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:spotube/components/Settings/SettingsHotkeyTile.dart';
 import 'package:spotube/components/Shared/Hyperlink.dart';
@ -10,14 +9,14 @@ import 'package:spotube/models/LocalStorageKeys.dart';
 import 'package:spotube/provider/Auth.dart';
 import 'package:spotube/provider/UserPreferences.dart';

-class Settings extends StatefulWidget {
+class Settings extends ConsumerStatefulWidget {
  const Settings({Key? key}) : super(key: key);

  @override
  _SettingsState createState() => _SettingsState();
 }

-class _SettingsState extends State<Settings> {
+class _SettingsState extends ConsumerState<Settings> {
  TextEditingController? _textEditingController;
  String? _geniusAccessToken;

@ -40,7 +39,7 @@ class _SettingsState extends State<Settings> {

  @override
  Widget build(BuildContext context) {
-    UserPreferences preferences = context.watch<UserPreferences>();
+    UserPreferences preferences = ref.watch(userPreferencesProvider);

    return Scaffold(
      appBar: PageWindowTitleBar(
@ -151,7 +150,7 @@ class _SettingsState extends State<Settings> {
            ),
            const SizedBox(height: 10),
            Builder(builder: (context) {
-              var auth = context.read<Auth>();
+              Auth auth = ref.watch(authProvider);
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
--- a/lib/components/Shared/TracksTableView.dart
+++ b/lib/components/Shared/TracksTableView.dart
@ -1,6 +1,6 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Album/AlbumView.dart';
 import 'package:spotube/components/Shared/LinkText.dart';
@ -9,7 +9,7 @@ import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/helpers/zero-pad-num-str.dart';
 import 'package:spotube/provider/Playback.dart';

-class TracksTableView extends StatelessWidget {
+class TracksTableView extends ConsumerWidget {
  final void Function(Track currentTrack)? onTrackPlayButtonPressed;
  final List<Track> tracks;
  const TracksTableView(this.tracks, {Key? key, this.onTrackPlayButtonPressed})
@ -97,8 +97,8 @@ class TracksTableView extends StatelessWidget {
  }

  @override
-  Widget build(BuildContext context) {
-    Playback playback = context.watch<Playback>();
+  Widget build(context, ref) {
+    Playback playback = ref.watch(playbackProvider);
    TextStyle tableHeadStyle =
        const TextStyle(fontWeight: FontWeight.bold, fontSize: 16);
    return Expanded(
--- a/lib/helpers/oauth-login.dart
+++ b/lib/helpers/oauth-login.dart
@ -1,5 +1,3 @@
-import 'package:flutter/cupertino.dart';
-import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Home.dart';
@ -9,7 +7,7 @@ import 'package:spotube/provider/Auth.dart';

 const redirectUri = "http://localhost:4304/auth/spotify/callback";

-Future<void> oauthLogin(BuildContext context,
+Future<void> oauthLogin(Auth auth,
    {required String clientId, required String clientSecret}) async {
  try {
    String? accessToken;
@ -50,7 +48,7 @@ Future<void> oauthLogin(BuildContext context,
      clientSecret,
    );

-    Provider.of<Auth>(context, listen: false).setAuthState(
+    auth.setAuthState(
      clientId: clientId,
      clientSecret: clientSecret,
      accessToken: accessToken,
--- a/lib/main.dart
+++ b/lib/main.dart
@ -1,20 +1,15 @@
 import 'package:bitsdojo_window/bitsdojo_window.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:hotkey_manager/hotkey_manager.dart';
-import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
-import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Home.dart';
 import 'package:spotube/models/LocalStorageKeys.dart';
-import 'package:spotube/provider/Auth.dart';
-import 'package:spotube/provider/Playback.dart';
-import 'package:spotube/provider/SpotifyDI.dart';
-import 'package:spotube/provider/UserPreferences.dart';

 void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await hotKeyManager.unregisterAll();
-  runApp(MyApp());
+  runApp(const ProviderScope(child: MyApp()));
  doWhenWindowReady(() {
    appWindow.minSize = const Size(900, 700);
    appWindow.size = const Size(900, 700);
@ -25,6 +20,8 @@ void main() async {
 }

 class MyApp extends StatefulWidget {
+  const MyApp({Key? key}) : super(key: key);
+
  static _MyAppState? of(BuildContext context) =>
      context.findAncestorStateOfType<_MyAppState>();
  @override
@ -72,139 +69,95 @@ class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
-    return MultiProvider(
-      providers: [
-        ChangeNotifierProvider<Auth>(create: (context) => Auth()),
-        ChangeNotifierProvider<SpotifyDI>(create: (context) {
-          Auth authState = Provider.of<Auth>(context, listen: false);
-          return SpotifyDI(
-            SpotifyApi(
-              SpotifyApiCredentials(
-                authState.clientId,
-                authState.clientSecret,
-                accessToken: authState.accessToken,
-                refreshToken: authState.refreshToken,
-                expiration: authState.expiration,
-                scopes: spotifyScopes,
-              ),
-              onCredentialsRefreshed: (credentials) async {
-                SharedPreferences localStorage =
-                    await SharedPreferences.getInstance();
-                localStorage.setString(
-                  LocalStorageKeys.refreshToken,
-                  credentials.refreshToken!,
-                );
-                localStorage.setString(
-                  LocalStorageKeys.accessToken,
-                  credentials.accessToken!,
-                );
-                localStorage.setString(
-                    LocalStorageKeys.clientId, credentials.clientId!);
-                localStorage.setString(
-                  LocalStorageKeys.clientSecret,
-                  credentials.clientSecret!,
-                );
-              },
-            ),
-          );
-        }),
-        ChangeNotifierProvider<Playback>(create: (context) => Playback()),
-        ChangeNotifierProvider<UserPreferences>(
-          create: (context) {
-            return UserPreferences();
-          },
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      title: 'Spotube',
+      theme: ThemeData(
+        primaryColor: Colors.green,
+        primarySwatch: Colors.green,
+        buttonTheme: const ButtonThemeData(
+          buttonColor: Colors.green,
        ),
-      ],
-      child: MaterialApp(
-        debugShowCheckedModeBanner: false,
-        title: 'Spotube',
-        theme: ThemeData(
-          primaryColor: Colors.green,
-          primarySwatch: Colors.green,
-          buttonTheme: const ButtonThemeData(
-            buttonColor: Colors.green,
-          ),
-          shadowColor: Colors.grey[300],
-          backgroundColor: Colors.white,
-          textTheme: TextTheme(
-            bodyText1: TextStyle(color: Colors.grey[850]),
-            headline1: TextStyle(color: Colors.grey[850]),
-            headline2: TextStyle(color: Colors.grey[850]),
-            headline3: TextStyle(color: Colors.grey[850]),
-            headline4: TextStyle(color: Colors.grey[850]),
-            headline5: TextStyle(color: Colors.grey[850]),
-            headline6: TextStyle(color: Colors.grey[850]),
-          ),
-          listTileTheme: ListTileThemeData(
-            iconColor: Colors.grey[850],
-            horizontalTitleGap: 0,
-          ),
-          inputDecorationTheme: InputDecorationTheme(
-            focusedBorder: OutlineInputBorder(
-              borderSide: BorderSide(
-                color: Colors.green[400]!,
-                width: 2.0,
-              ),
-            ),
-            enabledBorder: OutlineInputBorder(
-              borderSide: BorderSide(
-                color: Colors.grey[800]!,
-              ),
+        shadowColor: Colors.grey[300],
+        backgroundColor: Colors.white,
+        textTheme: TextTheme(
+          bodyText1: TextStyle(color: Colors.grey[850]),
+          headline1: TextStyle(color: Colors.grey[850]),
+          headline2: TextStyle(color: Colors.grey[850]),
+          headline3: TextStyle(color: Colors.grey[850]),
+          headline4: TextStyle(color: Colors.grey[850]),
+          headline5: TextStyle(color: Colors.grey[850]),
+          headline6: TextStyle(color: Colors.grey[850]),
+        ),
+        listTileTheme: ListTileThemeData(
+          iconColor: Colors.grey[850],
+          horizontalTitleGap: 0,
+        ),
+        inputDecorationTheme: InputDecorationTheme(
+          focusedBorder: OutlineInputBorder(
+            borderSide: BorderSide(
+              color: Colors.green[400]!,
+              width: 2.0,
            ),
          ),
-          navigationRailTheme: NavigationRailThemeData(
-            backgroundColor: Colors.blueGrey[50],
-            unselectedIconTheme:
-                IconThemeData(color: Colors.grey[850], opacity: 1),
-            unselectedLabelTextStyle: TextStyle(
-              color: Colors.grey[850],
+          enabledBorder: OutlineInputBorder(
+            borderSide: BorderSide(
+              color: Colors.grey[800]!,
            ),
          ),
-          cardTheme: CardTheme(
-            shape:
-                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-            color: Colors.white,
-          ),
        ),
-        darkTheme: ThemeData(
-          brightness: Brightness.dark,
-          primaryColor: Colors.green,
-          primarySwatch: Colors.green,
-          backgroundColor: Colors.blueGrey[900],
-          scaffoldBackgroundColor: Colors.blueGrey[900],
-          dialogBackgroundColor: Colors.blueGrey[800],
-          shadowColor: Colors.black26,
-          buttonTheme: const ButtonThemeData(
-            buttonColor: Colors.green,
+        navigationRailTheme: NavigationRailThemeData(
+          backgroundColor: Colors.blueGrey[50],
+          unselectedIconTheme:
+              IconThemeData(color: Colors.grey[850], opacity: 1),
+          unselectedLabelTextStyle: TextStyle(
+            color: Colors.grey[850],
          ),
-          inputDecorationTheme: InputDecorationTheme(
-            focusedBorder: OutlineInputBorder(
-              borderSide: BorderSide(
-                color: Colors.green[400]!,
-                width: 2.0,
-              ),
-            ),
-            enabledBorder: OutlineInputBorder(
-              borderSide: BorderSide(
-                color: Colors.grey[800]!,
-              ),
-            ),
-          ),
-          navigationRailTheme: NavigationRailThemeData(
-            backgroundColor: Colors.blueGrey[800],
-            unselectedIconTheme: const IconThemeData(opacity: 1),
-          ),
-          cardTheme: CardTheme(
-            shape:
-                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-            color: Colors.blueGrey[900],
-            elevation: 20,
-          ),
-          canvasColor: Colors.blueGrey[900],
        ),
-        themeMode: _themeMode,
-        home: const Home(),
+        cardTheme: CardTheme(
+          shape:
+              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+          color: Colors.white,
+        ),
      ),
+      darkTheme: ThemeData(
+        brightness: Brightness.dark,
+        primaryColor: Colors.green,
+        primarySwatch: Colors.green,
+        backgroundColor: Colors.blueGrey[900],
+        scaffoldBackgroundColor: Colors.blueGrey[900],
+        dialogBackgroundColor: Colors.blueGrey[800],
+        shadowColor: Colors.black26,
+        buttonTheme: const ButtonThemeData(
+          buttonColor: Colors.green,
+        ),
+        inputDecorationTheme: InputDecorationTheme(
+          focusedBorder: OutlineInputBorder(
+            borderSide: BorderSide(
+              color: Colors.green[400]!,
+              width: 2.0,
+            ),
+          ),
+          enabledBorder: OutlineInputBorder(
+            borderSide: BorderSide(
+              color: Colors.grey[800]!,
+            ),
+          ),
+        ),
+        navigationRailTheme: NavigationRailThemeData(
+          backgroundColor: Colors.blueGrey[800],
+          unselectedIconTheme: const IconThemeData(opacity: 1),
+        ),
+        cardTheme: CardTheme(
+          shape:
+              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+          color: Colors.blueGrey[900],
+          elevation: 20,
+        ),
+        canvasColor: Colors.blueGrey[900],
+      ),
+      themeMode: _themeMode,
+      home: const Home(),
    );
  }
 }
--- a/lib/provider/Auth.dart
+++ b/lib/provider/Auth.dart
@ -1,4 +1,5 @@
 import 'package:flutter/cupertino.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';

 class Auth with ChangeNotifier {
  String? _clientId;
@ -52,3 +53,5 @@ class Auth with ChangeNotifier {
    notifyListeners();
  }
 }
+
+var authProvider = ChangeNotifierProvider<Auth>((ref) => Auth());
--- a/lib/provider/Playback.dart
+++ b/lib/provider/Playback.dart
@ -1,4 +1,5 @@
 import 'package:flutter/cupertino.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:spotify/spotify.dart';

 class CurrentPlaylist {
@ -77,4 +78,4 @@ class Playback extends ChangeNotifier {
  }
 }

-var x = Playback();
+var playbackProvider = ChangeNotifierProvider<Playback>((_) => Playback());
--- a/lib/provider/SpotifyDI.dart
+++ b/lib/provider/SpotifyDI.dart
@ -1,10 +1,36 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:shared_preferences/shared_preferences.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/Home.dart';
+import 'package:spotube/models/LocalStorageKeys.dart';
+import 'package:spotube/provider/Auth.dart';

-class SpotifyDI extends ChangeNotifier {
-  SpotifyApi _spotifyApi;
-
-  SpotifyDI(this._spotifyApi);
-
-  SpotifyApi get spotifyApi => _spotifyApi;
-}
+var spotifyProvider = Provider<SpotifyApi>((ref) {
+  Auth authState = ref.watch(authProvider);
+  return SpotifyApi(
+    SpotifyApiCredentials(
+      authState.clientId,
+      authState.clientSecret,
+      accessToken: authState.accessToken,
+      refreshToken: authState.refreshToken,
+      expiration: authState.expiration,
+      scopes: spotifyScopes,
+    ),
+    onCredentialsRefreshed: (credentials) async {
+      SharedPreferences localStorage = await SharedPreferences.getInstance();
+      localStorage.setString(
+        LocalStorageKeys.refreshToken,
+        credentials.refreshToken!,
+      );
+      localStorage.setString(
+        LocalStorageKeys.accessToken,
+        credentials.accessToken!,
+      );
+      localStorage.setString(LocalStorageKeys.clientId, credentials.clientId!);
+      localStorage.setString(
+        LocalStorageKeys.clientSecret,
+        credentials.clientSecret!,
+      );
+    },
+  );
+});
--- a/lib/provider/UserPreferences.dart
+++ b/lib/provider/UserPreferences.dart
@ -1,6 +1,7 @@
 import 'dart:convert';

 import 'package:flutter/cupertino.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:hotkey_manager/hotkey_manager.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:spotube/models/LocalStorageKeys.dart';
@ -110,3 +111,5 @@ class UserPreferences extends ChangeNotifier {
    notifyListeners();
  }
 }
+
+var userPreferencesProvider = ChangeNotifierProvider((_) => UserPreferences());
--- a/pubspec.lock
+++ b/pubspec.lock
@ -195,6 +195,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "1.0.4"
+  flutter_riverpod:
+    dependency: "direct main"
+    description:
+      name: flutter_riverpod
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.3"
  flutter_test:
    dependency: "direct dev"
    description: flutter
@ -338,13 +345,6 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "2.8.1"
-  nested:
-    dependency: transitive
-    description:
-      name: nested
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.0.0"
  oauth2:
    dependency: transitive
    description:
@ -457,13 +457,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "4.2.4"
-  provider:
-    dependency: "direct main"
+  riverpod:
+    dependency: transitive
    description:
-      name: provider
+      name: riverpod
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "6.0.1"
+    version: "1.0.3"
  rxdart:
    dependency: transitive
    description:
@ -574,6 +574,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "1.10.0"
+  state_notifier:
+    dependency: transitive
+    description:
+      name: state_notifier
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.7.2+1"
  stream_channel:
    dependency: transitive
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -37,7 +37,6 @@ dependencies:
  cached_network_image: ^3.2.0
  html: ^0.15.0
  http: ^0.13.4
-  provider: ^6.0.1
  shared_preferences: ^2.0.11
  spotify: ^0.6.0
  url_launcher: ^6.0.17
@ -50,6 +49,7 @@ dependencies:
  path: ^1.8.0
  path_provider: ^2.0.8
  collection: ^1.15.0
+  flutter_riverpod: ^1.0.3

 dev_dependencies:
  flutter_test: