neubrutalism_ui v1.0.0

Request Feature
Report Bug

Table Of Contents

• - Examples:
  • Roadmap
  • Contributing
    • Creating A Pull Request
  • License
  • Authors

About The Project

"Neubrutalism UI is a comprehensive UI kit for Flutter that incorporates the principles of Neubrutalism design. With this package, you can easily add beautiful and functional UI components to your Flutter app in a style that emphasizes simplicity and minimalism.

The package includes a variety of UI components such as buttons, cards, forms, and more, each designed with a subtle shadow and rounded corners that add depth and texture to your app. You can customize the appearance of each component to fit the specific needs of your app, including changing the border radius, depth, and color.

Whether you're a beginner or an experienced developer, Neubrutalism UI makes it easy to create elegant and functional UI components in Flutter that align with the principles of Neubrutalism design. With clear and concise documentation and easy installation instructions, you can start using the package in your app today."

Built With Flutter 💙

Getting Started

Prerequisites

To use the "neubrutalism_ui" package, you will need to have the following installed:

Flutter SDK

If you do not have Flutter installed on your system, you can download it from the official Flutter website: https://flutter.dev/docs/get-started/install

Installation

• Add the "neubrutalism_ui" package to your project's dependencies. You can do this by adding the following line to your pubspec.yaml file:

dependencies:
  neubrutalism_ui: <latest-version>

Then, run flutter pub get in your terminal to download the package.

• Import the "neubrutalism_ui" package in your Dart code:

import 'package:neubrutalism_ui/neubrutalism_ui.dart';

What's the Difference !!! v0.2.0 vs v1.0.0✨

Neubrutalism.neuTextButton(
              buttonColor: Colors.teal,
              buttonHeight: 60,
              borderWidth: 2,
              onPressed: () {
                print("object");
              },
              buttonWidth: 300,
            ),

NeuTextButton(
  borderColor: Colors.black,
  shadowColor: Colors.black,
  buttonHeight: 50,
  buttonWidth: MediaQuery.of(context).size.width * 0.5,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: const [
      Padding(
        padding: EdgeInsets.all(8.0),
        child: Text(
          "Hello",
          style: TextStyle(
              fontSize: 20, fontWeight: FontWeight.w600),
        ),
      ),
    ],
   ),
 ),

Usage

NeuTextButton with Customization

NeuTextButton( borderColor: Colors.black, shadowColor: Colors.black, buttonHeight: 50, buttonWidth: MediaQuery.of(context).size.width * 0.5, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: const [ Padding( padding: EdgeInsets.all(8.0), child: Text( "Hello", style: TextStyle( fontSize: 20, fontWeight: FontWeight.w600), ), ), ], ), ),

The Neu - NeuContainer

The Main reason behind adding this NeuContainer Widget is to allow the Developers to Create Any custom Widgets which maynot be present in the Package, thus giving them full freedom to customize their Widgets without any restrictions.

NeuContainer( height: 160, width: 250, child: Column( children: [ const Text( "This is NeuContainer", style: TextStyle(fontSize: 23), ), const SizedBox( height: 20, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: const [ Icon( Icons.accessible_outlined, size: 50, ), Icon( Icons.accessible_outlined, size: 50, ), Icon( Icons.accessible_outlined, size: 50, ), Icon( Icons.accessible_outlined, size: 50, ), ], ), ], ), ),

Examples:

Component Name	Code	Preview
TextButton	NeuTextButton
NeuImageCard	NeuImageCard
NeuSearchBar	NeuSearchBar
NeuIconButton	NeuIconButton
NeuContainer	NeuContainer

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

• If you have suggestions for adding or removing projects, feel free to open an issue to discuss it, or directly create a pull request after you edit the README.md file with necessary changes.
• Please make sure you check your spelling and grammar.
• Create individual PR for each suggestion.

Creating A Pull Request

• Fork the Project
• Create your Feature Branch (git checkout -b feature/AmazingFeature)
• Commit your Changes (git commit -m 'Add some AmazingFeature')
• Push to the Branch (git push origin feature/AmazingFeature)
• Open a Pull Request (choose the Staging branch From the Dropdown)

License

Distributed under the MIT License. See LICENSE for more information.

Authors

• Deepraj Baidya - Flutter SDE Intern - Deepraj Baidya - *🤔 *