Giter VIP home page Giter VIP logo

fludget's Introduction

Fludget

code

Browse through a variety of widgets used in flutter and learn how to use them

made-by-acm license Awesome Flutter

Project Status

stars forks issuses prs


This application is developed to learn Flutter using Flutter. Different widgets used in Flutter can be viewed in this app along with their implementation, description and code. If you like our work, ⭐ the repository to show support.

Screenshots of the application

Splash Screen

Home Screen

Light Mode

Dark Mode

Implementation Example

Tech Stack

Languages

SDK used

How to contribute to this project

  • Make sure to read the contributing guidelines before contributing.
  • Fork this repository.
  • Clone your fork on local machine.
  • Switch to the master branch.
  • Make a new branch, preferably with the feature name.
  • Checkout to the new branch with git checkout <new_branch_name>
  • Do the desired changes and commit them with git commit -m '<a nice commit message here>'.
  • Push the change to your fork on GitHub with git push origin <your_branch_name>
  • Make a Pull Request to the master branch in the original repository, i.e. this one.

Note: Make sure you are always up to date with sync and pull upstream. Sync and pull before you start and before you push your work.

How to contribute to the Widget Catalog

  1. Create a new dart file named *widget*.dart for the widget being added under lib/routes/
  2. Create a class named WidgetImplementation and implement the widget
  3. Add description of the widget using WidgetDescription class in the *widget*.dart file
  4. Add the code written for the widget in String format using WidgetCode class in the same file
  5. Add a new ListTile using the model WidgetModel in lib/widgetList.dart for the widget
  6. In the WidgetModel
    • Add an argument name and pass the name of the Widget
    • Add an argument implementaion and add *Widget*Implementation() as the parameter
    • Add an argument description and add *Widget*Description() as the parameter
    • Add an argument codeString and add *Widget*Code() as the parameter
    • Add an argument link and include link to the official documentation of the widget as the parameter
    • Add an argument category and include category of the widget as the parameter

Contributors

contributors

Authors

License

Copyright © 2021 ACM-VIT

The source code for the site is licensed under the MIT license. This program is free software and is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

See the LICENSE file for more details.

fludget's People

Contributors

abhimanyubahree avatar adityakeshan avatar agungprabowo avatar akshit97 avatar alfinsyahruddin avatar apoorva-raj avatar aravind-kannan avatar aryankhubchandani avatar deltarfd avatar harshit-2000 avatar japneetsingh035 avatar jushutch avatar karthick986 avatar kunal-8789 avatar nimendrak avatar nix-naman avatar pruthvisooni avatar purushottam212 avatar randykdev avatar rktejesh avatar rosetanya898 avatar sachin161kr avatar samyakjain26 avatar shah-aayush avatar shravanseth avatar sidheshwar-s avatar sj9102001 avatar suryaa62 avatar vedantkulkarni avatar yuran09 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

fludget's Issues

Add Dismissible Widget to the Widget Catalog

Dismissible Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcase various implementations of the widget including different background colors, onDismissed property, secondary background, direction property, etc. You can showcase this on ListTiles.
Please attach a screen recording of the same once done in your PR.

Enhancement: Add Splash Screen to the application

A splash screen needs to be added to the application. Make sure to include the name of the application in it. Use your creativity to design it and feel free to create a logo for the application which can be included in the splash screen.

Add OutlinedButton Widget to the Button Widget

OutlinedButton Widget is missing from the Button Widget in the Widget Catalog and needs to be added to the ButtonImplementation.dart. Make sure it is in accordance to the theme of the application. Also make the page scrollable to be able to include the button. Also add 'Outlined Button' to the subtitle of the ListTile Button Widget. Please include the screeenshot of your implementation.

Add ListTile Widget to the WIdget Catalog

ListTile Widget needs to be added to the Widget Catalog. Make sure the implementation is done under the Implementation tab and description of the widget is added under the Description tab. Make sure to include all the properties in your implementation including leading, trailing, title, subtitle, onTap, onLongPress, enabled, etc. Do share the screenshots of your work once done.

Enhancement: Add Dark theme and Light theme mode

Implement a new feature of dark mode and option to switch between dark mode and light mode. The option to switch should be present in the settings menu which is present in the application. Please attach screenshots of your work once done in the PR. Hit me up incase of any doubt.

Add DataTable Widget to the Widget Catalog

DataTable Widget needs to be added to the Widget Catalog. Make sure the implementation is done under the Implementation tab and description of the widget is added under the Description tab. Make sure to include all the features of the DataTable Widget. Do share the screenshots of your work once done..

Add Application Launcher Icon

An application launcher icon needs to be added. Feel free to use your creativity in designing the icon. Please make sure to get the icon approved by me before implementing it into the application.

Implement Draggable Widget in the Widget Catalog

Draggable Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcase various implementations of the Draggable Widget and include properties like childWhenDragging, feedback, etc and DragTarget.
Please attach a screen recording of the same once done in your PR.

Add Transform widget to the Widget Catalog

Transform Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcasing the various implementations of the widget including rotate, translate, scale, matrix, skew, 3D, etc is a must.
Please attach a screen recording of the same once done in your PR.

Add Wrap Widget to the WIdget Catalog

Wrap widget needs to be added to widget catalog. There should be two tabs within the page, one tab named "Description' to describe the widget and another tab named 'Implementation' to show the implementation of the widget. Please make sure the implementation of alignment and spacing is also present. Please attach screenshot of the same in the PR.

Add CircularProgressIndicator Widget to the Widget Catalog

LinearProgressIndicator Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget. Showcase different variations if possible.
Please attach a screen recording of the same once done in your PR.

Implement IndexedStack Widget in the Widget Catalog

IndexedStack Widget needs to be added to the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcase the implementation properly.
Please attach screenshots of the same once done in the PR.

Add a card widget

A card widget needs to be added to the widget catalog along with its different implementations

Add ToggleButtons Widget to the Widget Catalog

ToggleButtons Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding). Include a variety of buttons depicting various colors, shapes, borders properties, disabled button, etc. There are a lot of properties, so make sure each one of them is showcased. Be creative with your implementation.
Please attach a screen recording of the same once done.

Add RichText Widget implementation

RichText Widget implementation needs to be added to the Widget Catalog. Make sure that it is properly implemented under the Implementation tab and try to showcase all its properties. Description of the widget also needs to be added under the Description tab. Please share the screenshots of your work once done.

Add ReorderableListView to the Widget Catalog

ReorderableListView needs to be added to the Widget Catalog. Make sure the implementation is done under the Implementation tab and description of the widget is added under the Description tab. Do share the screenshots of your work once done..

Add AnimatedIcon Widget to the Widget Catalog

AnimatedIcon Widget needs to be added to the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcase various implementations by using different icons.
Please attach a screen recording of the same once done in the PR.

Implement AbsorbPointer widget in the Widget Catalog

AbsorbPointer Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcase the implementation properly using various clickable widgets. Make sure to also include a button in the end which can set absorbing property to false to showcase the usage of the widget. Hit me up incase of any doubt.
Please attach screenshots of the same once done in your PR.

Implement CheckboxListTile Widget in the Widget Catalog

CheckboxListTile Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab. Implement different features of the widget including activeColor, checkColor, etc.
Please attach screenshots of the same once done in your PR.

Implement Hero Widget in the Widget Catalog

Hero Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab and the implementation is proper.
Please attach screenshots of the same once done in your PR.

Url launcher is not working

On the description page, you have a floating action button to take the user to the documentation. But it throws exception.

image

image

Add description to all the widgets in the Widget Catalog

A short description needs to be added to all the widgets present in the Widget Catalog. The description needs to be added in the WidgetDescription class under the dart file of that particular widget. For example, in Row Widget, a short description of what a row widget does needs to be added in the RowDescription class, which is present in the row.dart file in lib\routes.
Please attach a screenshot of your work.

Enhancement: Add TabBar to all the widgets

TabBar needs to be added to every widget present in the list. There should be 2 tabs, one for description of the widget and other for the implementation of the widget(which is already present).
For example, when you tap on column widget, the new page should have two tabs, one named 'Description' which describes what the column widget does and the other named 'Implementation' which shows the implementation of the widget. Since the implementation already exists, the same code needs to be added to this tab. This is supposed to be done for all the widgets present.
Please share screenshots of the same..

Add Dropdown Button widget

DropdownButton widget needs to be added to the widget catalog. Please make sure that there are two tabs within the page, one tab named "Description' to describe the DropdownButton widget and another tab named 'Implementation' to show the implementation of the widget. Please make sure the implementation is proper and every example possible is showcased.
Please do attach screenshot of your work.

Implement AboutDialog Widget in the WIdget Catalog

AboutDialog Widget needs to be added to the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcase all properties including version, icon, legalese,
Please attach screenshots of the same once done in the PR.

Enhancement: Add new implementations in Image Widget

Certain new features need to be added to the Image Widget present in the Widget Catalog:

  • There is an overflow error, so make the page scrollable
  • Showcase the implementation of Image.file
  • Showcase the implementation of Image.memory
  • Add these two implementations in the subtitle of the list

Please attach screenshot of the same once done.

Add Expanded Widget to the Widget Catalog

Expanded widget needs to be added to widget catalog. There should be two tabs within the page, one tab named "Description' to describe the widget and another tab named 'Implementation' to show the implementation of the widget. Please make sure the implementation is done properly. For example, you can use Expanded Widget in a row or column to showcase its implementation. Also showcase the use of flex factor.
Please make sure to attach screen shots of the same.

Enhancement: Add FloatingActionButton to all the widgets to open a link

A FloatingActionButton needs to be added in the Description tab for all the widgets present in the Widget Catalog. The purpose of this button is to open a link to official documentation for that particular widget. For example, for text widget in Widget Catalog, a FloatingActionButton needs to be added in the description tab. On tapping the button, it should take you to the official documentation of the Text Widget (https://api.flutter.dev/flutter/widgets/Text-class.html is the link for this example). Make sure, this feature is properly implemented and not hard coded. Please attach screenshots for the same.

Showcase the implementation of Table Widget

Table widget needs to be added to the widget catalog. There should be two tabs within the page, one tab named "Description' to describe the widget and another tab named 'Implementation' to show the implementation of the widget. Please make sure that the implementation has all the different features of the widget like different alignments, widths and border. Please attach the screenshot of your work in the PR.

Implement Flexible Widget in the Widget Catalog

Flexible Widget needs to be added to the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcase the implementation using different flex and fit values.
Please attach a screenshots of the same once done in the PR.

Implement PageView Widget in the Widget Catalog

PageView Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding.) Showcase the implementation properly and make sure each page is full of widgets so that the implementation makes sense.
Please attach a screen recording of the same once done.

Add a DraggableScrollableSheet Widget to the Widget Catalog

DraggableScrollableSheet Widget needs to be added to the Widget Catalog. Make sure to include the description of the widget in the Description Tab. Try to showcase all the features of the widget.
Please attach the screenshots of your work once done in the PR.

Classifying widgets by different categories

Currently all types of widgets (layout , animation etc) are in single page/list. it would be great if group same type of widgets, either in a single list or by listing different pages in app drawer(for example one layout menu in app drawer for all the layout widgets)

Implement SnackBar Widget in the Widget Catalog

SnackBar Widget needs to be added in the Widget Catalog. Make sure to include the description of the widget in the Description tab and the implementation is proper.
Do attach the screenshots of your work once done.

Add Opacity widget

Opacity Widget needs to be added to the widget catalog. There should be two tabs within the page, one tab named "Description' to describe the widget and another tab named 'Implementation' to show the implementation of the widget. Please make to include various implementations of the widget, including examples of different opacity values and blending using Stack. Make sure to explain the implementations. Please attach screenshot of your work for PR.

Add Slider Widget to the Widget Catalog

Slider Widget needs to be added to the Widget Catalog. Make sure to include the description of the widget in the Description Tab. Try to showcase various implementations of the widget including slider with divisions ,slider with labels, RangeSlider, CupertinoSlider,etc. Do attach the screenshots of your work in the PR.

Implemenet ColorFiltered Widget in the WIdget Catalog

ColorFiltered Widget needs to be added to the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcase various implementations of different colors on different children. Also showcase different modes and filters.
Please attach screenshots of the same once done in the PR.

Add TextField Widget

TextField widget needs to be added to widget catalog. There should be two tabs within the page, one tab named "Description' to describe the widget and another tab named 'Implementation' to show the implementation of the widget. Please make sure all the implementations are present like number input, password input, etc. Please attach screenshots of your work in the PR.

Add LinearProgressIndicator widget to the Widget Catalog

LinearProgressIndicator Widget needs to be implemented in the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget. Showcase different variations if possible.
Please attach a screen recording of the same once done in your PR.

Add RefreshIndicator Widget to the Widget Catalog

RefreshIndicator Widget needs to be added to the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in homepage.dart for better understanding. Showcase various properties of the widget.
Please attach screenshots of the same once done in your PR.

Implement AnimatedList Widget

AnimatedList Widget needs to be added to the Widget Catalog. Make sure to include the description of the widget in the Description tab and add an argument to include link to the official docs of the widget (Refer to any example in widgetList.dart for better understanding. Showcase various animations while inserting or removing items.
Please attach a screen recording of the same once done in your PR.

Refactor: Remove duplicates

Duplicate imports need to be removed from homepage.dart. There are three duplicates, so make sure all of them are removed.

Search button does not work

Search button does not do anything. Need help in implementing the functionality of search button to search through the widgets and present results accordingly.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.