Coffee & Code - Flutter Speed Dial Widget and Riverpod State Management

Coffee & Code - Flutter Speed Dial Widget and Riverpod State Management

Updating the Book Quotes Flutter app with a Speed Dial widget and migrating state management from GetX to Riverpod.


Sample Image
Peppermint Cappuccino w/ Cranberry Scone from Bennu Coffee in Austin, TX.

Back on the Book Quotes app for a bit.

Some minor adjustments to the dashboard, where there’s now a Speed Dial widget, which contains SpeedDialChild widgets as its children.

Sample Image
Sample Image
SpeedDial open/closed.

This button opens into a cascade of buttons that display vertically.

// Parent widget.
SpeedDial(
  animatedIcon: Animated Icons.menu_close,
  animatedIconTheme: const IconThemeData(size: 28.0),
  backgroundColor: Colors.green [900],
  visible: true,
  curve: Curves. bounceInOut,
  children: [ ... ],
)
// Child widget that displays once parent widget pressed.
Speed DialChild(
  child: const Icon(
    Icons.logout,
    color: Colors.white,
  )
  backgroundColor: Colors.red,
  onTap: () {
    FirebaseAuth. instance.signOut();
  }
  label: 'Logout',
  labelStyle: labelStyle,
  labelBackgroundColor: Colors.black
)

I figured this would give the home page more space to breath.

I’m also in the process of converting the state management of the app from GetX to Riverpod.

I’ve never used Riverpod before, but I like it so far.

The concept of Providers being the source of data for each screen allows me to write less code and allow for instant updates when any of the data changes on those providers.

class PhotoProvider extends ChangeNotifier {
  CroppedFile? selectedCroppedFile;
  PhotoProvider();
  
  Future updateImage() async {
    try {
      XFile? file = await ImagePicker().pickImage(
        source: ImageSource.gallery,
      )
      
      if (file == null) return;
      CroppedFile? croppedFile = await ImageCropper().cropImage(sourcePath: file.path);
      if (croppedFile == null) return;
      selectedCroppedFile = croppedFile;
      notifyListeners();
  } catch (error) {
      debugPrint (error.toString());
  }
}

Related posts
Coffee & Code - Rewriting My App, GetX to Riverpod

Coffee & Code - Rewriting My App, GetX to Riverpod

Read more
Coffee & Code - Firestore Sorting & Toast Messages

Coffee & Code - Firestore Sorting & Toast Messages

Read more
Coffee & Code - Google Auth Integration for Book Quotes

Coffee & Code - Google Auth Integration for Book Quotes

Read more
Google Books API Integration for the Book Quotes App

Google Books API Integration for the Book Quotes App

Read more