Custom colored notes

Added the ability to choose a custom color for your notes from a color wheel.
MoazSalem · Aug 2, 2023 · 8ad5353 · 8ad5353
1 parent 250ef8d
commit 8ad5353
Show file tree

Hide file tree

Showing 12 changed files with 485 additions and 177 deletions.
diff --git a/assets/translations/ar.json b/assets/translations/ar.json
@@ -41,7 +41,7 @@
  "sColorful": "استخدام ايقونات ملونة",
  "Colorful": "الوان اكثر",
  "Empty": "فارغ",
- "sHarmonizeColors": "تغير الالوان الاساسية للتطبيق للتتماشى مع الثيم الحالي",
+ "sHarmonizeColors": "تغير الالوان الاساسية للتطبيق للتتماشى مع الثيم الحالي, لا يعمل مع الملاحظات بالألوان الخاصة",
  "harmonize Colors": "تنسيق الالوان",
  "Backup": "نسخ احتياطي",
  "Restore": "اعادة",
@@ -106,5 +106,5 @@
  "I8": "لانشاء قاعدة بيانات تحتوي على بيانات الملاحظات الخاصة بك وتخزينها على هاتفك الخاص.",
  "Dynamic Colors": "ألوان ديناميكية",
  "DC": "يستخدم الثيم الخاص بالنظام, يعمل بشكل مناسب على اندرويد 12+ فقط",
- "TC": "اظغط هنا لتغير لون الخط"
+ "Ab": "أب"
 }
diff --git a/assets/translations/en.json b/assets/translations/en.json
@@ -41,7 +41,7 @@
  "sShow Edited": "Show or hide 'Edited' on notes",
  "sColorful": "Use Colorful Icons",
  "Colorful": "Colorful",
- "sHarmonizeColors": "Change Notes & Icons colors to work with the dynamic theme",
+ "sHarmonizeColors": "Change Notes & Icons colors to work with the dynamic theme, doesn't work on custom colored notes",
  "harmonize Colors": "Harmonize Colors",
  "Backup": "Backup",
  "Restore": "Restore",
@@ -106,5 +106,5 @@
  "I8": "to make a database to store all of your notes data locally on your phone",
  "Dynamic Colors": "Dynamic Colors",
  "DC": "Use systems theme, this will only work as intended on android 12+",
- "TC": "Press Here To Change Text Color"
+ "Ab": "Ab"
 }
diff --git a/lib/Bloc/notes_bloc.dart b/lib/Bloc/notes_bloc.dart
@@ -291,7 +291,9 @@ class NotesBloc extends Bloc<NotesEvent, NotesState> {
  },
  text: 'Delete'.tr(),
  iconData: Icons.delete,
- color: colors[notes[index]['cindex']],
+ color: notes[index]['cindex'] == 99
+ ? Color(int.parse(notes[index]['extra']))
+ : colors[notes[index]['cindex']],
  textStyle: const TextStyle(color: Colors.white),
  iconColor: Colors.white,
  shape:
@@ -394,12 +396,13 @@ class NotesBloc extends Bloc<NotesEvent, NotesState> {
  required String time,
  required int layout,
  required tIndex,
+ required String extra,
  int? type = 0,
  String? edited = 'no'}) async {
  await database.transaction((txn) async {
  txn
  .rawInsert(
- 'INSERT INTO Notes(title, content, cindex, tindex, type, time, edited ,layout, extra) VALUES("$title", "$content", "$index", "$tIndex", "$type","$time","$edited","$layout","")')
+ 'INSERT INTO Notes(title, content, cindex, tindex, type, time, edited ,layout, extra) VALUES("$title", "$content", "$index", "$tIndex", "$type","$time","$edited","$layout","$extra")')
  .then((value) {});
  });
  await refreshDatabase();
@@ -428,11 +431,12 @@ class NotesBloc extends Bloc<NotesEvent, NotesState> {
  required int type,
  required String title,
  required int layout,
- required tIndex,
+ required int tIndex,
+ required String extra,
  String? edited = 'yes'}) async {
  await database.rawUpdate(
  'UPDATE Notes SET title = ?, content = ?, time = ?, cindex = ?, tindex = ?, type = ?, edited = ?, layout = ?, extra = ? WHERE id = ?',
- [title, content, time, index, tIndex, type, edited, layout, "", id]);
+ [title, content, time, index, tIndex, type, edited, layout, extra, id]);
  await refreshDatabase();
  }
 

diff --git a/lib/Screens/Actions/create_note.dart b/lib/Screens/Actions/create_note.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:easy_localization/easy_localization.dart' hide TextDirection;
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 import 'package:notes/Bloc/notes_bloc.dart';
 import 'package:notes/main.dart';
 
@@ -21,6 +22,13 @@ class _CreateNoteState extends State<CreateNote> {
  late String time;
  int textColor = 0;
  int chosenIndex = 0;
+ Color pickerColor = const Color(0xfffdcb71);
+ Color currentColor = const Color(0xfffdcb71);
+
+ // ValueChanged<Color> callback
+ void changeColor(Color color) {
+ setState(() => pickerColor = color);
+ }
 
  @override
  void initState() {
@@ -36,7 +44,7 @@ class _CreateNoteState extends State<CreateNote> {
  builder: (context, state) {
  return Scaffold(
  resizeToAvoidBottomInset: false,
- backgroundColor: B.colors[chosenIndex],
+ backgroundColor: chosenIndex == 99 ? pickerColor : B.colors[chosenIndex],
  body: Padding(
  padding: const EdgeInsets.only(top: 40.0),
  child: Column(
@@ -63,7 +71,7 @@ class _CreateNoteState extends State<CreateNote> {
  radius: 25,
  child: Icon(
  Icons.arrow_back,
- color: B.colors[chosenIndex],
+ color: chosenIndex == 99 ? pickerColor : B.colors[chosenIndex],
  size: 36,
  ),
  ),
@@ -88,6 +96,7 @@ class _CreateNoteState extends State<CreateNote> {
  content: content,
  index: chosenIndex,
  tIndex: textColor,
+ extra: chosenIndex == 99 ? pickerColor.value.toString() : "",
  layout: getLayout()),
  titleC.text = "",
  contentC.text = "",
@@ -101,7 +110,7 @@ class _CreateNoteState extends State<CreateNote> {
  radius: 25,
  child: Icon(
  Icons.done,
- color: B.colors[chosenIndex],
+ color: chosenIndex == 99 ? pickerColor : B.colors[chosenIndex],
  size: 36,
  ),
  ),
@@ -201,14 +210,70 @@ class _CreateNoteState extends State<CreateNote> {
  child: Padding(
  padding: const EdgeInsets.all(6.0),
  child: Text(
- "TC",
+ "Ab".tr(),
  style: TextStyle(
  color: textColor == 0 ? Colors.white : Colors.black,
  fontSize: B.isTablet ? 40 : 24,
  fontWeight: FontWeight.w500),
  ),
  ),
  ),
+ GestureDetector(
+ onTap: () {
+ chosenIndex = 99;
+ showDialog(
+ context: context,
+ builder: (BuildContext context) => AlertDialog(
+ title: const Text('Choose Color'),
+ content: SingleChildScrollView(
+ child: ColorPicker(
+ pickerColor: pickerColor,
+ onColorChanged: changeColor,
+ enableAlpha: false,
+ hexInputBar: true,
+ paletteType: PaletteType.hueWheel,
+ ),
+ ),
+ actions: <Widget>[
+ ElevatedButton(
+ child: const Text('Done'),
+ onPressed: () {
+ setState(() => currentColor = pickerColor);
+ Navigator.of(context).pop();
+ },
+ ),
+ ],
+ ),
+ );
+ },
+ child: Padding(
+ padding: const EdgeInsets.all(6.0),
+ child: CircleAvatar(
+ radius: 25,
+ backgroundColor: chosenIndex == 99
+ ? textColor == 0
+ ? Colors.white
+ : Colors.black
+ : textColor == 0
+ ? Colors.white54
+ : Colors.black54,
+ child: Stack(alignment: Alignment.center, children: [
+ CircleAvatar(
+ radius: 20,
+ backgroundColor: pickerColor,
+ ),
+ Text(
+ "#",
+ style: TextStyle(
+ color: textColor == 0
+ ? Colors.white
+ : Colors.black,
+ fontSize: 26),
+ )
+ ]),
+ ),
+ ),
+ ),
  GestureDetector(
  onTap: () {
  chosenIndex = index;

diff --git a/lib/Screens/Actions/create_voice.dart b/lib/Screens/Actions/create_voice.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 import 'package:notes/main.dart';
 import 'package:stop_watch_timer/stop_watch_timer.dart';
 import 'package:notes/Bloc/notes_bloc.dart';
@@ -27,6 +28,13 @@ class _CreateVoiceState extends State<CreateVoice> {
  bool isRecording = false;
  bool isPaused = false;
  int textColor = 0;
+ Color pickerColor = const Color(0xfffdcb71);
+ Color currentColor = const Color(0xfffdcb71);
+
+ // ValueChanged<Color> callback
+ void changeColor(Color color) {
+ setState(() => pickerColor = color);
+ }
 
  @override
  void didChangeDependencies() {
@@ -41,7 +49,7 @@ class _CreateVoiceState extends State<CreateVoice> {
  builder: (context, state) {
  return Scaffold(
  resizeToAvoidBottomInset: false,
- backgroundColor: B.colors[chosenIndex],
+ backgroundColor: chosenIndex == 99 ? pickerColor : B.colors[chosenIndex],
  body: Padding(
  padding: const EdgeInsets.only(top: 40.0),
  child: Column(
@@ -74,7 +82,7 @@ class _CreateVoiceState extends State<CreateVoice> {
  radius: 25,
  child: Icon(
  Icons.arrow_back,
- color: B.colors[chosenIndex],
+ color: chosenIndex == 99 ? pickerColor : B.colors[chosenIndex],
  size: 36,
  ),
  ),
@@ -100,6 +108,8 @@ class _CreateVoiceState extends State<CreateVoice> {
  content: content,
  index: chosenIndex,
  tIndex: textColor,
+ extra:
+ chosenIndex == 99 ? pickerColor.value.toString() : "",
  type: 1,
  layout: 0),
  stopWatchTimer.onResetTimer(),
@@ -116,7 +126,7 @@ class _CreateVoiceState extends State<CreateVoice> {
  radius: 25,
  child: Icon(
  Icons.done,
- color: B.colors[chosenIndex],
+ color: chosenIndex == 99 ? pickerColor : B.colors[chosenIndex],
  size: 36,
  ),
  ),
@@ -310,14 +320,70 @@ class _CreateVoiceState extends State<CreateVoice> {
  child: Padding(
  padding: const EdgeInsets.all(6.0),
  child: Text(
- "TC",
+ "Ab".tr(),
  style: TextStyle(
  color: textColor == 0 ? Colors.white : Colors.black,
  fontSize: B.isTablet ? 40 : 24,
  fontWeight: FontWeight.w500),
  ),
  ),
  ),
+ GestureDetector(
+ onTap: () {
+ chosenIndex = 99;
+ showDialog(
+ context: context,
+ builder: (BuildContext context) => AlertDialog(
+ title: const Text('Choose Color'),
+ content: SingleChildScrollView(
+ child: ColorPicker(
+ pickerColor: pickerColor,
+ onColorChanged: changeColor,
+ enableAlpha: false,
+ hexInputBar: true,
+ paletteType: PaletteType.hueWheel,
+ ),
+ ),
+ actions: <Widget>[
+ ElevatedButton(
+ child: const Text('Done'),
+ onPressed: () {
+ setState(() => currentColor = pickerColor);
+ Navigator.of(context).pop();
+ },
+ ),
+ ],
+ ),
+ );
+ },
+ child: Padding(
+ padding: const EdgeInsets.all(6.0),
+ child: CircleAvatar(
+ radius: 25,
+ backgroundColor: chosenIndex == 99
+ ? textColor == 0
+ ? Colors.white
+ : Colors.black
+ : textColor == 0
+ ? Colors.white54
+ : Colors.black54,
+ child: Stack(alignment: Alignment.center, children: [
+ CircleAvatar(
+ radius: 20,
+ backgroundColor: pickerColor,
+ ),
+ Text(
+ "#",
+ style: TextStyle(
+ color: textColor == 0
+ ? Colors.white
+ : Colors.black,
+ fontSize: 26),
+ )
+ ]),
+ ),
+ ),
+ ),
  GestureDetector(
  onTap: () {
  chosenIndex = index;
@@ -340,7 +406,7 @@ class _CreateVoiceState extends State<CreateVoice> {
  ),
  ),
  ),
- ),
+ )
  ],
  )
  : GestureDetector(