FLUTTER APP

    How to make Diary App using flutter stepwise using getx

    DeepikaBy Updated:No Comments4 Mins Read

    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
    1. 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);
                   },
                 ),
               );
             },
           );
         }),
       );
     }
   }
    1. 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

    Output

    You should be able to add, view, and delete diary entries. Diary App using Flutter with GetX

    Feel free to expand this app with more features like data persistence, notifications, or enhanced UI. If you need help with any specific feature or run into any issues, just let me know!

    Related Articles

    Share.

    Related Posts

    Leave A Reply