Create a flutter web app which acts as a console to view and use every widget of ModularUI

Needs to be discussed.

This should take an async function for onTap behavior and should be in the loading state until the async function is executed.
Also ask about the text to show in the loading state along with the circular progress indicator.

We will have following kind of buttons:

1. Primary Button
2. Loading Button
3. Gradient Button
4. Outlined Button
5. Text Button
6. Primary Block Button
7. Loading Block Button
8. Gradient Block Button
9. Outlined Block Button
10. Text Block Button
11. Auth Button

Each Button should have Leading and Action widget parameters.

Expected UI

Add Some more information and refer contributing.md

Inspiration :
https://www.material-tailwind.com/docs/react/collapse

Currently all the buttons lacks a boxshadow option.
It would be really cool if we can add an optional BoxShadow parameters to all the buttons.

Issue Description: Implement SwitchComponent

Description:
The task is to create the switch component in Flutter, mimicking the design provided in the Shadcn documentation for a switch.

Link to UI - https://ui.shadcn.com/docs/components/switch

Requirements:

Should look and feel close to the Switchcomponent from Shadcn.
Needs to support predefined size, bgColor.
Can somebody assign me for this?

Currently, in the switch widget the color change on toggle is static i.e. from black to white
make it dynamic so that user can define ON state color and OFF state color

File that needs changes :
modular_ui/lib/src/switch

Issue Description: Flutter Alert Dialog Implementation

Description:
The task is to create a Alert Dialog in Flutter, mimicking the design provided in the ShadCN documentation for an Alert Dialog

Link to UI - https://ui.shadcn.com/docs/components/alert-dialog

Requirements:

Ensure that the Flutter Alert Dialog closely resembles the provided Shadcn.
The component should adapt well to different screen sizes and orientations.
Allow dynamic content insertion into the component. Placeholder data can be used for testing purposes.
Testing Guidelines:

Verify that the component displays correctly on various devices and screen sizes.
Test the dynamic content integration by replacing placeholder data with real data.
Ensure that any interactive elements respond as expected.

Issue Description: Implement Radio Button Component

Description:
The task is to create the Radio component in Flutter, mimicking the design provided in the Shadcn documentation for a Radio .

Link to UI - https://ui.shadcn.com/docs/components/radio-group

Requirements:

Should look and feel close to the Radio Button component from Shadcn.
Needs to support predefined size, bgColor.
Can somebody assign me for this?

Currently we have MUISignInCard.
Create a similar widget as MUISignUpCard
Add an extra textfield as ConfirmPassword textfield, password and confirm password should must match.

Currently

Required Changes

• Center the OR CONTINUE WITH text
• SignIn or SignUp Button should take width according to device width and it should be flexible. In above image it doesn't make sense to have button width as width of card.
• Change the cursor color to white
• Icon of Apple and Facebook are too small.
• There should be little space between Apple & Facebook and Don't have an account? text. When we long press the the Register now button it shows splash with no spacing.
• Text of Button can be bold and little bigger

Let me know in case you have any question from above points...

Thanks You!

This is much easier to understand and removes the need of {*} operator.

the abbreviation sh and sw stands for screenHeight and screenWidth respectively.

Code Implementation is down below

extension NumExt on num {
  double sh(BuildContext context) =>
      this * MediaQuery.of(context).size.height / 100;

  double sw(BuildContext context) =>
      this * MediaQuery.of(context).size.width / 100;
}

• While Image is loading there should be pre-defined aspect ratio needs to be added...

Current Behavior

Expected Behavior (With Blank Image)

Walk through of the solution.

• Just add AspectRatio Widget to occupy initial space for loading image and when Image is loaded it will be child of AspectRatio Widget.
• This way we can get rid of loading image with less width and sudden width change while image get loaded.

Thanks!

Here's the link
https://www.material-tailwind.com/docs/react/carousel

Currently TextField doesn't have any icon as prefix icon or suffix icon. It's better to have optional prefix and suffix icon. So, When User need it they can directly used for performing different actions on textfield.

Currently

Expected

Prefix Icon

Suffix Icon

Development Walkthrough

• Create optional parameter for prefixIcon & suffixIcon in lib/src/input_fields/primary_input_field.dart.
• Pass the parameters to the actual components.
• Test the Component is it working as expected.
• onClick is working perfectly or not.
• Raise the PR of your code

Thank You!

Will try to implement something inspired from this.

Sign in card

• Instead of of asking a lot of parameters for auth buttons, we can just ask for a list of widgets.

Sign up card

• Instead of of asking a lot of parameters for auth buttons, we can just ask for a list of widgets.

Simple Card

• add vertical margin to the description
• require the button as the widget itself.

Profile Card

• Bug: Image size is unlimited
• Require Image widget itself instead of imageUrl

Primary Card

• add some vertical margin to title
• require the button as the widget itself

Pricing Card

• require the button as the widget itself

Blog Card

• change onBlogCardTap to BlogCardOnPressed

change animationDuraton to animationDuration in all files

Issue Description: Flutter Profile Card Implementation

Description:
The task is to create a profile card in Flutter, mimicking the design provided in the Material Tailwind UI documentation for a profile card.

Link to UI - https://www.material-tailwind.com/docs/react/card#profile-card

Requirements:

1. Ensure that the Flutter profile card closely resembles the provided Material Tailwind UI profile card.
2. The profile card should adapt well to different screen sizes and orientations.
3. Allow dynamic content insertion into the profile card. Placeholder data can be used for testing purposes.

Testing Guidelines:

1. Verify that the profile card displays correctly on various devices and screen sizes.
2. Test the dynamic content integration by replacing placeholder data with real data.
3. Ensure that any interactive elements respond as expected.

Having a github workflow setup for publishing the package to pub.dev will be a great way to get rid of manually updating it.

If this one sounds interesting, assign this one to me 👍🏼

This marks the beginning of modular-ui

Things needed to be done:

1. create src folder inside lib

2. Inside src create buttons

3. Inside buttons folder create primary_button.dart

4. Under lib/modular_ui.dart export primary_button,dart -> This will act as the entrypoint for our package like this:

library modular_ui;

export 'src/buttons/primary_button.dart';

It is creating a visible confusion.

Proposals

• Change MUIPrimaryButton to MUIAnimatedButton
• Change MUISecondaryButton to MUIPrimaryButton
• Change MUISecondaryOutlinedButton to MUISecondaryButton
• Change the current Dropdowns to something like MUISelect

https://www.material-tailwind.com/docs/react/slider

So I wanted to implement the Tab view and looked at the tailwind documentation for their Tabs component. https://www.material-tailwind.com/docs/react/tabs

The question I have is, do we want a real Tab view where you supply the tabs and children, or just the Tabs component where you can switch between tabs but need to use a page view and handle the children then for yourself. I think the last one brings more possibilities, like using the tabs as a segmented button.
Would love to hear your opinion before I start working on it!

button height should't change with screen height. haven't seen material-tailwind or shadui doing it. button width factor makes sense. it would be great to have it constant or let the dev give height/width just like other flutter widget or let the button depend on its parent(how flutter does it now)

The current version of Carousel doesn't have any option to have a parallax effect.
It would be great if it can have one.

Implement a secondary outline button similar to shadcn outline button.

I did a silly mistake making every widget size dynamic to the dimensions without adding any break-point.

with break-point I mean adding a maxWidth with a some default value to every required widget.
If the screen width is less than this value then the widget will be responsive to the screen size
Else if screen width is greater than this maxWidth then the widget width will be equal to maxWidth

and giving a widgetHeight property with some default value, we can also pass dynamic height to this widget while using it from an external application.

This will fix the error of overflows on various screen sizes.

We might need a secondary type for buttons which should identical to shadcn buttons.

1. MUISecondaryButton
2. MUISecondaryLoadingButton
3. MUISecondaryBlockLevelButton
4. MUISecondaryLoadingBlockLevelButton

Link to UI - https://www.material-tailwind.com/docs/react/card#pricing-card

Currently our input field can not take any leading or action widgets, provide a way to add a list of action and leading widgets to it.

I was expecting to see a gallery of all widgets on your website.
It should be pretty straightforward to implement a grid of widgets and deploy flutter web as static

Issue Description: Implement Avatar Component

Description:
The task is to create the avatar component in Flutter, mimicking the design provided in the Shadcn documentation for a avatar.

Link to UI - https://ui.shadcn.com/docs/components/avatar

Requirements:

• Should look and feel close to the Avatar component from Shadcn.
• Needs to support fallback text, predefined size, bgColor.

Can somebody assign me for this?

Issue Description: Flutter Blog Card Implementation

Description:
The task is to create a Blog card in Flutter, mimicking the design provided in the Material Tailwind UI documentation for a profile card.

Link to UI - https://www.material-tailwind.com/docs/react/card#blog-card

Requirements:

Ensure that the Flutter blog card closely resembles the provided Material Tailwind UI profile card.
The component should adapt well to different screen sizes and orientations.
Allow dynamic content insertion into the component. Placeholder data can be used for testing purposes.
Testing Guidelines:

Verify that the profile card displays correctly on various devices and screen sizes.
Test the dynamic content integration by replacing placeholder data with real data.
Ensure that any interactive elements respond as expected.

Creating a github workflow for following usecase -

Usecase :

Contributor can comment /assign in any Github issue to assign that issue to himself/herself.