Pre-requisites

Ensure you have the Flutter SDK and the x dotnet tool installed:

Both Flutter and .NET have great CLI tooling where you can get a great development experience using a text editor like VS Code with its great multi-terminal support, or if preferred, full-featured IDEs like Android Studio and JetBrains Rider for even richer tooling.

1. Create your .NET Project

Start with your preferred project, or create an empty Project with your preferred project name:

That can be run immediately in the Host project with dotnet watch for a live reload dev UX:

2. Add a new Flutter App to your project

Then from a new Terminal in your Solution folder (e.g. MyApp), add a new Flutter App with:

This will run flutter create to add a new Flutter App to your solution that should look like:

It also adds the servicestack client library package that's pre-configured to call the default Hello API in new ServiceStack projects which we can test by running fluter from myapp_flutter:

We recommend choosing [1] to run the Flutter App as a Windows Desktop App for the best dev UX on Windows, which after a few moments should open the Hello App in a Desktop App:

3. Create your .NET API

Lets create a new API to preview the typical dev workflow of calling new .NET APIs from Flutter. First we'll want to define our API's Service Contract with the Request and Response DTOs the API will accept and return in:

using ServiceStack;
using System.Collections.Generic;

namespace MyApp.ServiceModel;

public class SearchFiles : IReturn<SearchFilesResponse>
{
   public string Pattern { get; set; }
}

public class SearchFilesResponse
{
   public List<string> Results { get; set; }
}

Then add its Implementation that scans the .NET App's folder for files and returns the results:

using ServiceStack;
using MyApp.ServiceModel;

namespace MyApp.ServiceInterface;

public class SearchFilesServices : Service
{
   public object Any(SearchFiles request)
   {
       var files = VirtualFiles.GetAllMatchingFiles(request.Pattern ?? "*");
       return new SearchFilesResponse {
           Results = files.Map(x => x.VirtualPath)
       };
   }
}

dotnet watch should automatically detect the changes and reload the App to take effect.

3. Update Flutter App

Then to update our clients Dart DTOs we just need to run x dart from the Flutter project:

Which can now be used in our App, by replacing the callService() and build() methods with:

void callService() async {
 var response = await client.get(SearchFiles(pattern: myController.text));
 setState(() {
   result = response.results!.join('\n');
 });
}

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(title: Text(widget.title),),
   body: Center(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         Container(
           padding: const EdgeInsets.only(top: 20),
           margin: const EdgeInsets.only(left: 100.0, right: 100.0),
           child: Column(
             children: [
               const Text(
                 'Search Files',
                 style:
                     TextStyle(fontWeight: FontWeight.bold, fontSize: 24.0),
               ),
               TextField(
                 decoration: const InputDecoration(
                   border: OutlineInputBorder(),
                   hintText: '*',
                 ),
                 controller: myController,
               )
             ],
           ),
         ),
         Padding(
           padding: const EdgeInsets.all(8.0),
           child: Text(
             result,
             style: const TextStyle(fontSize: 18),
           ),
         ),
       ],
     ),
   ),
 );
}

Which after a restart should now call our new SearchFiles API returning .NET App files that match the specified pattern:

We hope this was a good waltkthrough to showcase the simplified end-to-end typed dev model for working with ServiceStack's APIs, be sure to check out the Flutter videos for more in-depth explanations or head over to our Support Channels if you have any issues or questions.