nibite_ui_elements 0.0.4

This package helps in creating data collection forms and navigation pages in Flutter.

nibite UI Elements for Flutter

Description

This package helps in creating data collection forms and navigation pages in Flutter, this is an early version of the project, so there is still a lot to come.

Widgets

• NibiteSpinner - Single spinner field
• NibiteProductStack - Single product stack
• NibiteTextForm - Single text form

Use

Setup

To use this package, add nibite_ui_elements as a dependency in your pubspec.yaml file. No specific setup required: only install the dependency and use :)

dependencies:
flutter:
   sdk: flutter
nibite_ui_elements: ^0.0.4

Basic use

• NibiteSpinner

import 'package:nibite_ui_elements/nibite_spinner.dart';
//...
int quantity = 0;
//...
Column(
   children: [
      NibiteSpinner(
         initialValue: 1,
         resultValue: (value) {
            setState(() {
               quantity = value;
            });
         },
      ),
   ],
),

• NibiteProductStack

import 'package:nibite_ui_elements/nibite_product_stack.dart';
//...
Column(
   children: [
      Expanded(
         child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
               crossAxisCount: 2,
               mainAxisSpacing: 5,
               crossAxisSpacing: 5,
               childAspectRatio: 5 / 6,
            ),
            itemCount: 10,
            itemBuilder: (_, index) {
               return NibiteProductStack(
                  name: "Product$index's name",
                  image: Image.network(
                  'https://cdn.pixabay.com/photo/2017/07/28/14/23/macarons-2548810_1280.jpg',
                  fit: BoxFit.cover,
                  ),
                  price: 'R\$ 12,34',
                  onAddToCart: (GlobalKey cartKey) async {},
                  onTap: () {},
               );
            },
         ),
      ),
   ],
),

Specific uses

• NibiteSpinner

import 'package:nibite_ui_elements/nibite_spinner.dart';
//...
int quantity = 0;
//...
Column(
   children: [
      NibiteSpinner(
         initialValue: 1,
         sufix: ' un.',
         style: const  NibiteSpinnerStyle(
            color: Colors.white,
            buttonColor: Colors.yellow,
            buttonTextColor: Colors.black,
            buttonRemovableColor: Colors.red,
            buttonRemovableTextColor:Colors.white,
            boxShadow: [
               BoxShadow(
                  color: Colors.black45,
                  spreadRadius: 1,
                  blurRadius: 2,
               ),
            ],
         ),
         resultValue: (value) {
            setState(() {
               quantity = value;
            });
         },
      )
   ],
),

• NibiteProductStack

import 'package:nibite_ui_elements/nibite_product_stack.dart';
//...
Column(
   children: [
      Expanded(
         child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
               crossAxisCount: 2,
               mainAxisSpacing: 5,
               crossAxisSpacing: 5,
               childAspectRatio: 5 / 6,
            ),
            itemCount: 10,
            itemBuilder: (_, index) {
               return NibiteProductStack(
                  name: "Product$index's name",
                  image: Image.network(
                  'https://cdn.pixabay.com/photo/2017/07/28/14/23/macarons-2548810_1280.jpg',
                  fit: BoxFit.cover,
                  ),
                  price: 'R\$ 12,34',
                  onAddToCart: (GlobalKey cartKey) async {},
                  onTap: () {},
                  primaryColor: const Color(0xFF74BC99),
                  foregroundColor: Colors.white,
               );
            },
         ),
      ),
   ],
),