Building a Flutter Blog App with Firebase Authentication

Introduction

In this tutorial, I’ll walk you through my journey of building a blog app using Flutter, integrated with Firebase for backend services and Firebase Authentication for user login and registration. This project has been a fantastic learning experience, and I hope it helps you on your Flutter journey.

Project Setup

Step 1: Setting Up Flutter and Firebase

First, ensure you have Flutter installed on your machine. If not, you can follow the official Flutter installation guide.

Next, create a new Flutter project:

flutter create flutter_blog_app
cd flutter_blog_app

Now, set up Firebase for your project:

Go to the Firebase Console.
Create a new project and add an Android/iOS app.
Follow the instructions to download the google-services.json (for Android) or GoogleService-Info.plist (for iOS) and place them in the appropriate directories.

Add the required Firebase dependencies to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_auth: latest_version
  cloud_firestore: latest_version

Run flutter pub get to install these dependencies.

Step 2: Initializing Firebase

In your main.dart file, initialize Firebase:

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(
      title: 'Flutter Blog App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

Step 3: Implementing Authentication

User Registration

Create a registration screen where users can sign up:

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

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}
class _RegisterPageState extends State<RegisterPage> {
  final _auth = FirebaseAuth.instance;
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  void _register() async {
    try {
      await _auth.createUserWithEmailAndPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text.trim(),
      );
      // Navigate to home screen or show a success message
    } catch (e) {
      // Handle error
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Register')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: _register,
              child: Text('Register'),
            ),
          ],
        ),
      ),
    );
  }
}

User Login

Similarly, create a login screen:

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

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
  final _auth = FirebaseAuth.instance;
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  void _login() async {
    try {
      await _auth.signInWithEmailAndPassword(
        email: _emailController.text.trim(),
        password: _passwordController.text.trim(),
      );
      // Navigate to home screen or show a success message
    } catch (e) {
      // Handle error
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: _login,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

Step 4: Creating and Displaying Blog Posts

Data Model

Create a model for your blog posts:

class BlogPost {
  String id;
  String title;
  String content;
  String authorId;
  DateTime timestamp;

BlogPost({
    required this.id,
    required this.title,
    required this.content,
    required this.authorId,
    required this.timestamp,
  });
  factory BlogPost.fromMap(Map<String, dynamic> data, String documentId) {
    return BlogPost(
      id: documentId,
      title: data['title'],
      content: data['content'],
      authorId: data['authorId'],
      timestamp: data['timestamp'].toDate(),
    );
  }
  Map<String, dynamic> toMap() {
    return {
      'title': title,
      'content': content,
      'authorId': authorId,
      'timestamp': timestamp,
    };
  }
}

Creating a Blog Post

Create a form to add new blog posts:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'models/blog_post.dart';

class NewPostPage extends StatefulWidget {
  @override
  _NewPostPageState createState() => _NewPostPageState();
}
class _NewPostPageState extends State<NewPostPage> {
  final _titleController = TextEditingController();
  final _contentController = TextEditingController();
  void _submitPost() async {
    final user = FirebaseAuth.instance.currentUser;
    if (user != null) {
      final newPost = BlogPost(
        id: '',
        title: _titleController.text,
        content: _contentController.text,
        authorId: user.uid,
        timestamp: DateTime.now(),
      );
      await FirebaseFirestore.instance.collection('blogPosts').add(newPost.toMap());
      // Navigate back or show a success message
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('New Post')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _titleController,
              decoration: InputDecoration(labelText: 'Title'),
            ),
            TextField(
              controller: _contentController,
              decoration: InputDecoration(labelText: 'Content'),
              maxLines: 8,
            ),
            ElevatedButton(
              onPressed: _submitPost,
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

Displaying Blog Posts

Fetch and display blog posts on the home screen:

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Blog Posts')),
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('blogPosts').snapshots(),
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (!snapshot.hasData) return CircularProgressIndicator();
          final posts = snapshot.data!.docs.map((doc) => BlogPost.fromMap(doc.data() as Map<String, dynamic>, doc.id)).toList();
          return ListView.builder(
            itemCount: posts.length,
            itemBuilder: (context, index) {
              final post = posts[index];
              return ListTile(
                title: Text(post.title),
                subtitle: Text(post.content),
              );
            },
          );
        },
      ),
    );
  }
}

Conclusion

Building this Flutter blog app with Firebase authentication was an exciting journey that taught me a lot about integrating Firebase services with Flutter. The project involved setting up Firebase, implementing authentication, creating and displaying blog posts, and handling user inputs. I hope this tutorial helps you in your Flutter development journey.

Links to Code

You can find the complete source code on my GitHub repository.

Search This Blog

Flutter