How To Create A Dynamic Radio Button Menu Using Firebase In Flutter

In this post, creating a radio button menu that updates based on user data from Firebase is an ideal way to manage information dynamically. Firebase, Google’s cloud-based database platform, makes it easy to store and retrieve data without needing your backend server. This tutorial will help you create a radio button menu that updates in real-time using Firebase in Flutter.

Let’s dive into the step-by-step guide on how to achieve this. By the end, you’ll have a fully functional Flutter app that retrieves radio button options from Firebase and displays them on your app screen.

Why I Use Firebase and Flutter Together?

Firebase provides real-time database capabilities, allowing data to be updated on the fly. This can make your app more interactive and engaging by syncing data across users. Flutter’s widget-based architecture makes it easy to implement UI elements like radio buttons, which can reflect changes instantly when coupled with Firebase.

Step 1: Setting Up Firebase Project

Create a Firebase Project:

Go to the Firebase Console and create a new project.
Name your project, enable Google Analytics (optional), and complete the setup.

Add Android/iOS App:

Follow the instructions to add either an Android or iOS app to the Firebase project.
Download the google-services.json (for Android) or GoogleService-Info.plist (for iOS) file and add it to your Flutter project.

Enable Firestore Database:

In the Firebase console, navigate to Firestore Database.
Click Create Database and set up a test mode database, which will allow public read and write access.

Step 2: Set Up Firebase in Your Flutter Project

Add Firebase Dependencies:
Open your pubspec.yaml file and add the following dependencies for Firebase and Cloud Firestore:

dependencies:
  firebase_core: latest_version
  cloud_firestore: latest_version

Run flutter pub get to install the dependencies.

2. Initialize Firebase:
In your main.dart file, initialize Firebase at the start of your app:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RadioMenuScreen(),
    );
  }
}

3. Set Up Firestore Collection:
Go to the Firestore Database in Firebase Console and create a new collection named menuOptions.

Add documents with fields such as optionId and optionName to represent the items in your radio button menu.

Step 3: Create the Radio Button Menu Screen in Flutter

Let’s create a new Flutter screen named RadioMenuScreen where the radio button menu will be displayed.

Create the RadioMenuScreen Widget:

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

class RadioMenuScreen extends StatefulWidget {
  @override
  _RadioMenuScreenState createState() => _RadioMenuScreenState();
}

class _RadioMenuScreenState extends State<RadioMenuScreen> {
  String? _selectedOption;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dynamic Radio Button Menu"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Select an Option"),
            SizedBox(height: 20),
            _buildRadioButtonList(),
          ],
        ),
      ),
    );
  }

2. Fetch Data from Firestore and Display Radio Buttons:

In the _buildRadioButtonList method, we will use Firestore to fetch the radio button options and display them in a list.

Widget _buildRadioButtonList() {
  return StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance.collection('menuOptions').snapshots(),
    builder: (context, snapshot) {
      if (snapshot.hasError) {
        return Text("Error loading options");
      }
      if (!snapshot.hasData) {
        return CircularProgressIndicator();
      }

      final options = snapshot.data!.docs;
      return Column(
        children: options.map((option) {
          final optionId = option['optionId'];
          final optionName = option['optionName'];
          return RadioListTile(
            title: Text(optionName),
            value: optionId,
            groupValue: _selectedOption,
            onChanged: (value) {
              setState(() {
                _selectedOption = value.toString();
              });
            },
          );
        }).toList(),
      );
    },
  );
}

Here, we use a StreamBuilder to listen to updates from Firebase Firestore. Every time there’s a change in Firestore, it automatically updates the radio button options in our app.

Step 4: Adding Data to Firestore

To see your app in action, add some data to your menuOptions collection in Firestore. Each document should have fields like optionId and optionName.

Example documents in menuOptions collection:

Document 1: { "optionId": "1", "optionName": "Option 1" }
Document 2: { "optionId": "2", "optionName": "Option 2" }

These options will appear as radio buttons in the app, and you can add, remove, or update options directly in Firebase, which will reflect immediately in the app.

Step 5: Running the App

Save and Run the App:
Save your code and run the app on an emulator or connected device.
Test Real-Time Updates:
- Go to your Firebase Console and try adding, editing, or deleting options in the menuOptions collection.
- Your app should instantly reflect these changes without needing to restart.

Conclusion

You’ve successfully created a dynamic radio button menu using Firebase in Flutter. With this setup, you can dynamically manage the options for your radio button menu from Firebase Firestore, and any updates will reflect in real time. This method can be used in a variety of applications, from form builders to settings menus, and provides great flexibility for app management.

Dynamic UIs like this make your app flexible, easy to update, and more user-friendly without requiring an app update. Good luck and happy coding!

How to Create a Dynamic Radio Button Menu Using Firebase in Flutter