at_sync_ui_flutter 1.0.13 copy "at_sync_ui_flutter: ^1.0.13" to clipboard
at_sync_ui_flutter: ^1.0.13 copied to clipboard

A Flutter plugin project to provide UI widgets for displaying status of sync process in atProtocol apps.

The Atsign FoundationThe Atsign Foundation

pub package gitHub license

Overview #

The at_sync_ui_flutter package is for Flutter developers who want to implement the UI indicator for sync process.

This open source package is written in Dart, supports Flutter and follows the atPlatform's decentralized, edge computing model with the following features:

  • Cryptographic control of data access through personal data stores
  • No application backend needed
  • End to end encryption where only the data owner has the keys
  • Private and surveillance free connectivity
  • Display visual indicator for sync in progress

We call giving people control of access to their data “flipping the internet” and you can learn more about how it works by reading this overview.

Get started #

There are three options to get started using this package.

1. Quick start - generate a skeleton app with at_app #

This package includes a working sample application in the Example directory that you can use to create a personalized copy using at_app create in four commands.

$ flutter pub global activate at_app 
$ at_app create --sample=<package ID> <app name> 
$ cd <app name>
$ flutter run

Notes:

  1. You only need to run flutter pub global activate once
  2. Use at_app.bat for Windows

2. Clone it from GitHub #

Feel free to fork a copy of the source from the GitHub repo. The example code contained there is the same as the template that is used by at_app above.

$ git clone https://github.com/atsign-foundation/at_widgets.git

3. Manually add the package to a project #

Instructions on how to manually add this package to you project can be found on pub.dev here.

How it works #

Setup #

Initialising: #

It is expected that the app will first authenticate an atsign using the Onboarding widget.

The AtSyncUIService needs to be initialised with a required GlobalKey

    AtSyncUIService().init(
        appNavigator: navKey,
        style: _atSyncUIStyle,
        onSuccessCallback: _onSuccessCallback,
        onErrorCallback: _onErrorCallback,
      );

The app can select:

  • the style of the UI either Material or Cupertino by passing the style param to [init()] call.
  • the type of overlay to be shown while syncing either Dialog or Snackbar by passing the atSyncUIOverlay param to [init()] call.
  • the onSuccessCallback will be called everytime sync completes with success.
  • the onErrorCallback will be called everytime sync completes with failure.
  • the primaryColor, backgroundColor, labelColor will be used while displaying overlay/snackbar.

Usage #

To call sync and show selected UI:

    AtSyncUIService().sync(
        atSyncUIOverlay: AtSyncUIOverlay.snackbar,
    );

To use listener; can be used to listen to sync status changes:

    AtSyncUIService().atSyncUIListener

Plugin description #

This plugin provides the following material and cuppertino widgets:

  • AtSyncButton
  • AtSyncIndicator
  • AtSyncLinearProgressIndicator
  • AtSyncText
  • AtSyncDialog
  • AtSyncSnackBar

Sample usage #

AtSyncButton

AtSyncButton(
    isLoading: isLoading,
    syncIndicatorColor: Colors.white,
    child: IconButton(
        icon: const Icon(Icons.android),
        onPressed: ...,
    ),
)

AtSyncIndicator

AtSyncIndicator(
    value: progress,
    color: _indicatorColor,
)

AtSyncLinearProgressIndicator

AtSyncLinearProgressIndicator(
    value: progress,
    color: _indicatorColor,
)

AtSyncText

AtSyncText(
    value: progress,
    child: const Text('completed'),
    indicatorColor: _indicatorColor,
)

AtSyncDialog

final dialog = material.AtSyncDialog(context: context);
dialog.show(message: 'Downloading ...');
dialog.update(value: _value, message: 'Downloading ...');
dialog.close();

AtSyncSnackBar

final snackBar = material.AtSyncSnackBar(context: context);
snackBar.show(message: 'Downloading ...');
snackBar.update(value: _value, message: 'Downloading ...');
snackBar.dismiss();

Example #

We have a good example with explanation in the at_sync_ui_flutter package.

Open source usage and contributions #

This is open source code, so feel free to use it as is, suggest changes or enhancements or create your own version. See CONTRIBUTING.md for detailed guidance on how to setup tools, tests and make a pull request.

3
likes
150
pub points
43%
popularity

Publisher

verified publisheratsign.org

A Flutter plugin project to provide UI widgets for displaying status of sync process in atProtocol apps.

Homepage
Repository (GitHub)
View/report issues
Contributing

Documentation

Documentation
API reference

License

BSD-3-Clause (license)

Dependencies

at_client, at_client_mobile, at_common_flutter, flutter

More

Packages that depend on at_sync_ui_flutter