Delte button + create wool from modal

.gitignore

@@ -135,4 +135,4 @@ app.*.symbols
 !**/ios/**/default.perspectivev3
 !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
 !/dev/ci/**/Gemfile.lock
-!.vscode/settings.json
+!.vscode/settings.json

lib/database.dart

@@ -13,7 +13,7 @@ class Wolle extends Table {
   IntColumn get id => integer().autoIncrement()();
   TextColumn get manufacture => text()();
   TextColumn get title => text()();
-  TextColumn get color => text().withLength(min: 7, max: 7)();
+  IntColumn get color => integer()();
 }
 
 class TempRange extends Table {

lib/database.g.dart

@@ -30,12 +30,9 @@ class $WolleTable extends Wolle with TableInfo<$WolleTable, WolleData> {
       type: DriftSqlType.string, requiredDuringInsert: true);
   static const VerificationMeta _colorMeta = const VerificationMeta('color');
   @override
-  late final GeneratedColumn<String> color = GeneratedColumn<String>(
+  late final GeneratedColumn<int> color = GeneratedColumn<int>(
       'color', aliasedName, false,
-      additionalChecks:
-          GeneratedColumn.checkTextLength(minTextLength: 7, maxTextLength: 7),
-      type: DriftSqlType.string,
-      requiredDuringInsert: true);
+      type: DriftSqlType.int, requiredDuringInsert: true);
   @override
   List<GeneratedColumn> get $columns => [id, manufacture, title, color];
   @override
@@ -87,7 +84,7 @@ class $WolleTable extends Wolle with TableInfo<$WolleTable, WolleData> {
       title: attachedDatabase.typeMapping
           .read(DriftSqlType.string, data['${effectivePrefix}title'])!,
       color: attachedDatabase.typeMapping
-          .read(DriftSqlType.string, data['${effectivePrefix}color'])!,
+          .read(DriftSqlType.int, data['${effectivePrefix}color'])!,
     );
   }
 
@@ -101,7 +98,7 @@ class WolleData extends DataClass implements Insertable<WolleData> {
   final int id;
   final String manufacture;
   final String title;
-  final String color;
+  final int color;
   const WolleData(
       {required this.id,
       required this.manufacture,
@@ -113,7 +110,7 @@ class WolleData extends DataClass implements Insertable<WolleData> {
     map['id'] = Variable<int>(id);
     map['manufacture'] = Variable<String>(manufacture);
     map['title'] = Variable<String>(title);
-    map['color'] = Variable<String>(color);
+    map['color'] = Variable<int>(color);
     return map;
   }
 
@@ -133,7 +130,7 @@ class WolleData extends DataClass implements Insertable<WolleData> {
       id: serializer.fromJson<int>(json['id']),
       manufacture: serializer.fromJson<String>(json['manufacture']),
       title: serializer.fromJson<String>(json['title']),
-      color: serializer.fromJson<String>(json['color']),
+      color: serializer.fromJson<int>(json['color']),
     );
   }
   @override
@@ -143,12 +140,12 @@ class WolleData extends DataClass implements Insertable<WolleData> {
       'id': serializer.toJson<int>(id),
       'manufacture': serializer.toJson<String>(manufacture),
       'title': serializer.toJson<String>(title),
-      'color': serializer.toJson<String>(color),
+      'color': serializer.toJson<int>(color),
     };
   }
 
   WolleData copyWith(
-          {int? id, String? manufacture, String? title, String? color}) =>
+          {int? id, String? manufacture, String? title, int? color}) =>
       WolleData(
         id: id ?? this.id,
         manufacture: manufacture ?? this.manufacture,
@@ -182,7 +179,7 @@ class WolleCompanion extends UpdateCompanion<WolleData> {
   final Value<int> id;
   final Value<String> manufacture;
   final Value<String> title;
-  final Value<String> color;
+  final Value<int> color;
   const WolleCompanion({
     this.id = const Value.absent(),
     this.manufacture = const Value.absent(),
@@ -193,7 +190,7 @@ class WolleCompanion extends UpdateCompanion<WolleData> {
     this.id = const Value.absent(),
     required String manufacture,
     required String title,
-    required String color,
+    required int color,
   })  : manufacture = Value(manufacture),
         title = Value(title),
         color = Value(color);
@@ -201,7 +198,7 @@ class WolleCompanion extends UpdateCompanion<WolleData> {
     Expression<int>? id,
     Expression<String>? manufacture,
     Expression<String>? title,
-    Expression<String>? color,
+    Expression<int>? color,
   }) {
     return RawValuesInsertable({
       if (id != null) 'id': id,
@@ -215,7 +212,7 @@ class WolleCompanion extends UpdateCompanion<WolleData> {
       {Value<int>? id,
       Value<String>? manufacture,
       Value<String>? title,
-      Value<String>? color}) {
+      Value<int>? color}) {
     return WolleCompanion(
       id: id ?? this.id,
       manufacture: manufacture ?? this.manufacture,
@@ -237,7 +234,7 @@ class WolleCompanion extends UpdateCompanion<WolleData> {
       map['title'] = Variable<String>(title.value);
     }
     if (color.present) {
-      map['color'] = Variable<String>(color.value);
+      map['color'] = Variable<int>(color.value);
     }
     return map;
   }

lib/db_test.dart

@@ -1,16 +1,20 @@
 import 'package:drift/drift.dart';
 import 'package:flutter/material.dart';
+import 'package:hexcolor/hexcolor.dart';
 import 'package:provider/provider.dart';
 import 'package:temperaturdecke/database.dart';
 
-void addWool(BuildContext context) async {
+void addWool(BuildContext context, String title, String? manufacture,
+    Color color) async {
   try {
     AppDatabase db = Provider.of<AppDatabase>(context, listen: false);
 
+    print("adding wool");
+
     db.into(db.wolle).insert(WolleCompanion.insert(
-          title: 'Kakapo',
-          color: '#00FF05',
-          manufacture: 'test',
+          title: title,
+          color: color.value,
+          manufacture: manufacture ?? "none",
         ));
   } catch (e) {
     // Fehlerbehandlung hier
@@ -27,3 +31,13 @@ void removeWool(BuildContext context, int dId) async {
     print('Fehler beim Einfügen: $e');
   }
 }
+
+void deleteEverything(BuildContext context) async {
+  AppDatabase db = Provider.of<AppDatabase>(context, listen: false);
+  // you only need this if you've manually enabled foreign keys
+  // await customStatement('PRAGMA foreign_keys = OFF');
+  for (final table in db.allTables) {
+    await db.delete(table).go();
+  }
+  ;
+}

lib/screens/add_wool_modal.dart

@@ -0,0 +1,97 @@
+import 'package:flex_color_picker/flex_color_picker.dart';
+import 'package:flutter/material.dart';
+import 'package:hexcolor/hexcolor.dart';
+import 'package:temperaturdecke/db_test.dart';
+import 'package:temperaturdecke/widgets/modal_wrapper.dart';
+
+class AddWoolModal extends StatelessWidget {
+  AddWoolModal({super.key});
+
+  Color selectedColor = Colors.white;
+  String title = "";
+  String manufacture = "";
+
+  void setSelectedColor(Color color) {
+    selectedColor = color;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ModalWrapper(
+      Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          SizedBox(
+            height: 15,
+          ),
+          Text(
+            "Randdaten",
+            textAlign: TextAlign.start,
+            style: Theme.of(context).textTheme.headlineSmall,
+          ),
+          SizedBox(
+            height: 10,
+          ),
+          TextField(
+            onChanged: (value) => {title = value},
+            decoration: InputDecoration(
+              border: OutlineInputBorder(),
+              labelText: 'Name',
+            ),
+          ),
+          SizedBox(
+            height: 25,
+          ),
+          TextField(
+            onChanged: (value) => {manufacture = value},
+            decoration: InputDecoration(
+              border: OutlineInputBorder(),
+              labelText: 'Marke',
+            ),
+          ),
+          SizedBox(
+            height: 30,
+          ),
+          Text(
+            "Farbe",
+            textAlign: TextAlign.start,
+            style: Theme.of(context).textTheme.headlineSmall,
+          ),
+          SizedBox(
+            height: 10,
+          ),
+          ColorPicker(
+            spacing: 8,
+            padding: EdgeInsets.all(0),
+            borderRadius: 10,
+            onColorChanged: (value) => setSelectedColor(value),
+            enableShadesSelection: false,
+            enableTonalPalette: true,
+            tonalColorSameSize: true,
+            pickersEnabled: {ColorPickerType.accent: false},
+            tonalSubheading: Divider(),
+          ),
+          SizedBox(
+            height: 25,
+          ),
+          Align(
+            alignment: Alignment.centerRight,
+            child: FilledButton(
+              onPressed: () => addWool(
+                context,
+                title,
+                manufacture,
+                selectedColor,
+              ),
+              child: Text(
+                "Hinzufügen",
+                style: TextStyle(fontSize: 16),
+              ),
+            ),
+          )
+        ],
+      ),
+      title: "Wolle hinzufügen",
+    );
+  }
+}

lib/screens/settings.dart

@@ -22,6 +22,8 @@ class AccentColorExample extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Placeholder();
+    return FilledButton(
+        child: Text("Delete all"),
+        onPressed: () => {deleteEverything(context)});
   }
 }

lib/screens/wool.dart

@@ -1,7 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:shimmer/shimmer.dart';
 import 'package:temperaturdecke/database.dart';
+import 'package:temperaturdecke/screens/add_wool_modal.dart';
 import 'package:temperaturdecke/widgets/cards/wool_card.dart';
+import 'package:temperaturdecke/widgets/custom_card.dart';
 
 class WoolScreen extends StatelessWidget {
   WoolScreen({super.key});
@@ -9,45 +12,95 @@ class WoolScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    Widget child;
+
     return FutureBuilder(
       future: Provider.of<AppDatabase>(context)
           .select(Provider.of<AppDatabase>(context).wolle)
           .get(),
       builder: (BuildContext context, AsyncSnapshot snapshot) {
         if (snapshot.connectionState == ConnectionState.waiting) {
-          return const Center(
-            child: CircularProgressIndicator(),
+          child = Center(
+            child: Shimmer.fromColors(
+              baseColor: Theme.of(context).colorScheme.secondaryContainer,
+              highlightColor: Theme.of(context)
+                  .colorScheme
+                  .onSecondaryContainer
+                  .withOpacity(.3),
+              child: ListView.builder(
+                itemBuilder: (BuildContext context, int index) {
+                  return Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 10),
+                    child: Column(
+                      children: [
+                        CustomCard(
+                          SizedBox(
+                            height: 70,
+                          ),
+                        ),
+                        const SizedBox(
+                          height: 15,
+                        )
+                      ],
+                    ),
+                  );
+                },
+                itemCount: 6,
+              ),
+            ),
           );
         } else {
           // Hier können Sie den Inhalt basierend auf den geladenen Daten anzeigen
-          return Column(
-            children: [
-              Expanded(
-                child: ListView.builder(
-                  itemBuilder: (BuildContext context, int index) {
-                    return Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 10),
-                      child: Column(
-                        children: [
-                          Woolcard(
-                            index,
-                            snapshot.data[index].manufacture,
-                            snapshot.data[index].title,
-                            snapshot.data[index].color,
-                          ),
-                          const SizedBox(
-                            height: 15,
-                          )
-                        ],
-                      ),
-                    );
+          child = Scaffold(
+            floatingActionButton: FloatingActionButton.extended(
+              label: Text("Hinzufügen"),
+              onPressed: () {
+                showModalBottomSheet(
+                  isScrollControlled: true,
+                  showDragHandle: true,
+                  context: context,
+                  builder: (context) {
+                    return AddWoolModal();
                   },
-                  itemCount: snapshot.data.length,
+                );
+              },
+              icon: Icon(Icons.add),
+            ),
+            body: Column(
+              children: [
+                Expanded(
+                  child: ListView.builder(
+                    itemBuilder: (BuildContext context, int index) {
+                      return Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 10),
+                        child: Column(
+                          children: [
+                            Woolcard(
+                              index,
+                              snapshot.data[index].manufacture,
+                              snapshot.data[index].title,
+                              Color(snapshot.data[index].color),
+                            ),
+                            const SizedBox(
+                              height: 15,
+                            )
+                          ],
+                        ),
+                      );
+                    },
+                    itemCount: snapshot.data.length,
+                  ),
                 ),
-              ),
-            ],
+              ],
+            ),
           );
         }
+        return AnimatedSwitcher(
+          duration: Duration(milliseconds: 500),
+          switchInCurve: Curves.easeOut,
+          switchOutCurve: Curves.ease,
+          child: child,
+        );
       },
     );
   }

lib/widgets/cards/wool_card.dart

@@ -9,7 +9,7 @@ class Woolcard extends StatelessWidget {
   int id;
   String manufacture;
   String title;
-  String color;
+  Color color;
   @override
   Widget build(BuildContext context) {
     return CustomCard(Row(
@@ -21,7 +21,7 @@ class Woolcard extends StatelessWidget {
             Container(
               height: 70,
               width: 30,
-              color: HexColor(color),
+              color: color,
             ),
             Padding(
               padding: const EdgeInsets.all(10.0),
@@ -39,6 +39,7 @@ class Woolcard extends StatelessWidget {
           child: IconButton(
             onPressed: () {
               showModalBottomSheet(
+                showDragHandle: true,
                 context: context,
                 builder: (context) {
                   return WoolModal(id);

lib/widgets/modal_wrapper.dart

@@ -1,19 +1,38 @@
 import 'package:flutter/material.dart';
 
 class ModalWrapper extends StatelessWidget {
-  ModalWrapper(this.child, {super.key});
+  ModalWrapper(this.child, {this.title, key});
 
   Widget child;
-
+  String? title;
   @override
   Widget build(BuildContext context) {
     return ClipRRect(
-        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
-        child: SizedBox(
+      borderRadius: BorderRadius.vertical(
+        top: Radius.circular(20),
+      ),
+      child: Wrap(
+        children: [
+          SizedBox(
             width: 750,
+            height: MediaQuery.of(context).size.height - 100,
             child: Padding(
-              padding: EdgeInsets.all(10),
-              child: child,
-            )));
+              padding: EdgeInsets.symmetric(horizontal: 25, vertical: 0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    title ?? "",
+                    textAlign: TextAlign.start,
+                    style: Theme.of(context).textTheme.headlineMedium,
+                  ),
+                  child
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
   }
 }

pubspec.lock

@@ -265,6 +265,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.0"
+  flex_color_picker:
+    dependency: "direct main"
+    description:
+      name: flex_color_picker
+      sha256: "5c846437069fb7afdd7ade6bf37e628a71d2ab0787095ddcb1253bf9345d5f3a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.1"
+  flex_seed_scheme:
+    dependency: transitive
+    description:
+      name: flex_seed_scheme
+      sha256: "4cee2f1d07259f77e8b36f4ec5f35499d19e74e17c7dce5b819554914082bc01"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.5.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -576,6 +592,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  shimmer:
+    dependency: "direct main"
+    description:
+      name: shimmer
+      sha256: "5f88c883a22e9f9f299e5ba0e4f7e6054857224976a5d9f839d4ebdc94a14ac9"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   sky_engine:
     dependency: transitive
     description: flutter

pubspec.yaml

@@ -33,6 +33,10 @@ dependencies:
 
   blobs:
 
+  shimmer:
+
+  flex_color_picker:
+
   hexcolor:
 
   dynamic_color: