Skip to content

Commit

Permalink
...
Browse files Browse the repository at this point in the history
  • Loading branch information
Mohamed dawood committed Mar 3, 2023
1 parent 616acc8 commit 8e32f06
Show file tree
Hide file tree
Showing 12 changed files with 1,410 additions and 0 deletions.
85 changes: 85 additions & 0 deletions docs/ar/animated.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
A widget that display list one or more [animation](#Animations)

```dart
Animated(
fade: const FadeAnimation(),
transforms: const [
ScaleAnimation.y(),
FlipAnimation(FlipType.x),
],
child: const Card(),
),
```

# Animations

### FadeAnimation

* 🔥 change opacity from [from] to [to]

### FlipAnimation

* 🔥 flib widget accourding to type
* 🔥 [FlipType.x] rotate x from (180) t (0)
* 🔥 [FlipType.y] rotate y from (180) t (0)
* 🔥 [FlipType.z] rotate y from (180) t (0)
* 🔥 [FlipType.negativeY] rotate y from (-180) t (0)
* 🔥 [FlipType.negativeX] rotate x from (-180) t (0)
* 🔥 [FlipType.negativeZ] rotate y from (-180) t (0)

### ScaleAnimation

* 🔥 scale all axis of widget
* 🔥 [fromX] and [toX] scales the x axis
* 🔥 [fromY] and [toY] scales the y axis
* 🔥 [fromZ] and [toZ] scales the z axis

```dart
ScaleAnimation.scale();
ScaleAnimation.x();
ScaleAnimation.y();
ScaleAnimation.z();
ScaleAnimation.xyz();
```

### TranslateAnimation

* 🔥 [fromX] and [toX] translate the x axis
* 🔥 [fromY] and [toY] translate the y axis
* 🔥 [fromZ] and [toZ] translate the z axis

```dart
TranslateAnimation.xy();
TranslateAnimation.x();
TranslateAnimation.y();
TranslateAnimation.z();
TranslateAnimation.xyz();
```

# AnimatedItemsScope

if you need to animate some widgets one by one use it

```dart
return AnimatedItemsScope(
delay: const Duration(seconds: 1),
child: GridView.count(
crossAxisCount: 5,
padding: const EdgeInsets.all(20),
children: [
/// this will be run at first
Animated(transforms: const [ScaleAnimation.y()], child: const Card()),
/// then this will be run
Animated(transforms: const [ScaleAnimation.x()], child: const Card()),
/// then this
Animated(transforms: const [ScaleAnimation.z()], child: const Card()),
],
),
);
```

[x] note the animations delayed 75% of previous one if you want to make it delay by duration that specify the delay property of `AnimatedItemsScope`
149 changes: 149 additions & 0 deletions docs/ar/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
# Ready
[![N|Ready][releasesPadge]][releases]

[![N|GitHub forks][forksPadge]][forks] [![N|GitHub Repo stars][starsPadge]][stars] [![N|GitHub watchers][watchersPadge]][watchers] [![N|Ready][pubPadge]][pubUrl]

# Other languages
- [Arabic](https://github.com/mo-ah-dawood/ready/blob/main/docs/ar/index.md)
- [Chineese](https://github.com/mo-ah-dawood/ready/blob/main/docs/ch/index.md)


##### - Ready is very simple package to allow you create your admin panel with flutter

##### - Not just an admin panel it also contains avery helpful widgets that you can use with your mobile app

##### - Admin panel itself can be used in mobile apps as its responsive

## Can i see it

- Yes try this [Demo][demo]

## Where to get it

- If you are seeing this in pub site so you are in the right place
- if not you can get it [Here](pubUrl)

## How to use it


[ ] First if you support multi language you have to add ready delegate in your material app

```dart
return MaterialApp(
localizationsDelegates: [
...GlobalMaterialLocalizations.delegates,
Ready.delegate,
],
);
```

[ ] We currently support `arabic` and `english`

## Features

> Here will explain each feature
> Click on the feature name to see how to use it
[x] [ReadyDashboard](ready_dashboard)
- Admin panel layout in easy way
- [responsive] it can work in any device except watch of course😄😄
- ability to group drawer items
- ability to add action buttons
- ability to override action buttons for some pages
- ability to add search input field in the top app bar


[x] [ReadyList](ready_list)
- Pull to refresh
- Infinite scroll
- headers and footers
- easy to work with flutter_bloc but you can use any state management solution
- can be grid or list or your own builder
- contains ready grid delegates to make it simple

[x] [ResponsiveDataTable](responsive_data_table)
- Responsive widget that show DataTable in large devices and list or grid in smaller one
- 6 layouts
- can be configured to use list or DataTable
- can has selection in lists and DataTables
- can add filters , actions or actions for each row
- work with the same controller [ReadyList]

[x] [Animated]()
- Fancy animations
- able to merge between (flip , scale , fade, translate)
- scoped animated runs animations one after one
- non scoped run all animations in parallel
- ReadyList contains a scope so you don't need to add it

[x] [Shimmer](shimmer)
- Show shimmer effect on a widget
- drawing the shimmer on the whole scope the shimmer is in so the full page may has one scope and will paint the shimmer gradient on all [Shimmer] children in its tree
-like this

![LoadingShimmer](https://user-images.githubusercontent.com/31937782/147537961-2076ab13-9105-4251-83dc-62a2ae8d21fc.gif)

* see how the effect works its not related to card


## Packages

There is related packages that related to ready and you can use it

| Plugin | Version | Depends on ready
| ------ | --------- | -|
| [![N\|Ready form][ready_form_github_padge]][ready_form_github] | [![N\|Ready][ready_form_pub_padge]][ready_form_pub] | ❌ |
| [![N\|Ready validation][ready_validation_github_padge]][ready_validation_github] | [![N\|Ready][ready_validation_pub_padge]][ready_validation_pub] | ❌ |
| [![N\|Ready extension][ready_extensions_github_padge]][ready_extensions_github] | [![N\|Ready][ready_extensions_pub_padge]][ready_extensions_pub] | ❌ |
| [![N\|Ready picker][ready_picker_github_padge]][ready_picker_github] | [![N\|Ready][ready_picker_pub_padge]][ready_picker_pub] | ✅ |
| [![N\|Ready image][ready_image_github_padge]][ready_image_github] | [![N\|Ready][ready_image_pub_padge]][ready_image_pub] | ❌ |

## How to contribute

* To make package smaller and cleaner as possible we will not add a lot of features to it
* instead we will add the new features in separate packages and list it in the packages section
* in this way if any one need the new feature he can add its package to his project
* any package must has a good docs before it listed in packages list

[ready_dashboard]: https://github.com/mo-ah-dawood/ready/blob/main/docs/en/ready_dashboard.md
[animated]: https://github.com/mo-ah-dawood/ready/blob/main/docs/en/animated.md
[ready_list]: https://github.com/mo-ah-dawood/ready/blob/main/docs/en/ready_list.md
[responsive_data_table]: https://github.com/mo-ah-dawood/ready/blob/main/docs/en/responsive_data_table.md
[shimmer]: https://github.com/mo-ah-dawood/ready/blob/main/docs/en/shimmer.md

[demo]: https://ready-19c04.web.app
[pubUrl]: https://pub.dev/packages/ready
[pubPadge]: https://img.shields.io/pub/v/ready.svg?style=for-the-badge
[stars]: https://github.com/mo-ah-dawood/ready/stargazers
[starsPadge]: https://img.shields.io/github/stars/mo-ah-dawood/ready?style=for-the-badge
[watchers]: https://github.com/mo-ah-dawood/ready/watchers
[watchersPadge]: https://img.shields.io/github/watchers/mo-ah-dawood/ready?style=for-the-badge
[forks]: https://github.com/mo-ah-dawood/ready/network/members
[forksPadge]: https://img.shields.io/github/forks/mo-ah-dawood/ready?style=for-the-badge
[releases]: https://github.com/mo-ah-dawood/ready/releases
[releasesPadge]: https://img.shields.io/github/v/release/mo-ah-dawood/ready?style=for-the-badge

[ready_form_github]: https://github.com/mo-ah-dawood/ready/tree/main/packages/ready_form/README.md
[ready_form_github_padge]: https://img.shields.io/github/stars/mo-ah-dawood/ready?label=Ready%20form&logoColor=%23ff0000&style=for-the-badge
[ready_form_pub]: https://pub.dev/packages/ready_form
[ready_form_pub_padge]: https://img.shields.io/pub/v/ready_form.svg?style=for-the-badge

[ready_extensions_github]: https://github.com/mo-ah-dawood/ready/tree/main/packages/ready_extensions/README.md
[ready_extensions_github_padge]: https://img.shields.io/github/stars/mo-ah-dawood/ready?label=Ready%20extensions&logoColor=%23ff0000&style=for-the-badge
[ready_extensions_pub]: https://pub.dev/packages/ready_extensions
[ready_extensions_pub_padge]: https://img.shields.io/pub/v/ready_extensions.svg?style=for-the-badge

[ready_image_github]: https://github.com/mo-ah-dawood/ready/tree/main/packages/ready_image/README.md
[ready_image_github_padge]: https://img.shields.io/github/stars/mo-ah-dawood/ready?label=Ready%20image&logoColor=%23ff0000&style=for-the-badge
[ready_image_pub]: https://pub.dev/packages/ready_image
[ready_image_pub_padge]: https://img.shields.io/pub/v/ready_image.svg?style=for-the-badge

[ready_picker_github]: https://github.com/mo-ah-dawood/ready/tree/main/packages/ready_picker/README.md
[ready_picker_github_padge]: https://img.shields.io/github/stars/mo-ah-dawood/ready?label=Ready%20picker&logoColor=%23ff0000&style=for-the-badge
[ready_picker_pub]: https://pub.dev/packages/ready_picker
[ready_picker_pub_padge]: https://img.shields.io/pub/v/ready_picker.svg?style=for-the-badge

[ready_validation_github]: https://github.com/mo-ah-dawood/ready/tree/main/packages/ready_validation/README.md
[ready_validation_github_padge]: https://img.shields.io/github/stars/mo-ah-dawood/ready?label=Ready%20validation&logoColor=%23ff0000&style=for-the-badge
[ready_validation_pub]: https://pub.dev/packages/ready_validation
[ready_validation_pub_padge]: https://img.shields.io/pub/v/ready_validation.svg?style=for-the-badge
86 changes: 86 additions & 0 deletions docs/ar/ready_dashboard.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# Admin panal layout in easy way

## Usage

```dart
return ReadyDashboard(
items: [],
);
```

| Property | Type | Required| Description | Default |
| -- | -- | - | ------ | - |
| items | [ `List<DashboardItem>` ](#DashboardItem) | ✓ | List of [ `DashboardItem` ](#DashboardItem) to be added to the dashboard | |
| initialIndex | `int?` | | The first page to be displayed | 0 |
| drawerOptions | [ `DrawerOptions` ](#DrawerOptions) | ✓ | options to configure the drawer of dashboard | [ `DrawerOptions()` ](#DrawerOptions) |
| appBarOptions | [ `AppBarOptions` ](#AppBarOptions) | ✓ | options to configure the appBar of dashboard | [ `AppBarOptions()` ](#AppBarOptions) |
| actions | `List<Widget>` | ✓ | List of widgets to added to the app bar actions | `[]` |

# DashboardItem
* Describe the pages of the dashboard
* Can be single or item group

[x] Single

```dart
DashboardItem(
builder: () {
// return const YourPage();
},
icon: const Icon(Icons.animation),
id: 'item_id',
label: 'Item label',
)
```

[x] Group

```dart
DashboardItem.items(
icon: const Icon(Icons.category),
label: 'Grid',
subItems: [
/// Group items
],
)
```

| Property | Type | Required| Description | Default |
| -- | -- | - | ------ | - |
| icon | `Widget` | ✓ | The first page to be displayed | |
| id | `String` | ✓ | the id of the item , must be uniq | |
| label | `String` | ✓ | the Label to be displayed in the app bar of the dashboard | |
| search | `Function` | | if added a search input will be added at the app bar and label will not be displayed | |
| actions | `List<Widget>` | ✓ | List of widgets to added to the app bar actions , this will be merged with the base actions of dashboard | `[]` |
| overrideActions | `bool` | ✓ | if true actions of item will override dashboard actions instead of maere with them | `false` |
| -- | -- | - | ------ | - |
| subItems | [ `List<DashboardItem>` ](#DashboardItem) | ✓ | List of [ `DashboardItem` ](#DashboardItem) to be added to the group | |

# DrawerOptions

| Property | Type | Required| Description | Default |
| -- | -- | - | ------ | - |
| image | `DecorationImage?` | | image to be added as background of the drawer | |
| backgroundColor | `Color?` | | the background color of the drawer | |
| gradient | `Gradient?` | | gradient to be added as background of the drawer| |
| headers | `List<Widget>` | ✓ | List of widgets to be added to the top of drawer under expand button| `[]` |
| footer | `Widget?` | | Widget that will be added at the end of the drawer it can be aligned by wrapping it with `Align` | |
| logo | `Widget?` | | Widget that will be added at the top of the drawer in the same line of expand button| |

# AppBarOptions

Property | Type | Required| Description | Default
-- | -- | - | ------ | -
theme | `AppBarTheme?` | | Theme to be applied to app bar | Transparent background and normal text color
inputDecoration | `InputDecoration?` | | decoration of search box |
flexibleSpace | `Widget?` | | This property is used to configure an `AppBar` . flexibleSpace |
bottom | `PreferredSizeWidget?` | | This property is used to configure an `AppBar` . bottom |
primary | `bool?` | | This property is used to configure an `AppBar` . primary |
collapsedHeight | `double?` | | This property is used to configure an `AppBar` . collapsedHeight |
expandedHeight | `double?` | | This property is used to configure an `AppBar` . expandedHeight |
floating | `bool?` | | This property is used to configure an `AppBar` . floating |
pinned | `bool?` | | This property is used to configure an `AppBar` . pinned |
snap | `bool?` | | This property is used to configure an `AppBar` . snap |
stretch | `bool?` | | This property is used to configure an `AppBar` . stretch |
stretchTriggerOffset | `double?` | | This property is used to configure an `AppBar` . stretchTriggerOffset |
onStretchTrigger | `AsyncCallback?` | | This property is used to configure an `AppBar` . onStretchTrigger |
Loading

0 comments on commit 8e32f06

Please sign in to comment.