MAUI Task App
This guide shows you how to build a task list app using Ditto and .NET Maui, including how to prepare a MAUI project, set up your app, integrate Ditto, and implement basic create, read, update, delete (CRUD) operations.
For the complete code, see getditto > template-app-maui-tasks-app repository in GitHub.
Before you begin, make sure you meet the following preconditions:
- Visual Studio Code with the following extensions:
- .NET MAUI
- C# Dev Kit
- NuGet Gallery
- .NET version 7.0 or later.
- If developing for iOS, Xcode
- If developing for Android, Android SDK
For more information, see the official Microsoft .NET MAUI > Installation documentation.
Create the MAUI project.
Name the project “DittoMauiTasksApp” and place it in your desired location.
You’ll get a blank .NET MAUI application.
Navigate to DittoMauiTasksApp.csprojand, for now, keep only the iOS and Android targets:
Ditto 4.5.0 supports only .NET iOS and Android. Windows and Mac support is coming soon.
Let’s add some required dependencies. From VS Code’s command pallet, open the NuGet Gallery (you need the extension installed).
Add the latest available Ditto version:
We’ll be using MVVM so make sure to also add CommunityToolkit.Mvvm by Microsoft.
This section includes setting up the MAUI tasks app, without integrating Ditto.
You can check out this branch: https://github.com/getditto/template-app-maui-tasks-app/tree/tasks-app-plain to get this section completed.
Before integrating Ditto, let’s create the app skeleton. We’ll be using the Shell-based template and the MVVM architectural pattern. We’ll have a single page application, so this means we’ll have:
Model - Task
ViewModel - TaskPageViewModel
View - TasksPage
For this application, the model will be a simple Task, with an Id, a body and a completed flag. In the Model folder let’s add the DittoTask class:
The ViewModel will handle the logic behind the view. This means storing and working with the list of tasks that is going to be displayed on the UI.
In the ViewModels folder create a TasksPageviewModelwith the following content:
The ViewModel simply has an ObservableCollection of DittoTask and two commands: to remove and to delete a task.
There’s also an IPopupService, since we need a way to get the Task content. In an Utils folder, you can create the interface:
And its implementation:
Create a new folder Views and add move the existing MainPage.xaml (and MainPage.xaml.cs) there. For additional clarity, these can be renamed to TasksPage(don’t forget to change the name in AppShell.xaml). We’ll replace the content with ours - simply a list that will be displaying the Task content and a checkbox - to track it’s completeness.
And the code-behind, simply setting the Binding Context.
Before running the application, you must handle the service registration. In MauiProgram.cs, under CreateMauiApp(), before returning make sure to include:
You may have to run sudo dotnet workload restore before building.
From the VS Code command palette, select the iOS / Android device you want to run the project on.
Then go to Run → Start Debugging and select the .NET MAUI debugger when prompted.
We’ll end up with an app that can create, read, update and delete tasks.
Create your Ditto App.
Add permissions.
Add Ditto.
Reference Ditto.
Create a task.
Read tasks.
Update a task.
Delete a task.
Run the app.
We first need to create a new app in the [Ditto Portal](https://portal.ditto.live/). Apps created on the portal will automatically sync data between them and also to the Ditto Big Peer. Each app created on the portal has a unique appID which can be seen on your app's settings page once the app has been created. This ID is used in subsequent sections to configure your Ditto instance.
For Ditto to fully use all the network transports like Bluetooth Low Energy, Local Area Network, Apple Wireless Direct, the app will need to ask the user for permission. For that, platform-specific instructions should be followed, so on iOS these must be specified in Info.Plist while on Android, there is AndroidManifest.xml. For more detailed instructions, see Installing C# SDK.
From the MAUI project:
Update Platforms/iOS/Info.Plist:
Update Platforms/Android/AndroidManifest.Plist:
In MauiProgram.cs:
Add the following method to create a new Ditto instance:
This tutorial uses a playground identity for authentication to demonstrate functionality and is not intended for realworld use in product-level apps.
Deploying playground certificates to a live environment could lead to vulnerabilities and security risks. For more information, see Ditto Basics > Authentication and Initialization.
Now, having a Ditto instance created, let’s register that instance as a singleton to have it easily available across the application:
In CreateMauiApp(), before calling builder.Build() and returning, make sure to include this line:
To get access to the Ditto instance, simply add it to the constructor of TasksPageviewModel and then save it in a private field.
We registered Ditto in the Service Collection, so Dependency Injection will automatically resolve the instance.
Create tasks:
To create a Task, we have to modify the AddTaskAsyncmethod. We’ll be getting the task data in the same way, but this time, instead of adding it to the tasks ObservableCollection, we'll execute a DQL statement to add the task to the Ditto Store:
Read tasks:
The read part is actually an observe task where we want to monitor changes to the tasks collection and get updates from other peers as well.
To do that, we need to define a DQL statement:
And register an observer and a subscription. The method looks like this:
And this needs to be called from the TasksPageviewModel's constructor.
Update tasks:
To easily handle state changes for a particular task, we’ll use a feature of MVVM Toolkit: Running code upon changes.
Given our two-way binding defined in TasksPage.xml:
When a user clicks on the checkbox, the value of IsCompleted is going to change. We’ll monitor this directly in the DittoTask class.
Based on the new value, we’ll run a query to update the isCompleted field for that task in the Ditto store.
Delete tasks:
To delete a task, we have to modify the DeleteTaskmethod and run an update query:
Running this query will also notify the registered observer, so there’s no need to update the Tasks collection manually.
This is how the DeleteTask method should look like:
Congratulations you are now complete with the Ditto .NET MAUI task app!
For the complete code, see getditto > template-app-maui-tasks-app repository in GitHub.