save_note

Description:

save note

Save Note #

Getting Started #
Features #

In the screenshot editor, you can add notes, draw on the screenshot, and send it to Slack and to other services (see CustomNoteSender example).
Activate a quick action button that allows you to save the screenshot of the current screen and send it to a Slack channel with a note.
Long press the quick action button to dismiss it.
Tap the quick action button to take a screenshot and open the screenshot editor.
Drag the quick action button to move it around the screen.

NoteQuickActionButton.show(context);
copied to clipboard





Configuration #
@override
initState() {
super.initState();

// IMPORTANT: Add the NoteSender to the controller
// This is a one-time setup for the app, and they will be available on Screenshot Editor.

// As an example, we are adding a SlackNoteSender and a [CustomNoteSender] that I created for this example.
AppNoteController().addNoteSenders([
SlackNoteSender(
token: const String.fromEnvironment('SLACK_API_TOKEN'), // Slack API token (xoxb-...) - You can get it from https://api.slack.com/apps
channelId: const String.fromEnvironment('SLACK_CHANNEL_ID_QA'), // Slack channel ID (public or private)
name: 'QA Team Notes',
// Optional
onSuccess: () {
debugPrint('✨ Note sent to Slack!');
},
// Optional
onError: (error) {
debugPrint('🚫 Error sending note to Slack: $error');
},
),
GitlabNoteSender(
projectId: const String.fromEnvironment('GITLAB_PROJECT_ID'),
token: const String.fromEnvironment('GITLAB_TOKEN'),
name: 'Gitlab Issues',
gitlabExtras: GitlabExtras(labels: 'my_notes'), // Initial value - Comma separated labels
onSuccess: () {
debugPrint('✨ Note sent to Gitlab!');
},
onError: (error) {
debugPrint('🚫 Error sending note to Gitlab: $error');
},
),
CustomNoteSender(), // CustomNoteSender is a custom implementation of NoteSender that I created for this example (see example project)
]);
}
copied to clipboard
Configure a VSCode Launcher with --dart-define

Note: You can also use the .env file to store the environment variables in development mode, remote config, or any other aproach that you prefer. For this example, I'm using the launch.json file and dart-define.

{
"version": "0.2.0",
"configurations": [
{
"name": "Flutter",
"request": "launch",
"type": "dart",
"program": "lib/main.dart",
"args": [
"--dart-define=SLACK_API_TOKEN=xoxb-...",
"--dart-define=SLACK_CHANNEL_QA_TEAM=..."
"--dart-define=SLACK_CHANNEL_DEV_TEAM=..."
"--dart-define=SLACK_CHANNEL_STAKEHOLDERS=..."
]
}
]
}
copied to clipboard
Android #
For Android platform, you need to add the following permissions into the AndroidManifest.xml file.
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
copied to clipboard
And don't forget to add the following property to the application tag in the AndroidManifest.xml file.
android:requestLegacyExternalStorage="true"
copied to clipboard
iOS #
For iOS platform, you need to add the following permissions into the Info.plist file.
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Take screenshots and save it</string>
copied to clipboard
Usage Example #
For usage examples, please see the example project.
Built-in Widgets #
ThreeFingerTapDetector
MaterialApp(
home: ThreeFingerTapDetector(
child: Center(
child: Text(
'Tap with three fingers to show the screenshot editor.',
style: TextStyle(color: Colors.white),
),
),
),
),
copied to clipboard
TapCounter
TapCounter(
requiredTaps: 5,
onSuccess: () {
NoteQuickActionButton.show(context);
},
child: OutlinedButton(
onPressed: () async {},
child: const Text('Tap 5 times'),
),
),
copied to clipboard
Important Notes #
Please note that this plugin does not handle the runtime permission checking process.
Therefore, make sure you check the runtime permission first using the permission_handler plugin.