`Part 13 - Color Picker

Author: CodingWithTashi

lib/screen/note_detail_page.dart

@@ -1,6 +1,7 @@
 import 'package:drift/drift.dart' as dr;
 import 'package:flutter/material.dart';
 import 'package:note_keeper/database/database.dart';
+import 'package:note_keeper/util/color_picker.dart';
 import 'package:note_keeper/util/priority_picker.dart';
 import 'package:provider/provider.dart';
 
@@ -36,6 +37,7 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
   Widget build(BuildContext context) {
     appDatabase = Provider.of<AppDatabase>(context);
     return Scaffold(
+      backgroundColor: colors[colorLevel],
       appBar: _getDetailAppBar(),
       body: Container(
         padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
@@ -50,6 +52,16 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
             const SizedBox(
               height: 10,
             ),
+            ColorPicker(
+              index: colorLevel,
+              onTap: (selectedColor) {
+                colorLevel = selectedColor;
+                setState(() {});
+              },
+            ),
+            const SizedBox(
+              height: 10,
+            ),
             TextFormField(
               controller: titleEditingController,
               decoration: InputDecoration(
@@ -80,7 +92,7 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
 
   _getDetailAppBar() {
     return AppBar(
-      backgroundColor: Colors.white,
+      backgroundColor: colors[colorLevel],
       elevation: 0,
       leading: IconButton(
         onPressed: () {

lib/util/color_picker.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+List<Color> colors = const [
+  Color(0xFFFFFFFF),
+  Color(0xffF28B83),
+  Color(0xFFFCBC05),
+  Color(0xFFFFF476),
+  Color(0xFFCBFF90),
+  Color(0xFFA7FEEA),
+  Color(0xFFE6C9A9),
+  Color(0xFFE8EAEE),
+  Color(0xFFA7FEEA),
+  Color(0xFFCAF0F8)
+];
+
+class ColorPicker extends StatefulWidget {
+  int index;
+  final Function(int) onTap;
+  ColorPicker({Key? key, required this.index, required this.onTap})
+      : super(key: key);
+
+  @override
+  _ColorPickerState createState() => _ColorPickerState();
+}
+
+class _ColorPickerState extends State<ColorPicker> {
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 30,
+      child: ListView.builder(
+        scrollDirection: Axis.horizontal,
+        itemCount: colors.length,
+        itemBuilder: (context, index) {
+          return InkWell(
+            onTap: () {
+              widget.index = index;
+              widget.onTap(index);
+              setState(() {});
+            },
+            child: Stack(
+              alignment: Alignment.center,
+              children: [
+                Container(
+                  margin: const EdgeInsets.symmetric(horizontal: 5),
+                  width: 30,
+                  height: 30,
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(15),
+                      border: Border.all(color: Colors.black, width: 2),
+                      color: colors[index]),
+                ),
+                widget.index == index ? const Icon(Icons.check) : Container()
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+}