Okay, let's break down how to create a fully customized offline workout app with Flutter, step by step. We'll keep it simple and focus on the core features you requested.

Imagine building with LEGO bricks. Each step is like adding a new set of bricks to build your app.

Step 1: Setting up your Flutter Project (The Foundation)

Install Flutter: If you haven't already, you need to install Flutter on your computer. Follow the official Flutter installation guide for your operating system: https://docs.flutter.dev/get-started/install
Create a new Flutter project: Open your terminal or command prompt and run this command:
```
       flutter create workout_app
 cd workout_app
```
This creates a new folder named workout_app with all the basic files for a Flutter app.

Step 2: Adding Isar Database (The Memory)

We'll use Isar to store your workout data offline.

Add Isar dependencies: Open the pubspec.yaml file in your project. Under the dependencies: section, add these lines:
```
       isar: ^3.1.0 # Use the latest version
 isar_flutter_libs: ^3.1.0 # Use the latest version
 path_provider: ^2.0.0 # For finding app directory
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Yaml

IGNORE_WHEN_COPYING_END

Explanation:
- isar: The core Isar database library.
- isar_flutter_libs: Flutter-specific bindings for Isar.
- path_provider: Helps Isar find a place to store the database files on the device.
Run flutter pub get: In your terminal, run this command inside your project folder:
```
       flutter pub get
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Bash

IGNORE_WHEN_COPYING_END

This downloads and adds the Isar libraries to your project.
Create a Workout Model: We need to define what data we want to store for each workout. Create a new folder named models in your lib folder. Inside models, create a file named workout.dart.
```
       import 'package:isar/isar.dart';

 part 'workout.g.dart'; // This line is important for Isar code generation

 @Collection() // This tells Isar that this class is a collection (like a table)
 class Workout {
   Id? id; // Isar will automatically generate an ID for each workout

   DateTime? startTime;
   DateTime? endTime;
   int? durationSeconds; // Duration in seconds

   Workout({
     this.id,
     this.startTime,
     this.endTime,
     this.durationSeconds,
   });
 }
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Explanation:
- @Collection(): Marks the Workout class as something Isar can store.
- Id? id: A unique identifier for each workout. Id is an Isar type. The ? makes it nullable because Isar will assign the ID when you save a new workout.
- startTime, endTime, durationSeconds: Fields to store workout details.
Generate Isar Code: Run this command in your terminal:
```
       flutter pub run build_runner build --delete-conflicting-outputs
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Bash

IGNORE_WHEN_COPYING_END

Explanation: Isar uses code generation. This command reads your workout.dart file and creates a file named workout.g.dart (as mentioned in part 'workout.g.dart';). This generated file contains the code Isar needs to work with your Workout class. You need to run this command every time you change your Isar model.

Initialize Isar: We need to set up Isar when your app starts. Open your main.dart file.

       import 'package:flutter/material.dart';
 import 'package:isar/isar.dart';
 import 'package:path_provider/path_provider.dart';
 import 'models/workout.dart'; // Import your Workout model

 late Isar isar; // Declare Isar globally

 void main() async {
   WidgetsFlutterBinding.ensureInitialized(); // Required for path_provider

   final dir = await getApplicationDocumentsDirectory();
   isar = await Isar.open(
     [WorkoutSchema], // Add your Workout schema here
     directory: dir.path,
   );

   runApp(const MyApp());
 }

 // ... rest of your MyApp widget code (unchanged for now)

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Explanation:

WidgetsFlutterBinding.ensureInitialized(): Ensures Flutter is initialized before using path_provider.
getApplicationDocumentsDirectory(): Gets the directory where your app can store files.
Isar.open([WorkoutSchema], directory: dir.path): Opens the Isar database. [WorkoutSchema] tells Isar to use the schema (structure) we defined in workout.dart.

Step 3: Building the Timer Screen (The Workout Interface)

Create a new file: In your lib folder, create a file named workout_timer_screen.dart.
Timer Screen Code:

```go import 'package:flutter/material.dart'; import 'dart:async'; import 'package:intl/intl.dart'; // For formatting time import 'package:workout_app/models/workout.dart'; // Import your Workout model import 'package:workout_app/main.dart'; // Import your global isar instance

class WorkoutTimerScreen extends StatefulWidget { const WorkoutTimerScreen({super.key});

@override State createState() => _WorkoutTimerScreenState(); }

class _WorkoutTimerScreenState extends State { Stopwatch _stopwatch = Stopwatch(); late Timer _timer; String _elapsedTime = '00:00:00'; Workout? _currentWorkout;

@override void initState() { super.initState(); _timer = Timer.periodic(const Duration(milliseconds: 100), (timer) { setState(() { _elapsedTime = _formatTime(_stopwatch.elapsedMilliseconds); }); }); }

@override void dispose() { _timer.cancel(); // Cancel the timer when the screen is closed super.dispose(); }

String _formatTime(int milliseconds) { var secs = milliseconds ~/ 1000; var minutes = ((secs % 3600) ~/ 60).toString().padLeft(2, '0'); var seconds = (secs % 60).toString().padLeft(2, '0'); var hours = (secs ~/ 3600).toString().padLeft(2, '0'); return "$hours:$minutes:$seconds"; }

void _startWorkout() async { if (!_stopwatch.isRunning) { _stopwatch.start(); _currentWorkout = Workout(startTime: DateTime.now()); // Start a new workout setState(() {}); // Trigger UI update } }

void _pauseWorkout() { if (_stopwatch.isRunning) { _stopwatch.stop(); setState(() {}); } }

void _resumeWorkout() { if (!_stopwatch.isRunning) { _stopwatch.start(); setState(() {}); } }

void _stopWorkout() async { if (_stopwatch.isRunning) { _stopwatch.stop(); if (_currentWorkout != null) { _currentWorkout!.endTime = DateTime.now(); _currentWorkout!.durationSeconds = _stopwatch.elapsedMilliseconds ~/ 1000;

// Save the workout to Isar await isar.writeTxn(() async { await isar.workouts.put(_currentWorkout!); // 'workouts' is generated by Isar }); _currentWorkout = null; // Reset current workout

_stopwatch.reset(); setState(() { _elapsedTime = '00:00:00'; // Reset timer display });

ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Workout saved!')), ); } } }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Workout Timer')), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( _elapsedTime, style: const TextStyle(fontSize: 60), ), const SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ if (!_stopwatch.isRunning && _elapsedTime == '00:00:00') ElevatedButton(onPressed: _startWorkout, child: const Text('Start')), if (_stopwatch.isRunning) ElevatedButton(onPressed: _pauseWorkout, child: const Text('Pause')), if (!_stopwatch.isRunning && _elapsedTime != '00:00:00') ElevatedButton(onPressed: _resumeWorkout, child: const Text('Resume')), if (_stopwatch.isRunning || _elapsedTime != '00:00:00') // Show Stop when running or time has passed ElevatedButton( onPressed: _stopWorkout, style: ElevatedButton.styleFrom(backgroundColor: Colors.red), child: const Text('Stop', style: TextStyle(color: Colors.white)), ), ], ), ], ), ), ); } }


    IGNORE\_WHEN\_COPYING\_START

    content\_copy download

    Use code [with caution](https://support.google.com/legal/answer/13505487).Dart

    IGNORE\_WHEN\_COPYING\_END

    **Explanation:**

    * **Stopwatch and Timer:** Used to track and update the elapsed time.

    * **\_elapsedTime:** A string variable to display the formatted time.

    * **\_formatTime():** A function to convert milliseconds to HH:MM:SS format.

    * ***startWorkout(),* pauseWorkout(), *resumeWorkout(),* stopWorkout():** Functions to control the timer and handle saving workout data to Isar when you stop.

    * **Isar Saving in \_stopWorkout():**

        * isar.writeTxn(() async { ... });: Starts a transaction (a safe way to write to the database).

        * isar.workouts.put(\_currentWorkout!): Adds or updates a Workout object in the workouts collection in Isar. workouts is automatically generated by Isar based on your Workout class name.

    * **UI (Build method):** Sets up the layout with the timer display and buttons.

3. **Set WorkoutTimerScreen as your home screen:** Open main.dart and update the home: property in MyApp widget:

    ```go
          // ... inside your MyApp widget in main.dart

    class MyApp extends StatelessWidget {
      const MyApp({super.key});

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Workout App',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const WorkoutTimerScreen(), // Set WorkoutTimerScreen as home
        );
      }
    }

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Now, when you run your app (flutter run), you should see the timer screen.

Step 4: Push Notifications (Reminders)

We'll use the flutter_local_notifications package to send push notifications.

Add flutter_local_notifications dependency: Open pubspec.yaml and add:

       flutter_local_notifications: ^16.3.2 # Use the latest version
 timezone: ^0.9.2 # Required by flutter_local_notifications for scheduling
 rxdart: ^0.27.0 # Required by flutter_local_notifications

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Yaml

IGNORE_WHEN_COPYING_END

Run flutter pub get: In your terminal:
```
       flutter pub get
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Bash

IGNORE_WHEN_COPYING_END

Create a Notification Service: Create a new folder named services in your lib folder, and inside it, create a file named notification_service.dart.

       import 'package:flutter_local_notifications/flutter_local_notifications.dart';
 import 'package:timezone/timezone.dart' as tz;
 import 'package:timezone/data/latest.dart' as tz;
 import 'package:rxdart/rxdart.dart';

 class NotificationService {
   // Singleton pattern (one instance of this class throughout the app)
   static final NotificationService _notificationService =
       NotificationService._internal();

   factory NotificationService() {
     return _notificationService;
   }

   NotificationService._internal();

   final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
       FlutterLocalNotificationsPlugin();

   final BehaviorSubject<String?> selectNotificationSubject =
       BehaviorSubject<String?>();

   Future<void> init() async {
     tz.initializeTimeZones();
     const AndroidInitializationSettings initializationSettingsAndroid =
         AndroidInitializationSettings('@mipmap/ic_launcher'); // Replace with your app icon if needed

     const InitializationSettings initializationSettings =
         InitializationSettings(
       android: initializationSettingsAndroid,
     );

     await flutterLocalNotificationsPlugin.initialize(
       initializationSettings,
       onDidReceiveNotificationResponse: (NotificationResponse notificationResponse) {
         selectNotificationSubject.add(notificationResponse.payload);
       },
     );
   }

   Future<void> showNotification({
     int id = 0,
     String? title,
     String? body,
     String? payload,
   }) async {
     const AndroidNotificationDetails androidNotificationDetails =
         AndroidNotificationDetails(
       'workout_app_notifications_channel', // Channel ID (must be unique)
       'Workout App Notifications', // Channel Name (visible to users)
       channelDescription: 'Notifications for workout app reminders', // Channel Description
       importance: Importance.max,
       priority: Priority.high,
     );
     const NotificationDetails notificationDetails =
         NotificationDetails(android: androidNotificationDetails);
     await flutterLocalNotificationsPlugin.show(
       id,
       title,
       body,
       notificationDetails,
       payload: payload,
     );
   }

   Future<void> scheduleNotification({
     int id = 0,
     String? title,
     String? body,
     String? payload,
     required DateTime scheduledDate,
   }) async {
     const AndroidNotificationDetails androidNotificationDetails =
         AndroidNotificationDetails(
       'workout_app_scheduled_notifications_channel', // Different channel for scheduled notifications
       'Workout App Scheduled Notifications',
       channelDescription: 'Scheduled notifications for workout reminders',
       importance: Importance.max,
       priority: Priority.high,
     );
     const NotificationDetails notificationDetails =
         NotificationDetails(android: androidNotificationDetails);

     await flutterLocalNotificationsPlugin.zonedSchedule(
       id,
       title,
       body,
       tz.TZDateTime.from(scheduledDate, tz.local), // Use timezone-aware DateTime
       notificationDetails,
       payload: payload,
       androidAllowWhileIdle: true, // Allow notification even in Doze mode (Android)
       uiLocalNotificationDateInterpretation:
           UILocalNotificationDateInterpretation.absoluteTime,
     );
   }

   void requestPermissions() {
     flutterLocalNotificationsPlugin
         .resolvePlatformSpecificImplementation<
             AndroidFlutterLocalNotificationsPlugin>()
         ?.requestPermission();
   }
 }

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Explanation:

Singleton Pattern: Ensures you have only one instance of NotificationService in your app.
FlutterLocalNotificationsPlugin: The main plugin for handling notifications.
init(): Initializes the plugin. You need to call this when your app starts.
showNotification(): Displays an immediate notification.
scheduleNotification(): Schedules a notification to appear at a specific DateTime.
Channels: Notifications are grouped into channels on Android. We've created channels for regular and scheduled notifications.
Timezone: Uses timezone package for accurate scheduling.
requestPermissions(): Asks the user for notification permissions on Android.

Initialize Notification Service in main.dart:

       // ... in main.dart

 import 'package:workout_app/services/notification_service.dart'; // Import NotificationService

 void main() async {
   // ... (Isar initialization code as before)

   await NotificationService().init(); // Initialize notification service
   NotificationService().requestPermissions(); // Request permissions

   runApp(const MyApp());
 }

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Schedule Notifications (Example in WorkoutTimerScreen for simplicity - you'd typically put this logic in a separate settings screen or service):

       // ... in _WorkoutTimerScreenState in workout_timer_screen.dart

 @override
 void initState() {
   super.initState();
   _timer = Timer.periodic(...); // Timer code as before

   // Schedule example notifications (you can customize times)
   _scheduleReminders();
 }

 void _scheduleReminders() {
   // Drink water reminder (every 2 hours)
   NotificationService().scheduleNotification(
     id: 1,
     title: 'Hydration Reminder',
     body: 'Time to drink some water!',
     payload: 'water_reminder',
     scheduledDate: DateTime.now().add(const Duration(hours: 2)),
   );

   // Meal reminder (lunchtime - adjust time as needed)
   NotificationService().scheduleNotification(
     id: 2,
     title: 'Meal Reminder',
     body: 'It\'s time for a meal!',
     payload: 'meal_reminder',
     scheduledDate: DateTime.now().add(const Duration(hours: 4)), // Example 4 hours from now
   );

   // Sleep reminder (nighttime - adjust time as needed)
   NotificationService().scheduleNotification(
     id: 3,
     title: 'Sleep Reminder',
     body: 'Time to wind down and get ready for sleep!',
     payload: 'sleep_reminder',
     scheduledDate: DateTime.now().add(const Duration(hours: 8)), // Example 8 hours from now
   );
 }

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Important Notes for Notifications:

Permissions: On Android 13 and above, users need to explicitly grant notification permissions. NotificationService().requestPermissions() helps with this, but you might want to guide users if they deny permission. On iOS, permissions are requested the first time you try to send a notification.
Scheduling: scheduleNotification() schedules notifications. You'll likely want to make the notification times configurable by the user in a settings screen.
App Icon: Replace @mipmap/ic_launcher in AndroidInitializationSettings with the path to your app's notification icon if you want a custom icon.
Testing Notifications: Notifications might not work perfectly in the emulator. Test on a real device for the most accurate behavior. Also, ensure you've granted notification permissions to your app in your device settings.

Step 5: Analytics Page (Progress Tracking)

Create analytics_screen.dart: In your lib folder.

Analytics Screen Code (Simple List for now):

       import 'package:flutter/material.dart';
 import 'package:workout_app/models/workout.dart';
 import 'package:workout_app/main.dart';
 import 'package:intl/intl.dart';

 class AnalyticsScreen extends StatefulWidget {
   const AnalyticsScreen({super.key});

   @override
   State<AnalyticsScreen> createState() => _AnalyticsScreenState();
 }

 class _AnalyticsScreenState extends State<AnalyticsScreen> {
   List<Workout> _workouts = [];

   @override
   void initState() {
     super.initState();
     _loadWorkouts(); // Load workouts when the screen is initialized
   }

   Future<void> _loadWorkouts() async {
     final workoutsFromIsar = await isar.workouts.where().sortByStartTimeDesc().findAll(); // Fetch all workouts, newest first
     setState(() {
       _workouts = workoutsFromIsar;
     });
   }

   String _formatDuration(int? seconds) {
     if (seconds == null) return 'N/A';
     var minutes = ((seconds % 3600) ~/ 60).toString().padLeft(2, '0');
     var secs = (seconds % 60).toString().padLeft(2, '0');
     var hours = (seconds ~/ 3600).toString().padLeft(2, '0');
     return "$hours:$minutes:$secs";
   }

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: const Text('Workout Analytics')),
       body: _workouts.isEmpty
           ? const Center(child: Text('No workouts recorded yet.'))
           : ListView.builder(
               itemCount: _workouts.length,
               itemBuilder: (context, index) {
                 final workout = _workouts[index];
                 return ListTile(
                   title: Text('Workout ${index + 1}'), // Or use workout name if you add it to the model
                   subtitle: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Text('Start Time: ${DateFormat('yyyy-MM-dd HH:mm:ss').format(workout.startTime!)}'),
                       Text('Duration: ${_formatDuration(workout.durationSeconds)}'),
                     ],
                   ),
                   trailing: const Icon(Icons.fitness_center), // Example icon
                 );
               },
             ),
     );
   }
 }

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Explanation:

_workouts List: Stores the list of Workout objects fetched from Isar.
_loadWorkouts(): Fetches all workouts from Isar using isar.workouts.where().sortByStartTimeDesc().findAll(). sortByStartTimeDesc() sorts them by start time in descending order (newest first).
_formatDuration(): Formats duration in seconds to HH:MM:SS.
ListView.builder: Displays the list of workouts. Each workout is shown in a ListTile.

Add Navigation (Simple Bottom Navigation Bar in main.dart for example):

       // ... in main.dart, modify your MyApp widget

 class MyApp extends StatefulWidget { // Make MyApp StatefulWidget
   const MyApp({super.key});

   @override
   State<MyApp> createState() => _MyAppState();
 }

 class _MyAppState extends State<MyApp> {
   int _selectedIndex = 0; // Track selected tab

   static const List<Widget> _widgetOptions = <Widget>[
     WorkoutTimerScreen(), // Your Timer Screen
     AnalyticsScreen(),     // Your Analytics Screen
     Text('Settings Screen Coming Soon'), // Placeholder for Settings
   ];

   void _onItemTapped(int index) {
     setState(() {
       _selectedIndex = index;
     });
   }

   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Workout App',
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
       home: Scaffold( // Wrap with Scaffold to add bottom navigation
         body: Center(
           child: _widgetOptions.elementAt(_selectedIndex), // Show selected screen
         ),
         bottomNavigationBar: BottomNavigationBar(
           items: const <BottomNavigationBarItem>[
             BottomNavigationBarItem(
               icon: Icon(Icons.timer),
               label: 'Timer',
             ),
             BottomNavigationBarItem(
               icon: Icon(Icons.analytics),
               label: 'Analytics',
             ),
             BottomNavigationBarItem(
               icon: Icon(Icons.settings),
               label: 'Settings',
             ),
           ],
           currentIndex: _selectedIndex,
           selectedItemColor: Colors.blue,
           onTap: _onItemTapped,
         ),
       ),
     );
   }
 }

IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Dart

IGNORE_WHEN_COPYING_END

Now your app should have a bottom navigation bar to switch between the Timer and Analytics screens.

Step 6: Run and Test!

Run your app: In your terminal:
```
       flutter run
```
IGNORE_WHEN_COPYING_START

content_copy download

Use code with caution.Bash

IGNORE_WHEN_COPYING_END
Test each feature:
- Timer: Start, pause, resume, stop the timer. Check if the time is displayed correctly.
- Saving Workouts: Stop a workout and see if you get the "Workout saved!" message.
- Analytics: Go to the Analytics screen and see if your saved workouts are listed.
- Notifications: Check if you receive the water, meal, and sleep notifications at (roughly) the scheduled times. You might need to wait a bit for scheduled notifications to appear. Test notifications on a real device for best results.

Simple Words Summary of the Steps:

Build the Foundation: Create a Flutter project.
Add Memory: Include Isar database to store workout data on your phone.
Create the Timer: Build a screen with a timer that tracks your workout time.
Store Workout Data: When you stop the timer, save the workout time to Isar.
Send Reminders: Add push notifications for water, meals, and sleep.
Show Progress: Make an Analytics screen to display your workout history from Isar.
Connect Screens: Use a bottom navigation bar to move between the timer and analytics screens.
Test Everything: Run your app and make sure all features work as expected!

Next Steps and Customization Ideas:

Workout Naming: Allow users to name their workouts. Add a name field to the Workout model.
Workout Types: Let users categorize workouts (e.g., "Strength," "Cardio"). Add a type field.
Customizable Notifications: Let users set their own notification times and choose which reminders they want. Create a Settings screen for this.
More Analytics: Show charts or graphs of workout duration over time, weekly/monthly summaries, etc.
Workout Plans: Create features to plan workouts, set goals, and track progress towards those goals.
UI/UX Improvements: Make the app look nicer with better design, colors, and animations.
Settings Screen: Add a dedicated settings screen to control notifications, app preferences, etc.

This is a basic framework to get you started. You can expand on these steps to create a more feature-rich and customized workout app! Let me know if you have any specific parts you want to dive deeper into, or if you have more questions.

Offline Workout app with Flutter, Isar Database

Subscribe to my newsletter

Singaraju Saiteja

Singaraju Saiteja