Merge pull request #2 from zeeshan-rsys/main

feat: draggable widget

Author: Zeeshan-progs

android/app/src/debug/AndroidManifest.xml

@@ -1,5 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.example.project">
+    package="com.example.100daysofflutter">
     <!-- The INTERNET permission is required for development. Specifically,
          the Flutter tool needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.

android/app/src/main/kotlin/com/example/project/MainActivity.kt

@@ -1,4 +1,4 @@
-package com.example.project
+package com.example.100daysofflutter
 
 import io.flutter.embedding.android.FlutterActivity
 

android/app/src/profile/AndroidManifest.xml

@@ -1,5 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.example.project">
+    package="com.example.100daysofflutter">
     <!-- The INTERNET permission is required for development. Specifically,
          the Flutter tool needs it to communicate with the running application
          to allow setting breakpoints, to provide hot reload, etc.

assets/images/app_icon.png

@@ -0,0 +1,4 @@
+class Assets {
+  Assets._();
+  static const appIcon = 'assets/images/app_icon.png';
+}

lib/constants/assets.dart

@@ -61,7 +61,7 @@ class _AnimatedAlignWidgetState extends State<AnimatedAlignWidget> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: LightAppBar(
-        title: 'Day 1',
+        title: 'Animated align',
       ),
       body: SafeArea(
           child: InkWell(

lib/ui/Alignment_align/animated_align_screen.dart

@@ -0,0 +1,86 @@
+import 'dart:developer';
+
+import 'package:flutter/material.dart';
+import 'package:project/constants/assets.dart';
+import 'package:project/constants/colors.dart';
+import 'package:project/constants/text_theme.dart';
+import 'package:project/widget/light_app_bar.dart';
+
+class DraggableScreen extends StatefulWidget {
+  const DraggableScreen({Key? key}) : super(key: key);
+
+  @override
+  State<DraggableScreen> createState() => _DraggableScreenState();
+}
+
+class _DraggableScreenState extends State<DraggableScreen> {
+  Offset _drag(Draggable draggable, BuildContext contex, Offset offset) {
+    log('check drag - ${offset}');
+    return Offset(20, 40);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: LightAppBar(title: 'Dragabble'),
+      body: SafeArea(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Center(
+              child: Draggable(
+                // use axis to fix your drag in single axis
+                axis: Axis.vertical,
+                affinity: Axis.vertical,
+                // this show you the initial position of draggable widget
+                feedbackOffset: const Offset(1, 1),
+                maxSimultaneousDrags: 1,
+                onDragCompleted: () {
+                  log('drag is done');
+                },
+                data: 10,
+                dragAnchorStrategy: _drag,
+                childWhenDragging: Container(
+                  height: 100,
+                  width: 100,
+                  decoration: BoxDecoration(
+                    border: Border.all(color: AppColors.primaryColor),
+                  ),
+                  child: Center(
+                    child: Text(
+                      'Leave me now',
+                      style: themeData.textTheme.bodyText2?.copyWith(
+                        color: AppColors.primaryColor,
+                      ),
+                    ),
+                  ),
+                ),
+                feedback: Center(
+                  child: Image.asset(
+                    Assets.appIcon,
+                    height: 100,
+                    width: 100,
+                  ),
+                ),
+                child: Container(
+                  height: 100,
+                  width: 100,
+                  color: AppColors.gray,
+                  child: Center(
+                    child: Text(
+                      'Drag me ',
+                      style: themeData.textTheme.bodyText2?.copyWith(
+                        color: AppColors.white,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/ui/dragabble/dragabble.dart

@@ -25,7 +25,10 @@ class _HomeScreenState extends State<HomeScreen> {
             physics: const NeverScrollableScrollPhysics(),
             itemBuilder: ((context, index) {
               var data = tasks[index];
-              return ListCard(data: data);
+              return ListCard(
+                data: data,
+                index: index,
+              );
             }),
             separatorBuilder: (ctx, index) => DeviceUtils.blankHeight(16),
             itemCount: tasks.length,

lib/ui/home_screen.dart

@@ -1,10 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:project/ui/Alignment_align/animated_align_screen.dart';
+import 'package:project/ui/dragabble/dragabble.dart';
 
 class Routes {
- static Map<String, Widget Function(BuildContext)> route = {
-  day1:(context) => const AnimatedAlignWidget(), 
- };
+  static Map<String, Widget Function(BuildContext)> route = {
+    ep1: (context) => const AnimatedAlignWidget(),
+    ep2: (p0) => const DraggableScreen(),
+  };
 
-  static String day1='/day_1_animated_align';
+  static String ep1 = '/animated_align_screen';
+  static String ep2 = '/dragabble';
 }

lib/utils/routes.dart

@@ -17,8 +17,14 @@ class DailyTask {
 List<DailyTask> tasks = [
   DailyTask(
     description: 'Animated align',
-    title: 'Day 1',
+    title: 'Ep: 1',
     cretedAt: DateTime(2022, 10, 8),
-    route: Routes.day1,
+    route: Routes.ep1,
+  ),
+  DailyTask(
+    description: 'Dragabble',
+    title: 'Ep: 2',
+    cretedAt: DateTime(2022, 10, 16),
+    route: Routes.ep2,
   ),
 ];