How to make Diary App using Flutter and Getx

Creating a Diary App using Flutter with GetX involves several steps. Here’s a step-by-step guide to get you started:

Step 1: Setup Your Flutter Project

1. Create a New Flutter Project:

   flutter create diary_app
   cd diary_app

2. Add Dependencies:
   Open pubspec.yaml and add get for state management and other necessary dependencies.

   dependencies:
     flutter:
       sdk: flutter
     get: ^4.6.5
     flutter_local_notifications: ^15.0.0

Then run:

   flutter pub get

Step 2: Define Your Data Model

Create a model class to represent a diary entry. For simplicity, let’s assume each entry has a title and content.

1. Create a models directory and a file diary_entry.dart:

   // lib/models/diary_entry.dart
   class DiaryEntry {
     String title;
     String content;

     DiaryEntry({required this.title, required this.content});

     // Convert a DiaryEntry into a Map
     Map<String, dynamic> toMap() {
       return {
         'title': title,
         'content': content,
       };
     }

     // Convert a Map into a DiaryEntry
     factory DiaryEntry.fromMap(Map<String, dynamic> map) {
       return DiaryEntry(
         title: map['title'],
         content: map['content'],
       );
     }
   }

Step 3: Create the GetX Controller

1. Create a controllers directory and a file diary_controller.dart:

   // lib/controllers/diary_controller.dart
   import 'package:get/get.dart';
   import '../models/diary_entry.dart';

   class DiaryController extends GetxController {
     var diaryEntries = <DiaryEntry>[].obs;

     void addEntry(DiaryEntry entry) {
       diaryEntries.add(entry);
     }

     void removeEntry(int index) {
       diaryEntries.removeAt(index);
     }
   }

Step 4: Build the UI

1. Create a screens directory and add a file home_screen.dart:

   // lib/screens/home_screen.dart
   import 'package:flutter/material.dart';
   import 'package:get/get.dart';
   import '../controllers/diary_controller.dart';
   import '../models/diary_entry.dart';

   class HomeScreen extends StatelessWidget {
     final DiaryController diaryController = Get.put(DiaryController());

     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Diary App'),
           actions: [
             IconButton(
               icon: Icon(Icons.add),
               onPressed: () {
                 Get.to(() => AddEntryScreen());
               },
             ),
           ],
         ),
         body: Obx(() {
           return ListView.builder(
             itemCount: diaryController.diaryEntries.length,
             itemBuilder: (context, index) {
               final entry = diaryController.diaryEntries[index];
               return ListTile(
                 title: Text(entry.title),
                 subtitle: Text(entry.content),
                 trailing: IconButton(
                   icon: Icon(Icons.delete),
                   onPressed: () {
                     diaryController.removeEntry(index);
                   },
                 ),
               );
             },
           );
         }),
       );
     }
   }

2. Create an add_entry_screen.dart for adding new diary entries:

   // lib/screens/add_entry_screen.dart
   import 'package:flutter/material.dart';
   import 'package:get/get.dart';
   import '../controllers/diary_controller.dart';
   import '../models/diary_entry.dart';

   class AddEntryScreen extends StatelessWidget {
     final DiaryController diaryController = Get.find();
     final TextEditingController titleController = TextEditingController();
     final TextEditingController contentController = TextEditingController();

     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Add Diary Entry'),
         ),
         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: 5,
               ),
               SizedBox(height: 20),
               ElevatedButton(
                 onPressed: () {
                   final entry = DiaryEntry(
                     title: titleController.text,
                     content: contentController.text,
                   );
                   diaryController.addEntry(entry);
                   Get.back();
                 },
                 child: Text('Add Entry'),
               ),
             ],
           ),
         ),
       );
     }
   }

Step 5: Set Up Main Entry Point

1. Modify main.dart to set up GetX routing:

   // lib/main.dart
   import 'package:flutter/material.dart';
   import 'package:get/get.dart';
   import 'screens/home_screen.dart';

   void main() {
     runApp(MyApp());
   }

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return GetMaterialApp(
         title: 'Diary App',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: HomeScreen(),
       );
     }
   }

Step 6: Testing

Run your app using:

flutter run