Building Web and Mobile Applications with Flutter and Firebase/

...

/

Creating the UI for Realtime Database Operations

Creating the UI for Realtime Database Operations

Learn how to create a responsive CRUD app UI to interact with Firebase Realtime Database.

We'll cover the following...

In this lesson, we’re going to provide an overview of the home page widget in our Flutter application. The home page widget is responsible for rendering the main screen of the CRUD application, which includes a top and bottom navigation bar and a content area displaying either posts or events, as illustrated below:

Press + to interact
Home page UI
Home page UI

Home page structure

We’ll implement the home page as a stateful widget with a corresponding state that manages its internal state. The widget imports the following packages and files:

Press + to interact
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:realtimedb/realtime/events.dart';
import 'package:realtimedb/realtime/Post.dart';

  • Line 1: This provides Flutter’s Material Design widgets for UI components.

  • Line 2: This imports the get library for navigation and state management.

  • Line 3: This imports a file containing the EventList widget.

  • Line 4: This imports a file containing the PostList.

State properties

The state class defines an selectedIndex integer that represents the index of the currently selected tab in the navigation bar as follows:

int selectedIndex = 0;

Page components

We’ll then continue to build the widget as shown in the code below:

Press + to interact
@override
Widget build(BuildContext context) {
  return Scaffold(
    // Scaffold widget provides a basic layout structure for the screen.
    body: Center(
      // Center widget horizontally and vertically centers its child.
      child: Column(
        // Column widget arranges its children in a vertical column.
        children: [
          // Top navigation bar
          Container(
            // Container widget represents a rectangular visual element.
            color: Colors.greenAccent.withOpacity(0.5),
            width: 300,
            child: Row(
              // Row widget arranges its children in a horizontal row.
              children: [
                IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.person),
                ),
                const Spacer(),
                const CircleAvatar(
                  backgroundImage: AssetImage('images/splash.jpg'),
                ),
                const Spacer(),
                IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.logout),
                ),
              ],
            ),
          ),
          
          Expanded(
            // Expanded widget takes up remaining space vertically.
            child: Container(
              color: Colors.white10,
              width: 300,
              child: Stack(
                // Stack widget overlays its children.
                children: [
                  // Content area (PostList or EventList)
                  selectedIndex == 0 ? const PostList() : const EventList(),
                  Align(
                    alignment: Alignment.bottomRight,
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: FloatingActionButton(
                        onPressed: () {
                          Get.toNamed('/AddPost');
                        },
                        tooltip: 'Post',
                        child: const Icon(Icons.add),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          // Bottom navigation bar
          MyBottomNavigationBar(
            selectedIndex: selectedIndex,
            onIndexChanged: (index) {
              setState(() {
                selectedIndex = index;
              });
            },
          ),
        ],
      ),
    ),
  );
}

We’ll use Scaffold widget, which provides a basic screen layout structure. Inside Scaffold, the content is arranged using the Center, Column, and Expanded widgets as follows:

  • Lines 19–33: These ...