Building a Personal Finance Tracker with Flutter and Firebase
Managing personal finances can be a daunting task for many people. In this blog post, we will create a simple Personal Finance Tracker app using Flutter and Firebase. This application will allow users to track their income and expenses efficiently.
Prerequisites
To follow along, make sure you have the following installed:
- Flutter SDK
- Firebase account
- Android Studio or Visual Studio Code
Step 1: Setting Up Firebase
- Go to the Firebase Console.
- Create a new project named 'Finance Tracker'.
- In the project settings, add an Android app with your app's package name.
- Download the
google-services.jsonfile and place it in theandroid/app/directory. - Enable Firestore Database and set it to 'Test Mode' for easy development.
Step 2: Creating the Flutter App
Dart
import 'package:flutter/material.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; void main() => runApp(FinanceTrackerApp()); class FinanceTrackerApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Finance Tracker', home: FinanceHomePage(), ); } } class FinanceHomePage extends StatefulWidget { @override _FinanceHomePageState createState() => _FinanceHomePageState(); } class _FinanceHomePageState extends State { final _firestore = Firestore.instance; final _incomeController = TextEditingController(); final _expenseController = TextEditingController(); void _addIncome() { if (_incomeController.text.isNotEmpty) { _firestore.collection('finances').add({ 'type': 'income', 'amount': double.parse(_incomeController.text), 'timestamp': Timestamp.now() }); _incomeController.clear(); } } void _addExpense() { if (_expenseController.text.isNotEmpty) { _firestore.collection('finances').add({ 'type': 'expense', 'amount': double.parse(_expenseController.text), 'timestamp': Timestamp.now() }); _expenseController.clear(); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Finance Tracker')), body: Column( children: [ TextField(controller: _incomeController, decoration: InputDecoration(labelText: 'Income')), RaisedButton(onPressed: _addIncome, child: Text('Add Income')), TextField(controller: _expenseController, decoration: InputDecoration(labelText: 'Expense')), RaisedButton(onPressed: _addExpense, child: Text('Add Expense')), Expanded(child: StreamBuilder( stream: _firestore.collection('finances').snapshots(), builder: (context, snapshot) { if (!snapshot.hasData) return Center(child: CircularProgressIndicator()); final finances = snapshot.data.documents; return ListView.builder( itemCount: finances.length, itemBuilder: (context, index) { return ListTile( title: Text('${finances[index]['type']} - ${finances[index]['amount']}'), ); }); }, )) ], ), ); } } Step 3: Running the App
Now that we have set up the core of our app, it's time to run it. Open your terminal and navigate to your project directory. Use the following command:
Bash
flutter runConclusion
In this blog post, we created a simple Personal Finance Tracker app using Flutter and Firebase. Users can add their income and expenses, and see them in real time. You can further enhance this app by adding features like user authentication and better analytics.
0 Comments:
Leave a Reply