mehmetyaz / dashboard

Dynamic dashboard widget that allows your users to create their own layouts. Rezise, move, indirect resize/move, auto re-layout are supported.

Mehmet Yaz 👋

Hello I'm Mehmet from Türkiye, I'm 28. I'm experienced in mobile and web development with Flutter and Vue.js. I'm also interested in machine learning and artificial intelligence.

I'm currently working on my own project that is an e-commerce platform for AI based services.

I am open to work

Open Source Projects:

• Dashboard   (163⭐) : Dynamic dashboard package for Flutter.
• Style Cron Job   (47⭐) : Periodic task syntax / runner package for Dart.
• Binary Tree   (26⭐) : Self balancing binary tree tools package for Dart.
• Style   (25⭐) : Backend framework written in Dart. Archived because it did not attract enough attention.
• Style Random   (19⭐) : Random string generator package for Dart.

Languages and Frameworks:

Used:

Used in at least one project.

              

              

        

🚀 Learning:

Learning in progress.

        

Coded

Coded something but not used in any project.

           

Tried

Tried and learned something but not coded anything.

           

Tools & Technologies:

Used:

Used in at least one project.

              

           

🚀 Learning:

Learning in progress.

        

Flutter

This space is dedicated to Flutter

Highlights

• Contributor: I've been trying to contribute to the Flutter community almost since day one. I've been trying to contribute to the Flutter community almost since day one. I wrote articles on Medium and created open source libraries.
• From the beginning: I have been developing mobile applications with Flutter since one of its first stable versions.
• Experience: I have developed and publish Flutter applications for both Android and iOS platforms. I also gave in to my curiosity and learned dart in depth by working with various libraries such as the analyzer.

Projects

• Congress App: For the company I work for, I developed a mobile application that allows 6 different designs and unlimited color palettes, working with a single backend, to be sold to multiple customers. This application also included services such as Notification etc. It also had to respond to customers' special requests without making changes to the codes of our main application. By creating an architecture from scratch for this application, I developed an application that meets all kinds of special requests and works stably.
• Altogic: I have developed many mobile applications for Altogic. I also led Altogic's Flutter community.
• Dashboard: I developed a dashboard package for Flutter. This package allows you to create dynamic dashboards with a basic configuration.

Questions About Flutter

• Which State Management Solution Do You Prefer?: I prefer to answer this question with many questions such as "which project", "what are their needs" etc. Depending on our needs, if necessary, Bloc, if not, another one in an architecture that we will design according to our current needs or even without any state management solution (setState and notifiers is very good solution).
• Can you create a complex animation?: Yes, I can. I have created many complex animations. I can use CustomPainter and CustomClipper and I can code mathematical calculations.
• Can you create a complex UI?: Yes, I can.
• Can you create an architecture?: Yes, I can. I can create an architecture that can be used in large projects.
• Can you create a package?: Yes, I can. I have created many packages.
• Can you create a plugin?: Yes. But I don't have much experience in this regard.

Focus:

Main: Finding a job / Working for my company.

Side:

• Finishing my project successfully.
• Learning ML related tools(python, pytorch etc.) and disciplines(linear algebra etc.).
• Contributing more to the Flutter community.

I like:

• 🧑‍🏫 Learning : I like learning new things. I am currently learning Machine Learning, Artificial Intelligence, Python, PyTorch, Numpy.
• 🎮 Gaming : I like playing games. I usually play games related to history or structuring something (City builder, Strategy, Tycoon Games etc.). I am a big fan of the Railroad Tycoon series and Going Medieval.
• 🎥 Watching : I like watching documentaries related to history, geography, anthropology.
• 🧘‍♂️ Meditation : I like meditation. I meditate 10 minutes every day.
• 🌿 Nature: I like to be, watch, camp and live in environments isolated from humanity. (I need only internet connection!)
• 👨🏻‍👩‍👦🏻‍👦🏻 Family: I love spending time with my family. I have twin children. I love them so much.

Contact:

• LinkedIn
• Twitter
• Medium

🗺️ Istanbul / Turkey & Sakarya / Turkey

dashboard's Issues

Adding an item into an empty dashboard without triggering EditMode generates error

Steps to reproduce: delete all items in the dashboard, add new item

Reproduced on sample app.

Error: Unexpected null value.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49      throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 528:63  nullCheck
packages/example/storage.dart 397:21                                              onItemsAdded
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
packages/example/storage.dart 393:30                                              onItemsAdded
packages/dashboard/src/controller/dashboard_item_storage.dart 102:12              [_onItemsAdded]
packages/dashboard/src/controller/dashboard_controller.dart 74:28                 add
packages/example/main.dart 288:22                                                 add
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50                <fn>
dart-sdk/lib/async/zone.dart 1653:54                                              runUnary
dart-sdk/lib/async/future_impl.dart 147:18                                        handleValue
dart-sdk/lib/async/future_impl.dart 766:44                                        handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13                                        _propagateToListeners
dart-sdk/lib/async/future_impl.dart 566:5                                         [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 639:7                                         callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                                  _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                                   _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15               <fn>

How can we resize grid item through button action instead of mouse drag ?

How can we resize grid item through button action instead of mouse drag ?

Thanks for this package.

the item is not set on y position

the item place is not change on y position. as shown in this video. how to resolve that

Cloud.IOT.Services.-.Profile.1.-.Microsoft_.Edge.2023-12-12.11-50-14_compressed.mp4

No access to clear cache without recreating ItemController and Storage

There's no access to cached items, its only possible to get a copy. Would be great to have an option to clear cache to force update layout recreation

Recreating item's controller to make simple refresh is not correct

StartX and StartY not assigned after Dashboard is created

Issue

• Adding new colour widget with startX and startY with the help of + button. It's adding the widget but always adding at the top not at the place of startX and startY (Making startX and startY to 0).

How you can reproduce this issue?

• You can add 2 more fields (startX and starY) in the addDialogBox. And assign startX and startY to the ColoredDashboardItem class while adding them to the itemController.

How do I increase the number of grids？

Now the slot parameter can only be one of 4, 6, or 8. Simply increasing the value of slotAspectRatio does not change the number of horizontal grids. I want an application that can run on a large screen. thank you

There is no emptyPlaceholder for empty itemController.

• Need emptyPlaceholder when there is no data means the list is empty.
• emptyPlaceholder can be widget same as the loadingPlaceHolder.
• emptyPlaceholder default value can be empty Sizedbox.

Issue regarding empty placeholder.

When the list is empty and user is in editing mode it's not displaying editing lines.

Dashboard inside CustomScrollView

Is there a Way to add a Dashboard inside a SliverToBoxAdapter ? so it could be part of a CustomScrollView ?

Prevent widget drag outside of grid bounds

Is there a way to prevent dragging of widgets outside of the grid ?

Add Custom Grid

I need to add custom grid for multiple profile pictures view. Users should be able to reorder their profile pictures. But while doing this, I want to show the index and an icon in each slot on the grid. In addition, the following issue needs to be completed in order for this function to be fulfilled : #13

Dashboard item position is not set when we call the dashboard item data from the firebase

try {
final itemData = await FireStoreDBServices.getConfiguration(
AuthServices.auth.currentUser!.email!);
dashboardItemData = DashboardItemData.fromJson(itemData);
dashboardItemController.clear();

  for (final value in dashboardItemData.configuration!) {
    dashboardItemController.add(DashboardItem(
        width: value.width!,
        height: value.height!,
        startY: value.startX!,
        startX: value.startY!,
        identifier: value.identifier!,
       ),mountToTop: false,)
    ;
  }
  loading = false;
  notifyListeners();
} on Exception catch (e) {
  loading = false;
  error = e.toString();
  notifyListeners();
}

the position x and y is not set in the dashboard here is the data from database:
{
configuration: [
{maxWidth: 5, minWidth: 4, width: 4, startX: 0, minHeight: 3, identifier: barChart 0, height: 3, maxHeight: 4, startY: 0},
{startY: 0, startX: 4, maxHeight: 4, maxWidth: 5, minHeight: 3, identifier: gauges 1, width: 4, minWidth: 4, height: 3},
{minWidth: 4, identifier: slider 2, maxWidth: 5, width: 4, minHeight: 2, height: 2, startX: 8, maxHeight: 3, startY: 0}, {startY: 4, startX: 1, maxWidth: 5, maxHeight: 4, height: 3, minWidth: 4, identifier: barChart 3, width: 4, minHeight: 3}
]},

as show in this image it is not set the position of dashboard item according to x and y position, how we will manage it please explain

Vertical space is calculated differently for the last row

Note: the horizontalSpace and verticalSpace appear to be flipped, with horizontalSpace affecting the vertical spacing between items.

When providing a horizontalSpace, the final row in the grid seems to add a few extra pixels of padding (scaling with the magnitude of the given horizontalSpace). You can see this behavior when placing an item in the bottom-most row, where it causes the final row of items to change in height very slightly.

Video Example

2024-05-07.15-50-01.mp4

scrollbar apperas when items are scrollable

When you have items inside the dashboard that have a scrollbar, the dashboard will display a small/long scroll bar on the side that will react with the dashboarditem Im adding a screenshot to example the issue:

Ive tried defining a scroll controller with no succes

Mouse Pointer not changing

• Mouse pointer not changing its state when dragging widget or increasing and decreasing size of widget.

Screen.Recording.2022-11-16.at.11.56.13.AM.mov

item position in dashboard is not stored

when I re-open the dashboard the position of the items are random

Open source is open source :) I don't think it's something that deserves sponsorship.

          Open source is open source :) I don't think it's something that deserves sponsorship.

BUT!

I am actively looking for a job, I can work/consult at your company part time or full time and remotely. It's not just for Flutter positions either.

Reach out to me via [email protected] there some things i am struggling with within flutter and things i could do better or more efficient. I would like to hire you as a freelance for s bit to help me out? Im a solo company so that would be amazing. Mail me your hourly rate etc please

In any case:

I will try to solve the problem after a few days.

Originally posted by @Mehmetyaz in #42 (comment)

Dimensions are not calculated properly

I have a layout with some horizontal and vertical spacing; however, the dimensions for each item are sometimes not calculated properly, or at least they are not the same as their siblings...

This is the code:

Container(
	padding: const EdgeInsets.only(left: 30, right: 30),
	width: Get.width,
	height: Get.height,
	child: Dashboard(
		slotAspectRatio: 1,
		slotCount: 4,
		horizontalSpace: 22,
		verticalSpace: 22,
		dashboardItemController: controller.itemController,
		itemBuilder: (item) {
		return const SizedBox();
		},
		itemStyle: ItemStyle(
		color: const Color(0x33FAFAFC),
		shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
		animationDuration: const Duration(milliseconds: 100),
		clipBehavior: Clip.antiAliasWithSaveLayer,
		textStyle: const TextStyle(color: Colors.black),
		),
	),
)

Infinite Scrolling issue of Dashboard

I don't know it's known issue or not in Dashboard package.

Issue

• When you drag with mouse from mid to bottom of the screen. It started scrolling automatically.
• It's working perfectly when autoScroll: false, . but if I make auto scroll false then If I want to move widget down then It's not scrolling.
• Checkout attached video for more details.

Screen.Recording.2024-02-06.at.11.34.18.AM.mov

how to get/set storage items values

Hello,
I want to retrieve the attributes inside the list of dashboard Items/storage,
for example save to a json file every Item (color, position, value inside like text photo),
I think that Im not setting correctly this custom attributes inside the ColoredDashboardItem
BR,
Luca

Only call `offset.applyContentDimensions` if `_maxExtent` is greater then zero

Situation

When Dashboard with default scroll behavior is in the body of a Scaffold,

1. and Scaffold.extendBodyBehindAppBar and Scaffold.drawerEnableOpenDragGesture is both true
2. and the number items overflow vertically (scrolling needed to see all items)
3. and you resize width of the window until Dashboard reorders items horizontally
4. when Scaffold.extendBodyBehindAppBar and Scaffold.drawerEnableOpenDragGesture is both false

the following stack trace is produces (I don't know exactly why, probably a Flutter bug)

The following code will reproduce this error

import 'package:dashboard/dashboard.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: DashboardExample2(),
    ),
  );
}

class DashboardExample1 extends StatelessWidget {
  const DashboardExample1({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;
    final isMobile = width < 600;
    return Dashboard(
      key: key,
      slotHeight: 270,
      verticalSpace: 16,
      horizontalSpace: 16,
      slotCount: isMobile ? 6 : 10,
      itemBuilder: (item) => Container(
        color: Colors.red,
        child: Center(
          child: Text(item.identifier),
        ),
      ),
      dashboardItemController: DashboardItemController(
        items: items(),
      ),
      //      physics: const NeverScrollableScrollPhysics(),
      errorPlaceholder: (e, s) => Text("$e , $s"),
    );
  }
}

class DashboardExample2 extends StatelessWidget {
  const DashboardExample2({super.key});

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;
    final isMobile = width < 600;
    return Scaffold(
      extendBodyBehindAppBar: isMobile,
      drawerEnableOpenDragGesture: isMobile,
      body: const DashboardExample1(),
    );
  }
}

List<DashboardItem> items() => [
      DashboardItem(
        identifier: "m1",
        width: 6,
        height: 1,
        minWidth: 1,
      ),
      DashboardItem(
        identifier: "m2",
        startY: 1,
        width: 6,
        height: 1,
        minWidth: 1,
      ),
      DashboardItem(
        identifier: "m3",
        startY: 2,
        width: 6,
        height: 1,
        minWidth: 1,
      ),
    ];

DashboardExample1 - without Scaffold (no exception)
https://github.com/Mehmetyaz/dashboard/assets/866528/97da2ab8-b436-4e95-921b-88a786d744f2

DashboardExample2 - with Scaffold (exception thrown)
https://github.com/Mehmetyaz/dashboard/assets/866528/e3a21d6d-6d77-4248-b812-cf36e7275456

Resolution

I do not know the root cause of this error, but I've managed to pin down the code in Dashboard that leads to this behavior. It seems like multiple calls to offset.applyContentDimensions with both arguments set to zero in Dashboard._setNewOffset is part of the problem.

When I add the guard _maxExtend > 0 around offset.applyContentDimensions the bug disappears, without any noticeable side effects.

    if(_maxExtend>0) {
      offset.applyContentDimensions(0, _maxExtend.clamp(0, double.maxFinite));
    }

As shown in this video where I run DashboardExample2 the the guard above.
https://github.com/Mehmetyaz/dashboard/assets/866528/9a18a08d-9420-4125-9aff-9313cfd2c935

I will post a pull-request with the fix shortly.

How to get size of widget?

I have to calculate some data based on the actual size of a given grid entry widget.
How can I get the current number of rows/columns?
The layout seems to be accessible. But the actual width in pixel?

Cache behaviour inconsistent

The dynamic slots functionality behaves differently with regard to the cache depending on previous actions. If the cache contains one or less 'slotCounts' then when "_onItemsAdded" is called in the DashboardItemStorageDelegate the item is cached for that layout correctly but if the cache (ie. Map<int, Map<String, T>> _items) has already had values for multiple slotcounts then the "_onItemsAdded" function adds any new items to all of the slotCounts which ties their layout behaviour together.

It's not clear to me exactly what the intended functionality is meant to be but it's inconsistent right now and makes for confusing behaviour for a user. If I disable caching then I get the behaviour I would expect

Can we limit how far down a widget can be placed?

Ive noticed that you when doing an edit you can go as low as you want and basically create an infinite inner grid, can we limit it so it just maybe 2 screens in height?

Not able to move widgets on Browser

• I'm using this package in one my application, I recently upgraded the package to version 0.0.4 and from then it's not working perfectly on browser.

• For some reasons I'm not able to move widgets in 2nd row on browser where as I can move widgets in MacOs and Windows application. Then I changed to the older version, and it's working perfectly but with that version I've issue of infinite scrolling which I mentioned in #39 .

• You can checkout attached video of browser issue and MacOs respectively.

Screen.Recording.2024-02-06.at.1.50.57.PM.mov

• below is the macOs video

Screen.Recording.2024-02-06.at.1.53.07.PM.mov

At initial start or refresh dashboard not scrollable

When I run sample from the repository I am seeing that dashboard isn't scrollable until I make an edit or call refresh state using debugger. Any suggestions how it can be fixed?

[✓] Flutter (Channel stable, 3.0.5, on macOS 13.1 22C65 darwin-arm, locale en-GB)
• Flutter version 3.0.5 at */flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision f1875d570e (5 months ago), 2022-07-13 11:24:16 -0700
• Engine revision e85ea0e79c
• Dart version 2.17.6
• DevTools version 2.12.2

Android 32/33

Add Swapping

Can you add this feature? when user drags one item over the other, it could be swapped with it ..

How would you setup defaults?

Hi! i've tried your widget and it is great thanks for the great work.

I'm wondering how would you do to have a default or set position for widgets ?
I would like to use the dashboard to be able to swap pieces of the UI and make my app more customizable, but when I make the window smaller and bigger again, the order I setup wont be respected.

Do you think this is something I can modify being very new in dart/flutter?

onItemDeleted callback returns items with a deleted item inside

onItemDeleted callback returns items with a deleted item inside but cached list of items doesn't have it. Seems like a bug.

Scrolling breaks when turning android phone

If you have a dashboard and keep it in portrait mode. When the dashboard doesn't fit rotating to landscape it just gives up rotating at all. And will never work again until restart.

Scroll to recently added item

Hello
When a dashboard layout is filled tight by items and a new item is added it's usually placed at the bottom of the dashboard. Its not evident to a user that the new item was successfully added therefore I wanted to add simple animated scrolling to the added item when adding completes but I can't figure out how to get item's position/offset for scrolling.

I see that there's some private property called ItemCurrentPosition in DashboardItemWidget which looks like encapsulates coordinate-related stuff of dashboard's item placement but can't find any public access to it.

Could you navigate me how to do this correctly?

double offset = 0;
_scrollController.animateTo(offset, duration: const Duration(milliseconds: 400), curve: Curves.easeIn);

how I can limit the amount of vertical rows in the grid

i would like to limit it to 12