DEV Community

Shinya Kato
Shinya Kato

Posted on • Edited on

How to Update Your Profile from Dart/Flutter App using Bluesky API

#dart #flutter #bluesky #api

This article will show you how to update your profile from a Dart/Flutter application using the Bluesky API.

By reading this article, you will be able to easily update your Bluesky profile in your Dart/Flutter app from the Bluesky API.

Using Package

To easily handle the Bluesky API in Dart/Flutter, use the following package.

bluesky | Dart package

The most famous and powerful Dart/Flutter library for Bluesky Social.

favicon pub.dev

GitHub logo myConsciousness / atproto.dart

🦋 AT Protocol and Bluesky things for Dart and Flutter.

bluesky

AT Protocol and Bluesky Social Things for Dart/Flutter 🦋

GitHub Sponsor GitHub Sponsor melos Reference

Test/Analyzer codecov Issues Pull Requests Stars Contributors Code size Last Commits License Contributor Covenant

Welcome to atproto.dart 🦋

This project will maximize your development productivity about AT Protocol and Bluesky things.

Give a ⭐ on GitHub repository and follow shinyakato.dev on Bluesky!

1. Motivation 💪

AT Protocol and Bluesky are awesome.

This wonderful platform needs a standard and highly integrated SDK atproto.dart provides the best development experience in such matters for Dart/Flutter devs.

2. Packages & Tools ⚒️

2.1. Dart Packages

Package pub.dev Docs
at_identifier: core library for the syntax in the AT Protocol standard pub package README
nsid:
…
View on GitHub

If you want to learn more about bluesky package, see following official website.

AT Protocol and Bluesky Social Things for Dart and Flutter | atproto.dart

Powerful suite of AT Protocol and Bluesky-related packages for Dart/Flutter

favicon atprotodart.com

Install

Let's install bluesky with the following commands.

With Dart:

dart pub add bluesky
Enter fullscreen mode Exit fullscreen mode 
dart pub get
Enter fullscreen mode Exit fullscreen mode

With Flutter:

flutter pub add bluesky
Enter fullscreen mode Exit fullscreen mode 
flutter pub get
Enter fullscreen mode Exit fullscreen mode

Import

Basically, when you use features of the bluesky package, just add the following import.

import 'package:bluesky/bluesky.dart';
Enter fullscreen mode Exit fullscreen mode

Implement

We will implement, but let's start with a very simple step. The following example shows the process for updating the displayName and description of an authenticated user.

In order to update a Bluesky profile, you must of course be authorized to update the information for the account you are updating, so be sure to authenticate using the createSession function. You can see more details about authentication on official document.

import 'package:bluesky/bluesky.dart' as bsky;

Future<void> main() async {
  final session = await bsky.createSession(
    identifier: 'HANDLE_OR_EMAIL',
    password: 'PASSWORD',
  );

  final bluesky = bsky.Bluesky.fromSession(session.data);

  final ref = await bluesky.actors.updateProfile(
    displayName: 'Alf',
    description: 'This is my new profile.',
  );

  print(ref.data);
}
Enter fullscreen mode Exit fullscreen mode

As shown in the code above, to update the Bluesky profile of an authenticated user using the bluesky package, use the .updateProfile method of the ActorsService.

So, all you have to do to update your Bluesky profile using the bluesky package is call the .updateProfile method.

The above example only updates the displayName and description, but the following items can be updated.

Parameter Description
displayName A logical name for the profile.
descriotion A description of the account that will be set up in the profile.
avatar An image that symbolizes the account that is set in the profile.
banner A banner image to be set in the profile.
labels An optional tag set for the account.

Setting up a profile picture and label is a bit more difficult than setting up a displayName or description, so we will look at that in the next section.

Update Avatar and Banner

To update your avatar or banner, you must first upload the binary data of the image you wish to set to the server. To upload binary data of images to the server, implement the following.

import 'dart:io';

import 'package:bluesky/bluesky.dart' as bsky;

Future<void> main() async {
  final session = await bsky.createSession(
    identifier: 'HANDLE_OR_EMAIL',
    password: 'PASSWORD',
  );

  final bluesky = bsky.Bluesky.fromSession(session.data);

  // Get image file to be uploaded.
  final image = File('./funny_photo.png');

  // Upload here.
  final uploaded = await bluesky.repositories.uploadBlob(
    image.readAsBytesSync(),
  );
}
Enter fullscreen mode Exit fullscreen mode

As shown in the code above, the .uploadBlob method of the RepositoriesService is used to upload the binary data.

Bluesky Social only supports static images at the time of this writing, but the AT Protocol allows for the upload of binary data in any format.

After a successful upload, you will get a Blob object to pass to the avatar parameter when updating your profile image. All that remains is to pass a Blob object to the avatar parameter as follows.

import 'dart:io';

import 'package:bluesky/bluesky.dart' as bsky;

Future<void> main() async {
  final session = await bsky.createSession(
    identifier: 'HANDLE_OR_EMAIL',
    password: 'PASSWORD',
  );

  final bluesky = bsky.Bluesky.fromSession(session.data);

  final image = File('./funny_photo.png');

  final uploaded = await bluesky.repositories.uploadBlob(
    image.readAsBytesSync(),
  );

  final ref = await bluesky.actors.updateProfile(
    displayName: 'Alf',
    description: 'This is my new profile.',

    // Pass like this.
    avatar: uploaded.data.blob,
  );

  print(ref.data);
}
Enter fullscreen mode Exit fullscreen mode

The banner parameter can also be implemented in exactly the same way as above.

Set Labels

You can set any tags, called a label, to your profile in Bluesky. It is up to you to decide what kind of tags you want to set in your profile, and you can set any string of characters.

And setting up a label for your profile is easier than uploading an image. It can be implemented as follows.

import 'package:bluesky/bluesky.dart' as bsky;

Future<void> main() async {
  final session = await bsky.createSession(
    identifier: 'HANDLE_OR_EMAIL',
    password: 'PASSWORD',
  );

  final bluesky = bsky.Bluesky.fromSession(session.data);

  final ref = await bluesky.actors.updateProfile(
    displayName: 'Alf',
    description: 'This is my new profile.',

    // Add like this.
    labels: bsky.Labels.selfLabels(
      data: bsky.SelfLabels(
        values: [
          bsky.SelfLabel(value: 'developer'),
          bsky.SelfLabel(value: 'flutterdev'),
        ],
      ),
    ),
  );

  print(ref.data);
}
Enter fullscreen mode Exit fullscreen mode

The structure of the objects passed to the labels parameter is somewhat complex, but not as laborious as the upload process. As you can see in the code above, you can set any number of strings as labels.

But well, let's make the implementation just a little more generic.

import 'package:bluesky/bluesky.dart' as bsky;

/// Labels to be set.
const _labels = <String>[
  'developer',
  'flutterdev',
];

Future<void> main() async {
  final session = await bsky.createSession(
    identifier: 'HANDLE_OR_EMAIL',
    password: 'PASSWORD',
  );

  final bluesky = bsky.Bluesky.fromSession(session.data);

  final ref = await bluesky.actors.updateProfile(
    displayName: 'Alf',
    description: 'This is my new profile.',

    labels: bsky.Labels.selfLabels(
      data: bsky.SelfLabels(
        // Fix like this.
        values: _labels.map((e) => bsky.SelfLabel(value: e)).toList(),
      ),
    ),
  );

  print(ref.data);
}
Enter fullscreen mode Exit fullscreen mode

Advanced

So far you have learned how to update your Bluesky profile using the bluesky package, but there is one more thing to consider in order to actually use the .updateProfile method in your Dart/ Flutter app.

Although it is not explicitly shown even in the official Lexicon, a parameter set as null using the .updateProfile method sets the authenticated user's profile data as null. In other words, if you try to update only a specific item and pass the other parameters as null, the profile data for the item associated with the parameter passed as null will be deleted.

So, you must always pass specific values to .updateProfile for parameters other than the item to be deleted, unless the user explicitly takes action to delete a specific item.

But, the problem here is that it is somewhat difficult to find a way to retrieve the uploaded avatar and banner binary data again. You can implement it as follows.

import 'package:bluesky/bluesky.dart' as bsky;

Future<void> main() async {
  final session = await bsky.createSession(
    identifier: 'HANDLE_OR_EMAIL',
    password: 'PASSWORD',
  );

  final bluesky = bsky.Bluesky.fromSession(session.data);

  // The AT Uri for authenticated user's profile.
  // The format can be used as is.
  final profileUri = bsky.AtUri.make(
    session.data.did,
    'app.bsky.actor.profile',
    'self',
  );

  // Get profile record.
  final record = await bluesky.repositories.findRecord(uri: profileUri);
  // And parse value to `ProfileRecord`.
  final profileRecord = bsky.ProfileRecord.fromJson(record.data.value);

  // Very safe update.
  // Replace the item you wish to update with a specific variable.
  final ref = await bluesky.actors.updateProfile(
    displayName: profileRecord.displayName,
    description: profileRecord.description,
    avatar: profileRecord.avatar,
    banner: profileRecord.banner,
    labels: profileRecord.labels,
  );

  print(ref.data);
}
Enter fullscreen mode Exit fullscreen mode

Using the above code as a base, you can update your profile very safely.

Conclusion

Now that you have somewhat understood how to update your Bluesky profile from the Dart/Flutter app using the bluesky package, you can use it to update your Bluesky profile from the Dart/Flutter app. You have also learned that updating your profile using the Bluesky API may seem easy, but in reality it requires some technique.

If you are still not sure how to implement it after reading this article, please mention me at Bluesky.

Also, if you found this article useful, please star the following repositories where bluesky package are developed. This is very helpful to activate the development community.

github_star

GitHub logo myConsciousness / atproto.dart

🦋 AT Protocol and Bluesky things for Dart and Flutter.

bluesky

AT Protocol and Bluesky Social Things for Dart/Flutter 🦋

GitHub Sponsor GitHub Sponsor melos Reference

Test/Analyzer codecov Issues Pull Requests Stars Contributors Code size Last Commits License Contributor Covenant

Welcome to atproto.dart 🦋

This project will maximize your development productivity about AT Protocol and Bluesky things.

Give a ⭐ on GitHub repository and follow shinyakato.dev on Bluesky!

1. Motivation 💪

AT Protocol and Bluesky are awesome.

This wonderful platform needs a standard and highly integrated SDK atproto.dart provides the best development experience in such matters for Dart/Flutter devs.

2. Packages & Tools ⚒️

2.1. Dart Packages

Package pub.dev Docs
at_identifier: core library for the syntax in the AT Protocol standard pub package README
nsid:
…
View on GitHub

Thank you.

Top comments (0)

Read next

mimib00 profile image

DEVLOG[0]: Journey into making no-code Flutter IDE

Mohamed Malkia -

skorfmann profile image

The Journey of CDK.dev: From Static Site to Bluesky

Sebastian Korfmann -

thepracticaldev profile image

Join us for the AssemblyAI Challenge and capture the nuance of human speech: $3,000 in Prizes!

dev.to staff -

thadguidry profile image

How to connect and query multiple databases with a single REST API

Thad Guidry -