Final Project: Build a Complete Flutter App

# CHAPTER 30

Final Project: Build a Complete Flutter App #

1. Introduction #

2. Project Requirements #

• Authentication: Users must log in via Firebase Email/Password.

• State Management: Use Riverpod to manage the global list of user expenses.

• UI/UX: A responsive layout, a BottomNavigationBar, and a floating button to add expenses.

• Forms: A validated form to input Expense Title, Amount, and Category (Dropdown).

• Database: Save the expenses persistently using SQLite.

• Theming: A global ThemeData with an automatic Dark Mode toggle.

3. Phase 1: Architecture and Setup #

1. 1. Initialize: Run flutter create expensetracker.

• flutterriverpod (State Management)

• firebasecore & firebaseauth (Backend)

• sqflite & path (Local Storage)

1. 3. Folders: Create a clean architecture in your lib/ folder:

• /models (For your Expense class)

• /screens (For Login, Home, and Settings screens)

• /providers (For Riverpod logic)

• /services (For Database logic)

4. Phase 2: Firebase Authentication #

1. 1. Run flutterfire configure in the terminal to link your project.

1. 2. In main.dart, add WidgetsFlutterBinding.ensureInitialized() and initialize Firebase.

1. 3. Build the AuthGate (using StreamBuilder on FirebaseAuth.instance.authStateChanges()).

1. 4. Build LoginScreen using a Form, TextEditingControllers, and an ElevatedButton that calls signInWithEmailAndPassword.

5. Phase 3: The Model and Local Database #

1. 1. Create expense.dart in the models folder.

class Expense {
  final String id;
  final String title;
  final double amount;
  final String category;

  Expense({required this.id, required this.title, required this.amount, required this.category});

  Map<String, dynamic> toMap() => {&#039;id': id, 'title': title, 'amount': amount, 'category': category};
}

1. 2. Build a DatabaseHelper Singleton using sqflite to create a table named expenses, and write methods to insertExpense() and getExpenses().

6. Phase 4: State Management (Riverpod) #

1. 1. Wrap MyApp in a ProviderScope.

1. 2. Create a StateNotifier (or Notifier) class that manages a List<Expense>.

1. 3. When the class initializes, it should call DatabaseHelper.getExpenses() and populate the list.

1. 4. Write an addExpense(Expense e) method in the provider that saves the expense to SQLite AND adds it to the local List, then updates the UI.

7. Phase 5: The UI Shell #

1. 1. Create MainScreen (a ConsumerWidget).

1. 2. Implement a BottomNavigationBar with two tabs: Dashboard and Settings.

1. 3. Dashboard: Read the expenses using ref.watch(expenseProvider). Return a ListView.builder. For each item, display a ListTile with a custom icon based on the category (e.g., FastFood icon for food, Car icon for travel).

1. 4. FAB: Add a FloatingActionButton. When clicked, it opens a showModalBottomSheet containing a Form to input a new expense.

8. Phase 6: Theming and Polish #

1. 1. In main.dart, define a beautiful ThemeData using ColorScheme.fromSeed(seedColor: Colors.teal).

1. 2. Define the darkTheme property.

1. 3. In the Settings tab, add a switch to manually toggle Dark Mode using a StateProvider<bool>.

1. 4. Animation: Wrap the total expenses number at the top of the screen in an AnimatedSwitcher so it rolls smoothly when a new expense is added.

9. The Capstone Challenge #

10. Course Conclusion and Next Steps #

You now possess the skills to transform ideas into tangible software that runs on billions of devices globally. But learning never stops. Where do you go from here?

• Master Animations: Dive deep into Explicit Animations and the Rive package for game-like UI.

• Advanced Architecture: Learn "Clean Architecture" to structure apps for enterprise teams.

• Platform Channels: Learn how to write custom Kotlin/Swift code and trigger it from Dart.

Keep building. Build a weather app. Build a chat app. Build a game. Welcome to the Flutter Developer community. The world is your canvas.