Coder Social home page Coder Social logo

fluttadex's Introduction

FluttaDex

This application is developed to learn Flutter using Flutter. Ask to get an issue assigned. Different widgets used in Flutter can be viewed in this app along with their implementation and description.

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 a new ListTile using the model WidgetModel in lib/widgetList.dart for the widget
  5. 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 link and include link to the official documentation of the widget as the parameter

For Example:

Create file Container.dart

Add a stateless widget ContainerImplementation and implement Container

  class ContainerImplementation extends StatelessWidget {
  const ContainerImplementation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              const Text(
                "Container with default shape ",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              Container(
                width: 100.0,
                height: 100.0,
                color: Theme.of(context).primaryColor,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Add a Stateless Widget ContainerDescription with the description of widget

  class ContainerDescription extends StatelessWidget {
  const ContainerDescription({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: const EdgeInsets.only(left: 20.0),
        child: const Text(
          'A convenience widget that combines common painting, positioning, and sizing widget',
        ),
      ),
    );
  }
}

Update the widget_list.dart file add WidgetModel with your widget details

WidgetModel(
    name: "Container",
    implementation: ContainerImplementation(),
    description: ContainerDescription(),
    link: "https://api.flutter.dev/flutter/widgets/Container-class.html",
),

fluttadex's People

Contributors

karthiks373 avatar rktejesh avatar saavrm26 avatar samitkapoor avatar tsarprince avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

fluttadex's Issues

Implement a splash screen

Read the contribution guidelines and readme. Ask to get assigned this issue. Build a splash screen with either a design logo of your choice or just the text - "FluttaDex". Points will also be awarded on the design of logo and screen. Creativity in the implementation will fetch you more points ;)

Design all the different screens on a prototyping app like Figma or Adobe XD and implement it in FluttaDex

First create a PR with the design by uploading the image prototype in assets folder in lib. Wait for the confirmation or suggestions. Then create a new PR with the implementation of the design in app. Use Themedata for overall theme development of app.

Suggestion: For the font style try Google's open sans similiar to Flutter website.

Read the contribution guidelines and readme. Ask to get assigned this issue. Creativity in the implementation will fetch you more points ;)

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.