added save image and more feature

lib/main.dart

@@ -1,13 +1,26 @@
 import 'package:flutter/material.dart';
-import 'package:mewarna/homepage.dart';
+import 'package:hive_flutter/hive_flutter.dart';
-import 'package:mewarna/pages/mewarna.dart';
-import 'package:mewarna/pages/pilihKategori.dart';
-import 'package:mewarna/pages/tentang.dart';
 
-import 'pages/binatang.dart';
+import 'package:mewarna/homepage.dart';
+// import 'package:mewarna/pages/mewarna.dart';
+import 'package:mewarna/pages/pilihKategori.dart';
+// import 'package:mewarna/pages/tentang.dart';
+import 'package:mewarna/pages/tentang1.dart';
+
+import 'model/model_data.dart';
+import 'pages/kategori.dart';
 import 'pages/mewarna1.dart';
 
-void main() {
+import 'package:flutter_easyloading/flutter_easyloading.dart';
+import 'package:flutter/services.dart';
+
+Future main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+  await Hive.initFlutter();
+
+  Hive.registerAdapter(ModelAdapter());
+  await Hive.openBox<Model>('model');
+
   runApp(const MyApp());
 }
 
@@ -17,14 +30,19 @@ class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([
+      DeviceOrientation.portraitUp,
+      DeviceOrientation.portraitDown,
+    ]);
     return MaterialApp(
       //add the routes
       routes: {
         '/': (context) => const HomePage(),
         '/pilih_kategori': (context) => const PilihKategori(),
-        '/tentang': (context) => const Tentang(),
+        // '/tentang': (context) => const Tentang(),
-        '/binatang': (context) => const BinatangPage(),
+        '/tentang': (context) => const Tentang1(),
-        '/mewarna': (context) => const MewarnaPage(),
+        '/kategori': (context) => const KategoriPage(),
+        // '/mewarna': (context) => const MewarnaPage(),
         '/mewarna1': (context) => const Mewarna1Page(),
       },
       initialRoute: '/',
@@ -32,6 +50,7 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
+      builder: EasyLoading.init(),
     );
   }
 }

lib/model/model_data.dart

@@ -0,0 +1,12 @@
+import 'package:hive/hive.dart';
+
+part 'model_data.g.dart';
+
+@HiveType(typeId: 0)
+class Model extends HiveObject {
+  @HiveField(0)
+  late DateTime createdDate;
+
+  @HiveField(1)
+  late String datanya;
+}

lib/model/model_data.g.dart

@@ -0,0 +1,43 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'model_data.dart';
+
+// **************************************************************************
+// TypeAdapterGenerator
+// **************************************************************************
+
+class ModelAdapter extends TypeAdapter<Model> {
+  @override
+  final int typeId = 0;
+
+  @override
+  Model read(BinaryReader reader) {
+    final numOfFields = reader.readByte();
+    final fields = <int, dynamic>{
+      for (int i = 0; i < numOfFields; i++) reader.readByte(): reader.read(),
+    };
+    return Model()
+      ..createdDate = fields[0] as DateTime
+      ..datanya = fields[1] as String;
+  }
+
+  @override
+  void write(BinaryWriter writer, Model obj) {
+    writer
+      ..writeByte(2)
+      ..writeByte(0)
+      ..write(obj.createdDate)
+      ..writeByte(1)
+      ..write(obj.datanya);
+  }
+
+  @override
+  int get hashCode => typeId.hashCode;
+
+  @override
+  bool operator ==(Object other) =>
+      identical(this, other) ||
+      other is ModelAdapter &&
+          runtimeType == other.runtimeType &&
+          typeId == other.typeId;
+}

lib/pages/binatang.dart

@@ -1,103 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-
-class BinatangPage extends HookWidget {
-  const BinatangPage({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Binatang'),
-      ),
-      body: Stack(
-        fit: StackFit.expand,
-        children: [
-          Image.asset(
-            "assets/bg.jpg",
-            fit: BoxFit.cover,
-            color: Colors.black.withOpacity(0.2),
-            colorBlendMode: BlendMode.darken,
-          ),
-          Center(
-            // add two buttons, one named "Pilih Kategori" , the other named "Tentang"
-            child: SingleChildScrollView(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: <Widget>[
-                  //make the button same width
-                  SizedBox(
-                    // width is half of the screen width
-                    width: MediaQuery.of(context).size.width / 3,
-                    child: ElevatedButton(
-                      child: const Text('Burung'),
-                      onPressed: () {
-                        Navigator.pushNamed(context, '/mewarna1',
-                            arguments: {'kategori': 'hewan', 'nama': 'burung'});
-                      },
-                    ),
-                  ),
-                  const SizedBox(
-                    height: 15,
-                  ),
-                  SizedBox(
-                    width: MediaQuery.of(context).size.width / 3,
-                    child: ElevatedButton(
-                      child: const Text('Kelinci'),
-                      onPressed: () {
-                        Navigator.pushNamed(context, '/mewarna1', arguments: {
-                          'kategori': 'hewan',
-                          'nama': 'kelinci'
-                        });
-                      },
-                    ),
-                  ),
-                  const SizedBox(
-                    height: 15,
-                  ),
-                  SizedBox(
-                    width: MediaQuery.of(context).size.width / 3,
-                    child: ElevatedButton(
-                      child: const Text('Gajah'),
-                      onPressed: () {
-                        Navigator.pushNamed(context, '/mewarna1',
-                            arguments: {'kategori': 'hewan', 'nama': 'gajah'});
-                      },
-                    ),
-                  ),
-                  const SizedBox(
-                    height: 15,
-                  ),
-                  SizedBox(
-                    width: MediaQuery.of(context).size.width / 3,
-                    child: ElevatedButton(
-                      child: const Text('Monyet'),
-                      onPressed: () {
-                        Navigator.pushNamed(context, '/mewarna1',
-                            arguments: {'kategori': 'hewan', 'nama': 'monyet'});
-                      },
-                    ),
-                  ),
-                  const SizedBox(
-                    height: 15,
-                  ),
-                  SizedBox(
-                    width: MediaQuery.of(context).size.width / 3,
-                    child: ElevatedButton(
-                      child: const Text('Singa'),
-                      onPressed: () {
-                        Navigator.pushNamed(context, '/mewarna1',
-                            arguments: {'kategori': 'hewan', 'nama': 'singa'});
-                      },
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            // child: Text('Home Page'),
-          ),
-        ],
-      ),
-    );
-  }
-}

lib/pages/kategori.dart

@@ -0,0 +1,188 @@
+import 'package:flutter/material.dart';
+// import 'package:flutter_hooks/flutter_hooks.dart';
+
+class KategoriPage extends StatefulWidget {
+  const KategoriPage({Key? key}) : super(key: key);
+
+  @override
+  State<KategoriPage> createState() => _KategoriPageState();
+}
+
+class _KategoriPageState extends State<KategoriPage> {
+  late String _kategori;
+
+  late List<Widget> _listKategori;
+  // late List<String> _list;
+
+  //create list of categories that contain map of category name
+  //and image path
+  final List<Map<String, dynamic>> _categories = [
+    {
+      'name': 'Binatang',
+      'folder': 'binatang',
+      'list': ["Burung", "Kelinci", "Gajah", "Monyet", "Singa"],
+    },
+    {
+      'name': 'Kenderaan',
+      'folder': 'kenderaan',
+      'list': ["Mobil", "Motor", "Pesawat", "Bis", "Truk"],
+    },
+    {
+      'name': 'Sayur-Sayuran',
+      'folder': 'sayur',
+      'list': ["Kubis", "Terong", "Tomat", "Wortel", "Cendawan"],
+    },
+    {
+      'name': 'Buah-Buahan',
+      'folder': 'buah',
+      'list': ["Apel", "Alpukat", "Lemon", "Mangga", "Pisang"],
+    }
+  ];
+
+  @override
+  void didChangeDependencies() {
+    // ignore: todo
+    // TODO: implement didChangeDependencies
+    super.didChangeDependencies();
+    _kategori = ModalRoute.of(context)!.settings.arguments as String;
+    List _list = _categories
+        .firstWhere((element) => element['name'] == _kategori)['list'];
+    String _folder = _categories
+        .firstWhere((element) => element['name'] == _kategori)['folder'];
+    // print(_categories);
+    // loop the _list and create a list of widget
+    _listKategori = _list.map((element) {
+      return Container(
+        margin: const EdgeInsets.all(10),
+        child: SizedBox(
+          width: MediaQuery.of(context).size.width / 3,
+          child: ElevatedButton(
+            child: Text(element),
+            onPressed: () {
+              Navigator.pushNamed(
+                context,
+                '/mewarna1',
+                arguments: {
+                  'kategori': _folder,
+                  'nama': element.toString().toLowerCase()
+                },
+              );
+            },
+          ),
+        ),
+      );
+    }).toList();
+
+    // print(_kategori);
+  }
+
+  @override
+  void setState(VoidCallback fn) {
+    // ignore: todo
+    // TODO: implement setState
+    if (mounted) {
+      super.setState(fn);
+    }
+    // super.setState(fn);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Binatang'),
+      ),
+      body: Stack(
+        fit: StackFit.expand,
+        children: [
+          Image.asset(
+            "assets/bg.jpg",
+            fit: BoxFit.cover,
+            color: Colors.black.withOpacity(0.2),
+            colorBlendMode: BlendMode.darken,
+          ),
+          Center(
+            // add two buttons, one named "Pilih Kategori" , the other named "Tentang"
+            child: SingleChildScrollView(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: <Widget>[
+                  // load the _listKategori
+                  ..._listKategori,
+
+                  //make the button same width
+                  // SizedBox(
+                  //   // width is half of the screen width
+                  //   width: MediaQuery.of(context).size.width / 3,
+                  //   child: ElevatedButton(
+                  //     child: const Text('Burung'),
+                  //     onPressed: () {
+                  //       Navigator.pushNamed(context, '/mewarna1',
+                  //           arguments: {'kategori': 'hewan', 'nama': 'burung'});
+                  //     },
+                  //   ),
+                  // ),
+                  // const SizedBox(
+                  //   height: 15,
+                  // ),
+                  // SizedBox(
+                  //   width: MediaQuery.of(context).size.width / 3,
+                  //   child: ElevatedButton(
+                  //     child: const Text('Kelinci'),
+                  //     onPressed: () {
+                  //       Navigator.pushNamed(context, '/mewarna1', arguments: {
+                  //         'kategori': 'hewan',
+                  //         'nama': 'kelinci'
+                  //       });
+                  //     },
+                  //   ),
+                  // ),
+                  // const SizedBox(
+                  //   height: 15,
+                  // ),
+                  // SizedBox(
+                  //   width: MediaQuery.of(context).size.width / 3,
+                  //   child: ElevatedButton(
+                  //     child: const Text('Gajah'),
+                  //     onPressed: () {
+                  //       Navigator.pushNamed(context, '/mewarna1',
+                  //           arguments: {'kategori': 'hewan', 'nama': 'gajah'});
+                  //     },
+                  //   ),
+                  // ),
+                  // const SizedBox(
+                  //   height: 15,
+                  // ),
+                  // SizedBox(
+                  //   width: MediaQuery.of(context).size.width / 3,
+                  //   child: ElevatedButton(
+                  //     child: const Text('Monyet'),
+                  //     onPressed: () {
+                  //       Navigator.pushNamed(context, '/mewarna1',
+                  //           arguments: {'kategori': 'hewan', 'nama': 'monyet'});
+                  //     },
+                  //   ),
+                  // ),
+                  // const SizedBox(
+                  //   height: 15,
+                  // ),
+                  // SizedBox(
+                  //   width: MediaQuery.of(context).size.width / 3,
+                  //   child: ElevatedButton(
+                  //     child: const Text('Singa'),
+                  //     onPressed: () {
+                  //       Navigator.pushNamed(context, '/mewarna1',
+                  //           arguments: {'kategori': 'hewan', 'nama': 'singa'});
+                  //     },
+                  //   ),
+                  // ),
+                ],
+              ),
+            ),
+            // child: Text('Home Page'),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/mewarna1.dart

@@ -1,10 +1,21 @@
+// ignore_for_file: avoid_print
+
+import 'dart:convert';
+import 'dart:io';
+
+import 'dart:typed_data';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter_colorpicker/flutter_colorpicker.dart';
-// import 'package:flutter/services.dart';
+// import 'package:image_gallery_saver/image_gallery_saver.dart';
-// import 'dart:ui' as ui;
+import 'package:path_provider/path_provider.dart';
+import 'dart:ui' as ui;
 
 import '../controller/myCustonPainter.dart';
-// import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_easyloading/flutter_easyloading.dart';
+
+import 'package:intl/intl.dart' show toBeginningOfSentenceCase;
 
 class Mewarna1Page extends StatefulWidget {
   const Mewarna1Page({Key? key}) : super(key: key);
@@ -17,29 +28,72 @@ class _Mewarna1PageState extends State<Mewarna1Page> {
   // List<Offset?> points = [];
   List<DrawingArea?> points = [];
   // List<DrawingArea?> undoPoints = [];
-  Color selectedColor = Colors.black.withOpacity(0.08);
+  Color selectedColor = Colors.black.withOpacity(0.01);
   double strokeWidth = 2.0;
   // ui.Image? image;
 
   late Map args;
 
-  // @override
+  final GlobalKey _globalKey = GlobalKey();
-  // void initState() {
+
-  //   // TODO: implement initState
+  Uint8List? _bytes;
-  //   super.initState();
+  String _ini = 'tiada';
-  //   // selectedColor = Colors.black;
+
-  //   // strokeWidth = 2.0;
+  bool _delete = false;
-  //   // loadImage('assets/hewan/singa.jpg');
+
-  //   args = ModalRoute.of(context)?.settings.arguments as Map;
+  // ignore: unused_element
-  //   print(args);
+  // Future _saveNetworkImage() async {
+  //   // String path =
+  //   //     'https://image.shutterstock.com/image-photo/montreal-canada-july-11-2019-600w-1450023539.jpg';
+  //   // GallerySaver.saveImage(path, albumName: "Download");
   // }
 
+  Future _saveImage(Uint8List bytes) async {
+    final appStorage = await getApplicationDocumentsDirectory();
+    final file = File('${appStorage.path}/screenshot.png');
+    await file.writeAsBytes(bytes);
+  }
+
+  Future<Uint8List> _capturePng() async {
+    // try {
+    await EasyLoading.show(
+      status: 'loading...',
+      maskType: EasyLoadingMaskType.black,
+    );
+    RenderRepaintBoundary boundary =
+        _globalKey.currentContext!.findRenderObject()! as RenderRepaintBoundary;
+    ui.Image image = await boundary.toImage(pixelRatio: 3.0);
+    ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
+    var pngBytes = byteData!.buffer.asUint8List();
+    var bs64 = base64Encode(pngBytes);
+
+    setState(() {
+      _bytes = base64Decode(bs64);
+      _ini = 'ada';
+      points.clear();
+    });
+    await _saveImage(base64Decode(bs64));
+    // await _saveNetworkImage();
+
+    // await ImageGallerySaver.saveImage(Uint8List.fromList(pngBytes),
+    //     quality: 60, name: "hello");
+
+    await EasyLoading.dismiss();
+
+    return pngBytes;
+    // } catch (e) {
+    //   print(e);
+    //   return null;
+    // }
+  }
+
   @override
   void didChangeDependencies() {
+    // ignore: todo
     // TODO: implement didChangeDependencies
     super.didChangeDependencies();
     args = ModalRoute.of(context)?.settings.arguments as Map;
-    print(args);
+    // print(args);
   }
 
   void selectColor() {
@@ -51,9 +105,9 @@ class _Mewarna1PageState extends State<Mewarna1Page> {
           child: BlockPicker(
             pickerColor: selectedColor,
             onColorChanged: (color) {
-              print(colorToHex(color));
+              // print(colorToHex(color));
               setState(() {
-                selectedColor = color.withOpacity(0.08);
+                selectedColor = color.withOpacity(0.01);
               });
             },
           ),
@@ -79,97 +133,156 @@ class _Mewarna1PageState extends State<Mewarna1Page> {
     return WillPopScope(
       onWillPop: _onWillPopScope,
       child: Scaffold(
+        appBar: AppBar(
+          title: Text(toBeginningOfSentenceCase(args['nama']?.toString()) ??
+              'Mewarna 1'),
+          actions: [
+            Ink(
+              decoration: ShapeDecoration(
+                color: _delete ? Colors.red : Colors.transparent,
+                shape: const CircleBorder(),
+              ),
+              child: IconButton(
+                icon: const Icon(Icons.delete),
+                onPressed: () {
+                  setState(() {
+                    _delete = !_delete;
+                  });
+                },
+              ),
+            ),
+            IconButton(
+              icon: const Icon(Icons.save_alt_outlined),
+              onPressed: () {},
+            ),
+          ],
+        ),
         body: Stack(
           children: [
             Container(
               decoration: const BoxDecoration(
-                  gradient: LinearGradient(
+                gradient: LinearGradient(
-                      begin: Alignment.topCenter,
+                  begin: Alignment.topCenter,
-                      end: Alignment.bottomCenter,
+                  end: Alignment.bottomCenter,
-                      colors: [
+                  colors: [
                     Color.fromRGBO(138, 35, 135, 1.0),
                     Color.fromRGBO(233, 64, 87, 1.0),
                     Color.fromRGBO(242, 113, 33, 1.0),
-                  ])),
+                  ],
+                ),
+              ),
             ),
             Center(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.center,
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  Container(
+                  RepaintBoundary(
-                    width: width * 0.80,
+                    key: _globalKey,
-                    height: height * 0.80,
+                    child: Container(
-                    decoration: BoxDecoration(
+                      width: width * 0.80,
-                      borderRadius:
+                      height: height * 0.70,
-                          const BorderRadius.all(Radius.circular(20.0)),
+                      decoration: BoxDecoration(
-                      boxShadow: [
+                        borderRadius: const BorderRadius.all(
-                        BoxShadow(
+                          Radius.circular(20.0),
-                          color: Colors.black.withOpacity(0.4),
+                        ),
-                          blurRadius: 5.0,
+                        boxShadow: [
-                          spreadRadius: 1.0,
+                          BoxShadow(
-                        )
+                            color: Colors.black.withOpacity(0.4),
-                      ],
+                            blurRadius: 5.0,
-                      image: DecorationImage(
+                            spreadRadius: 1.0,
-                        image: AssetImage("assets/" +
+                          )
-                            args['kategori'] +
+                        ],
-                            "/" +
+                        image: _ini == 'tiada'
-                            args['nama'] +
+                            ? DecorationImage(
-                            ".jpg"),
+                                image: AssetImage("assets/" +
-                        fit: BoxFit.fill,
+                                    args['kategori'] +
+                                    "/" +
+                                    args['nama'] +
+                                    ".jpg"),
+                                fit: BoxFit.fill,
+                              )
+                            : DecorationImage(
+                                image: MemoryImage(_bytes!),
+                                fit: BoxFit.cover,
+                              ),
                       ),
-                    ),
+                      child: GestureDetector(
-                    child: GestureDetector(
+                        onPanDown: (details) {
-                      onPanDown: (details) {
+                          if (_delete) {
-                        setState(() {
+                            setState(() {
-                          // points.add(details.localPosition);
+                              points.add(
-                          // print(points);
+                                DrawingArea(
-                          points.add(
+                                  point: details.localPosition,
-                            DrawingArea(
+                                  areaPaint: Paint()
-                              point: details.localPosition,
+                                    ..strokeCap = StrokeCap.round
-                              areaPaint: Paint()
+                                    ..isAntiAlias = true
-                                ..strokeCap = StrokeCap.round
+                                    ..color = Colors.white.withOpacity(0.07)
-                                ..isAntiAlias = true
+                                    ..strokeWidth = strokeWidth,
-                                ..color = selectedColor
+                                ),
-                                ..strokeWidth = strokeWidth,
+                              );
-                            ),
+                            });
-                          );
+                          } else {
-                        });
+                            setState(() {
-                      },
+                              points.add(
-                      onPanUpdate: (details) {
+                                DrawingArea(
-                        setState(() {
+                                  point: details.localPosition,
-                          // points.add(details.localPosition);
+                                  areaPaint: Paint()
-                          // print(points);
+                                    ..strokeCap = StrokeCap.round
-                          points.add(
+                                    ..isAntiAlias = true
-                            DrawingArea(
+                                    ..color = selectedColor
-                              point: details.localPosition,
+                                    ..strokeWidth = strokeWidth,
-                              areaPaint: Paint()
+                                ),
-                                ..strokeCap = StrokeCap.round
+                              );
-                                ..isAntiAlias = true
+                            });
-                                ..color = selectedColor
+                          }
-                                ..strokeWidth = strokeWidth,
+                        },
-                            ),
+                        onPanUpdate: (details) {
-                          );
+                          if (_delete) {
-                        });
+                            setState(() {
-                      },
+                              points.add(
-                      onPanEnd: (details) {
+                                DrawingArea(
-                        setState(() {
+                                  point: details.localPosition,
-                          points.add(null);
+                                  areaPaint: Paint()
-                          // print(details);
+                                    ..strokeCap = StrokeCap.round
-                        });
+                                    ..isAntiAlias = true
-                      },
+                                    ..color = Colors.white.withOpacity(0.07)
-                      child: ClipRRect(
+                                    ..strokeWidth = strokeWidth,
-                        borderRadius:
+                                ),
-                            const BorderRadius.all(Radius.circular(20.0)),
+                              );
-                        child: CustomPaint(
+                            });
-                          painter: MyCustomPainter(points: points),
+                          } else {
+                            setState(() {
+                              points.add(
+                                DrawingArea(
+                                  point: details.localPosition,
+                                  areaPaint: Paint()
+                                    ..strokeCap = StrokeCap.round
+                                    ..isAntiAlias = true
+                                    ..color = selectedColor
+                                    ..strokeWidth = strokeWidth,
+                                ),
+                              );
+                            });
+                          }
+                        },
+                        onPanEnd: (details) {
+                          setState(() {
+                            points.add(null);
+                            // print(details);
+                          });
+                        },
+                        child: ClipRRect(
+                          borderRadius:
+                              const BorderRadius.all(Radius.circular(20.0)),
+                          child: CustomPaint(
+                            painter: MyCustomPainter(points: points),
+                          ),
                         ),
                       ),
                     ),
                   ),
-                  const SizedBox(
+                  const SizedBox(height: 5),
-                    height: 10,
-                  ),
                   Container(
                     width: width * 0.80,
                     decoration: const BoxDecoration(
@@ -189,7 +302,7 @@ class _Mewarna1PageState extends State<Mewarna1Page> {
                         Expanded(
                           child: Slider(
                             min: 1.0,
-                            max: 7.0,
+                            max: 20.0,
                             activeColor: selectedColor.withOpacity(1),
                             value: strokeWidth,
                             onChanged: (value) {
@@ -211,38 +324,30 @@ class _Mewarna1PageState extends State<Mewarna1Page> {
                             //remove the 10 last points
                             setState(() {
                               if (points.isNotEmpty) {
-                                if (points.length > 20) {
+                                if (points.length > 200) {
                                   points.removeRange(
-                                      points.length - 20, points.length);
+                                      points.length - 200, points.length);
                                 } else {
                                   points.clear();
                                 }
                               }
                             });
                           },
-                          child: Icon(
+                          child: const Icon(
                             Icons.layers_clear,
                             color: Colors.black,
                           ),
                         ),
-                        SizedBox(
+                        IconButton(
-                          width: 10,
+                          onPressed: () async {
+                            _capturePng();
+                            print("sini untuk simpan");
+                            // String path =
+                            //     'https://image.shutterstock.com/image-photo/montreal-canada-july-11-2019-600w-1450023539.jpg';
+                            // await GallerySaver.saveImage(path);
+                          },
+                          icon: const Icon(Icons.save_alt_outlined),
                         ),
-                        // IconButton(
-                        //   onPressed: () {
-                        //     // points.clear();
-                        //     // points.removeLast();
-
-                        //     // search for undoPoints on points and remove it
-                        //     setState(() {
-                        //       // points.removeLast();
-                        //       if (points.isNotEmpty) {
-                        //         points.removeLast();
-                        //       }
-                        //     });
-                        //   },
-                        //   icon: Icon(Icons.layers_clear),
-                        // ),
                       ],
                     ),
                   ),

lib/pages/pilihKategori.dart

@@ -34,7 +34,11 @@ class PilihKategori extends HookWidget {
                     child: ElevatedButton(
                       child: const Text('Binatang'),
                       onPressed: () {
-                        Navigator.pushNamed(context, '/binatang');
+                        Navigator.pushNamed(
+                          context,
+                          '/kategori',
+                          arguments: "Binatang",
+                        );
                       },
                     ),
                   ),
@@ -44,8 +48,14 @@ class PilihKategori extends HookWidget {
                   SizedBox(
                     width: MediaQuery.of(context).size.width / 3,
                     child: ElevatedButton(
-                      child: const Text('Kendaraan'),
+                      child: const Text('Kenderaan'),
-                      onPressed: () {},
+                      onPressed: () {
+                        Navigator.pushNamed(
+                          context,
+                          '/kategori',
+                          arguments: "Kenderaan",
+                        );
+                      },
                     ),
                   ),
                   const SizedBox(
@@ -55,7 +65,13 @@ class PilihKategori extends HookWidget {
                     width: MediaQuery.of(context).size.width / 3,
                     child: ElevatedButton(
                       child: const Text('Sayur-Sayuran'),
-                      onPressed: () {},
+                      onPressed: () {
+                        Navigator.pushNamed(
+                          context,
+                          '/kategori',
+                          arguments: "Sayur-Sayuran",
+                        );
+                      },
                     ),
                   ),
                   const SizedBox(
@@ -65,7 +81,13 @@ class PilihKategori extends HookWidget {
                     width: MediaQuery.of(context).size.width / 3,
                     child: ElevatedButton(
                       child: const Text('Buah-Buahan'),
-                      onPressed: () {},
+                      onPressed: () {
+                        Navigator.pushNamed(
+                          context,
+                          '/kategori',
+                          arguments: "Buah-Buahan",
+                        );
+                      },
                     ),
                   ),
                 ],

lib/pages/tentang.dart

@@ -1,18 +1,105 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
+// import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hive_flutter/hive_flutter.dart';
 
-class Tentang extends HookWidget {
+import '../model/model_data.dart';
-  const Tentang({ Key? key }) : super(key: key);
+
+class Tentang extends StatefulWidget {
+  const Tentang({Key? key}) : super(key: key);
+
+  @override
+  _TentangState createState() => _TentangState();
+}
+
+class _TentangState extends State<Tentang> {
+  // late var box;
+
+  Future<Box<Model>> _openBox() async {
+    return await Hive.openBox<Model>('model');
+  }
+
+  @override
+  void dispose() {
+    Hive.close();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
+    // _openBox();
     return Scaffold(
       appBar: AppBar(
-        title : const Text('Tentang'),
+        title: const Text('Tentang'),
       ),
-      body: const Center(
+      body: Center(
-        child: Text('Tentang'),
+        child: Column(
+          children: [
+            ElevatedButton(
+              child: const Text('Tentang'),
+              onPressed: () {
+                tambah_data();
+              },
+            ),
+            FutureBuilder(
+              future: _openBox(),
+              builder: (context, snapshot) {
+                if (snapshot.connectionState == ConnectionState.done) {
+                  return ValueListenableBuilder<Box<Model>>(
+                    valueListenable: Hive.box<Model>('model').listenable(),
+                    builder: (context, box, _) {
+                      final model = box.values.toList().cast<Model>();
+                      // ignore: avoid_print
+                      print(model);
+                      // create widget of list
+                      return Expanded(
+                        child: ListView.builder(
+                          padding: const EdgeInsets.all(8),
+                          itemCount: model.length,
+                          itemBuilder: (context, index) {
+                            return Card(
+                              child: ListTile(
+                                title: Text(model[index].datanya),
+                                subtitle:
+                                    Text(model[index].createdDate.toString()),
+                                trailing: ElevatedButton(
+                                    onPressed: () {
+                                      box.deleteAt(index);
+                                    },
+                                    child: const Text('Hapus')),
+                              ),
+                            );
+                          },
+                        ),
+                      );
+                    },
+                  );
+                } else {
+                  return const Text('Loading...');
+                }
+              },
+            ),
+          ],
+        ),
       ),
     );
   }
+
+  // ignore: non_constant_identifier_names
+  Future tambah_data() async {
+    // final box = await Hive.openBox<Model>('model');
+    final model = Model()
+      ..createdDate = DateTime.now()
+      ..datanya = 'Tentang1';
+
+    final box = await Hive.openBox<Model>('model');
+    box.add(model);
+    // box.add(model);
+  }
 }
+
+// class Boxes {
+//   static Box<Model> getData() {
+//     Hive.openBox<Model>('model');
+//     return Hive.box<Model>('model');
+//   }
+// }

lib/pages/tentang1.dart

@@ -0,0 +1,278 @@
+import 'package:flutter/material.dart';
+import 'package:mewarna/widgets/ourContainer.dart';
+
+class Tentang1 extends StatelessWidget {
+  const Tentang1({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Tentang'),
+      ),
+      body: Stack(
+        fit: StackFit.expand,
+        children: [
+          Image.asset(
+            "assets/bg.jpg",
+            fit: BoxFit.cover,
+            color: Colors.black.withOpacity(0.2),
+            colorBlendMode: BlendMode.darken,
+          ),
+          Center(
+            child: SizedBox(
+              height: MediaQuery.of(context).size.height * 0.5,
+              child: OurContainer(
+                child: Column(
+                  children: [
+                    SizedBox(
+                      height: MediaQuery.of(context).size.height * 0.02,
+                    ),
+                    Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.26,
+                          child: const Text(
+                            'Nama',
+                            style: TextStyle(
+                              fontSize: 15,
+                              fontWeight: FontWeight.bold,
+                            ),
+                            textAlign: TextAlign.left,
+                          ),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.05,
+                          child: const Text(" : "),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        Flexible(
+                          child: SizedBox(
+                            width: MediaQuery.of(context).size.width * 0.5,
+                            child: const Text(
+                              'DEWI REZKY RAMDHANI T',
+                              style: TextStyle(
+                                fontSize: 15,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ),
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                      ],
+                    ),
+                    SizedBox(
+                      height: MediaQuery.of(context).size.height * 0.02,
+                    ),
+                    Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.26,
+                          child: const Text(
+                            'NIM',
+                            style: TextStyle(
+                              fontSize: 15,
+                              fontWeight: FontWeight.bold,
+                            ),
+                            textAlign: TextAlign.left,
+                          ),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.05,
+                          child: const Text(" : "),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        Flexible(
+                          child: SizedBox(
+                            width: MediaQuery.of(context).size.width * 0.5,
+                            child: const Text(
+                              '217 280 140',
+                              style: TextStyle(
+                                fontSize: 15,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ),
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                      ],
+                    ),
+                    SizedBox(
+                      height: MediaQuery.of(context).size.height * 0.02,
+                    ),
+                    Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.26,
+                          child: const Text(
+                            'Pembimbing 1',
+                            style: TextStyle(
+                              fontSize: 15,
+                              fontWeight: FontWeight.bold,
+                            ),
+                            textAlign: TextAlign.left,
+                          ),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.05,
+                          child: const Text(" : "),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        Flexible(
+                          child: SizedBox(
+                            width: MediaQuery.of(context).size.width * 0.5,
+                            child: const Text(
+                              'Ade Hastuty, ST., S. Kom., MT.',
+                              style: TextStyle(
+                                fontSize: 15,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ),
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                      ],
+                    ),
+                    SizedBox(
+                      height: MediaQuery.of(context).size.height * 0.02,
+                    ),
+                    Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.26,
+                          child: const Text(
+                            'Pembimbing 2',
+                            style: TextStyle(
+                              fontSize: 15,
+                              fontWeight: FontWeight.bold,
+                            ),
+                            textAlign: TextAlign.left,
+                          ),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.05,
+                          child: const Text(" : "),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        Flexible(
+                          child: SizedBox(
+                            width: MediaQuery.of(context).size.width * 0.5,
+                            child: const Text(
+                              'Andi Wafiah, S. Kom., M. Kom.',
+                              style: TextStyle(
+                                fontSize: 15,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ),
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                      ],
+                    ),
+                    SizedBox(
+                      height: MediaQuery.of(context).size.height * 0.02,
+                    ),
+                    Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.26,
+                          child: const Text(
+                            'Judul',
+                            style: TextStyle(
+                              fontSize: 15,
+                              fontWeight: FontWeight.bold,
+                            ),
+                            textAlign: TextAlign.left,
+                          ),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.05,
+                          child: const Text(" : "),
+                        ),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        Flexible(
+                          child: SizedBox(
+                            width: MediaQuery.of(context).size.width * 0.5,
+                            child: const Text(
+                              'APLIKASI PENERAPAN PEMBELAJARAN INTERAKTIF BUKU MEWARNAI BERBASIS ANDROID',
+                              textAlign: TextAlign.justify,
+                              style: TextStyle(
+                                fontSize: 15,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ),
+                        ),
+                        SizedBox(
+                          width: MediaQuery.of(context).size.width * 0.02,
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/ourContainer.dart

@@ -0,0 +1,35 @@
+// ignore_for_file: file_names
+
+import 'package:flutter/material.dart';
+
+class OurContainer extends StatelessWidget {
+  final Widget? child;
+
+  const OurContainer({Key? key, this.child}) : super(key: key);
+  @override
+  Widget build(BuildContext context) {
+    final double left = (MediaQuery.of(context).size.width -
+            (MediaQuery.of(context).size.width * 0.9)) /
+        2;
+    return Container(
+      width: MediaQuery.of(context).size.width * 0.9,
+      margin: EdgeInsets.only(left: left, right: left),
+      padding: const EdgeInsets.only(left: 20, right: 15, bottom: 20, top: 10),
+      decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(20),
+          boxShadow: const [
+            BoxShadow(
+              color: Colors.grey,
+              blurRadius: 10,
+              spreadRadius: 1,
+              offset: Offset(
+                4,
+                4,
+              ),
+            ),
+          ]),
+      child: child,
+    );
+  }
+}

pubspec.lock

@@ -1,6 +1,27 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  _fe_analyzer_shared:
+    dependency: transitive
+    description:
+      name: _fe_analyzer_shared
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "31.0.0"
+  analyzer:
+    dependency: transitive
+    description:
+      name: analyzer
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.8.0"
+  args:
+    dependency: transitive
+    description:
+      name: args
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.0"
   async:
     dependency: transitive
     description:
@@ -15,6 +36,62 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  build:
+    dependency: transitive
+    description:
+      name: build
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.3"
+  build_config:
+    dependency: transitive
+    description:
+      name: build_config
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.7"
+  build_daemon:
+    dependency: transitive
+    description:
+      name: build_daemon
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.10"
+  build_resolvers:
+    dependency: transitive
+    description:
+      name: build_resolvers
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.6"
+  build_runner:
+    dependency: "direct dev"
+    description:
+      name: build_runner
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.12.2"
+  build_runner_core:
+    dependency: transitive
+    description:
+      name: build_runner_core
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.1.12"
+  built_collection:
+    dependency: transitive
+    description:
+      name: built_collection
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.1.1"
+  built_value:
+    dependency: transitive
+    description:
+      name: built_value
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "8.1.4"
   characters:
     dependency: transitive
     description:
@@ -29,6 +106,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.1"
+  checked_yaml:
+    dependency: transitive
+    description:
+      name: checked_yaml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
+  cli_util:
+    dependency: transitive
+    description:
+      name: cli_util
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.3.5"
   clock:
     dependency: transitive
     description:
@@ -36,6 +127,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.1.0"
+  code_builder:
+    dependency: transitive
+    description:
+      name: code_builder
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.7.0"
   collection:
     dependency: transitive
     description:
@@ -43,6 +141,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.15.0"
+  convert:
+    dependency: transitive
+    description:
+      name: convert
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -50,6 +162,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  dart_style:
+    dependency: transitive
+    description:
+      name: dart_style
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.2.1"
   fake_async:
     dependency: transitive
     description:
@@ -57,6 +176,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.2.0"
+  ffi:
+    dependency: transitive
+    description:
+      name: ffi
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.2"
+  file:
+    dependency: transitive
+    description:
+      name: file
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "6.1.2"
+  fixnum:
+    dependency: transitive
+    description:
+      name: fixnum
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -69,6 +209,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.3"
+  flutter_easyloading:
+    dependency: "direct main"
+    description:
+      name: flutter_easyloading
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.3"
   flutter_hooks:
     dependency: "direct main"
     description:
@@ -83,11 +230,116 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  flutter_spinkit:
+    dependency: transitive
+    description:
+      name: flutter_spinkit
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.1.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
     source: sdk
     version: "0.0.0"
+  gallery_saver:
+    dependency: "direct main"
+    description:
+      name: gallery_saver
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.2"
+  glob:
+    dependency: transitive
+    description:
+      name: glob
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.2"
+  graphs:
+    dependency: transitive
+    description:
+      name: graphs
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
+  hive:
+    dependency: "direct main"
+    description:
+      name: hive
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
+  hive_flutter:
+    dependency: "direct main"
+    description:
+      name: hive_flutter
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.0"
+  hive_generator:
+    dependency: "direct dev"
+    description:
+      name: hive_generator
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.2"
+  http:
+    dependency: transitive
+    description:
+      name: http
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.13.4"
+  http_multi_server:
+    dependency: transitive
+    description:
+      name: http_multi_server
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.2.0"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.0"
+  image_gallery_saver:
+    dependency: "direct main"
+    description:
+      name: image_gallery_saver
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.7.1"
+  intl:
+    dependency: "direct main"
+    description:
+      name: intl
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.17.0"
+  io:
+    dependency: transitive
+    description:
+      name: io
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.3"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.6.4"
+  json_annotation:
+    dependency: transitive
+    description:
+      name: json_annotation
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.4.0"
   lints:
     dependency: transitive
     description:
@@ -95,6 +347,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.1"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
   matcher:
     dependency: transitive
     description:
@@ -116,6 +375,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.7.0"
+  mime:
+    dependency: transitive
+    description:
+      name: mime
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
+  package_config:
+    dependency: transitive
+    description:
+      name: package_config
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.2"
   path:
     dependency: transitive
     description:
@@ -123,11 +396,137 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0"
+  path_provider:
+    dependency: "direct main"
+    description:
+      name: path_provider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.9"
+  path_provider_android:
+    dependency: transitive
+    description:
+      name: path_provider_android
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.12"
+  path_provider_ios:
+    dependency: transitive
+    description:
+      name: path_provider_ios
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.8"
+  path_provider_linux:
+    dependency: transitive
+    description:
+      name: path_provider_linux
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.5"
+  path_provider_macos:
+    dependency: transitive
+    description:
+      name: path_provider_macos
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.5"
+  path_provider_platform_interface:
+    dependency: transitive
+    description:
+      name: path_provider_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.3"
+  path_provider_windows:
+    dependency: transitive
+    description:
+      name: path_provider_windows
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.5"
+  pedantic:
+    dependency: transitive
+    description:
+      name: pedantic
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.11.1"
+  platform:
+    dependency: transitive
+    description:
+      name: platform
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.0"
+  plugin_platform_interface:
+    dependency: transitive
+    description:
+      name: plugin_platform_interface
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.2"
+  pool:
+    dependency: transitive
+    description:
+      name: pool
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.5.0"
+  process:
+    dependency: transitive
+    description:
+      name: process
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.2.4"
+  pub_semver:
+    dependency: transitive
+    description:
+      name: pub_semver
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
+  pubspec_parse:
+    dependency: transitive
+    description:
+      name: pubspec_parse
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.2.0"
+  shelf:
+    dependency: transitive
+    description:
+      name: shelf
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.2.0"
+  shelf_web_socket:
+    dependency: transitive
+    description:
+      name: shelf_web_socket
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
   sky_engine:
     dependency: transitive
     description: flutter
     source: sdk
     version: "0.0.99"
+  source_gen:
+    dependency: transitive
+    description:
+      name: source_gen
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.5"
+  source_helper:
+    dependency: transitive
+    description:
+      name: source_helper
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.3.1"
   source_span:
     dependency: transitive
     description:
@@ -149,6 +548,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  stream_transform:
+    dependency: transitive
+    description:
+      name: stream_transform
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   string_scanner:
     dependency: transitive
     description:
@@ -170,6 +576,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.4.8"
+  timing:
+    dependency: transitive
+    description:
+      name: timing
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.0"
   typed_data:
     dependency: transitive
     description:
@@ -184,6 +597,41 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.1"
+  watcher:
+    dependency: transitive
+    description:
+      name: watcher
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.1"
+  web_socket_channel:
+    dependency: transitive
+    description:
+      name: web_socket_channel
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
+  win32:
+    dependency: transitive
+    description:
+      name: win32
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.5.1"
+  xdg_directories:
+    dependency: transitive
+    description:
+      name: xdg_directories
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.2.0+1"
+  yaml:
+    dependency: transitive
+    description:
+      name: yaml
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.0"
 sdks:
   dart: ">=2.16.0-134.5.beta <3.0.0"
-  flutter: ">=1.20.0"
+  flutter: ">=2.8.0"

pubspec.yaml

@@ -36,11 +36,24 @@ dependencies:
   cupertino_icons: ^1.0.2
   flutter_hooks: ^0.18.2+1
   flutter_colorpicker: ^1.0.3
+  hive: ^2.1.0
+  hive_flutter: ^1.1.0
+  image_gallery_saver: ^1.7.1
+  path_provider: ^2.0.9
+  # permission_handler: ^9.2.0
+  gallery_saver: ^2.3.2
+  # scree
+  # loading_overlay: ^0.2.1
+  flutter_easyloading: ^3.0.3
+  intl: ^0.17.0
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
 
+  
+  build_runner: ^1.12.2
+  hive_generator: ^1.0.1
   # The "flutter_lints" package below contains a set of recommended lints to
   # encourage good coding practices. The lint set provided by the package is
   # activated in the `analysis_options.yaml` file located at the root of your
@@ -62,7 +75,10 @@ flutter:
   # To add assets to your application, add an assets section, like this:
   assets:
     - assets/
-    - assets/hewan/
+    - assets/binatang/
+    - assets/sayur/
+    - assets/kenderaan/
+    - assets/buah/
   #   - images/a_dot_burr.jpeg
   #   - images/a_dot_ham.jpeg