at_sync_ui_flutter

Description:

at sync ui flutter

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
copied to clipboard
Notes:

You only need to run flutter pub global activate once
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
copied to clipboard
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,
);
copied to clipboard
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,
);
copied to clipboard
To use listener; can be used to listen to sync status changes:
AtSyncUIService().atSyncUIListener
copied to clipboard
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: ...,
),
)
copied to clipboard
AtSyncIndicator
AtSyncIndicator(
value: progress,
color: _indicatorColor,
)
copied to clipboard
AtSyncLinearProgressIndicator
AtSyncLinearProgressIndicator(
value: progress,
color: _indicatorColor,
)
copied to clipboard
AtSyncText
AtSyncText(
value: progress,
child: const Text('completed'),
indicatorColor: _indicatorColor,
)
copied to clipboard
AtSyncDialog
final dialog = material.AtSyncDialog(context: context);
dialog.show(message: 'Downloading ...');
dialog.update(value: _value, message: 'Downloading ...');
dialog.close();
copied to clipboard
AtSyncSnackBar
final snackBar = material.AtSyncSnackBar(context: context);
snackBar.show(message: 'Downloading ...');
snackBar.update(value: _value, message: 'Downloading ...');
snackBar.dismiss();
copied to clipboard
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.