nibite_ui_elements 0.0.8

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

example/README.md

Examples

NibiteSpinner

import 'package:flutter/material.dart';
import 'package:nibite_ui_elements/nibite_spinner.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int quantity = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              const Text('Nibite Spinner'),
              NibiteSpinner(
                initialValue: quantity,
                isRemovable: true,
                suffix: ' und.',
                style: const NibiteSpinnerStyle(
                  color: Colors.white,
                  buttonColor: Color(0xFF74BC99),
                  buttonTextColor: Colors.white,
                  buttonRemovableColor: Color(0xFFE24D51),
                  buttonRemovableTextColor: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black45,
                      spreadRadius: 1,
                      blurRadius: 2,
                    ),
                  ],
                ),
                resultValue: (value) {
                  setState(() {
                    quantity = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

NibiteProductStack

import 'package:flutter/material.dart';
import 'package:nibite_ui_elements/nibite_product_stack.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              const Text('Nibite Product Stack'),
              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: '\$ 12,34',
                      onAddToCart: (GlobalKey cartKey) async {},
                      onTap: () {},
                      primaryColor: const Color(0xFF74BC99),
                      foregroundColor: Colors.white,
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

NibiteTextForm

import 'package:flutter/material.dart';
import 'package:nibite_ui_elements/nibite_text_form.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final _formGlobalKey = GlobalKey<FormState>();

  final userController = TextEditingController();
  String? userValitador(String? user) {
    if (user == null || user.isEmpty) {
      return 'Enter your username';
    }

    if (user.length < 3) return 'Enter a username with at least 3 characters';

    return null;
  }

  final passwordController = TextEditingController();
  String? passwordValidator(String? password) {
    if (password == null || password.isEmpty) {
      return 'Enter your password';
    }

    if (password.length < 6) {
      return 'Enter a password with at least 6 characters';
    }

    return null;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              const Text('Nibite Text Form'),
              Form(
                key: _formGlobalKey,
                child: Column(
                  children: [
                    NibiteTextForm(
                      prefixIcon: Icons.account_circle,
                      labelText: 'Username',
                      validator: userValitador,
                      controller: userController,
                    ),
                    NibiteTextForm(
                      prefixIcon: Icons.lock,
                      labelText: 'Password',
                      isObscureText: true,
                      validator: passwordValidator,
                      controller: passwordController,
                    ),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18),
                        ),
                      ),
                      onPressed: () {},
                      child: const Text(
                        'Login',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

NibiteDivider (with NibiteTextForm)

import 'package:flutter/material.dart';
import 'package:nibite_ui_elements/nibite_divider.dart';
import 'package:nibite_ui_elements/nibite_text_form.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              const Text('Nibite Divider with Text Form'),
              Column(
                children: [
                  const NibiteTextForm(
                    prefixIcon: Icons.account_circle,
                    labelText: 'Username',
                  ),
                  const NibiteTextForm(
                    prefixIcon: Icons.lock,
                    labelText: 'Password',
                    isObscureText: true,
                  ),
                  ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(18),
                      ),
                    ),
                    onPressed: () {},
                    child: const Text(
                      'Login',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  const NibiteDivider(
                    labelText: 'Or',
                  ),
                  OutlinedButton(
                    style: OutlinedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(18),
                      ),
                      side: const BorderSide(
                        width: 2,
                      ),
                    ),
                    onPressed: () {},
                    child: const Text(
                      'Login with Social Account',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}