BentoBox Library

A Flutter package providing customizable Bento-style widgets for creating modular, responsive, and visually appealing UI components.

Features

• BentoBox: A reusable widget for displaying a title and subtitle in a rounded container.
  • Customizable Colors: Users can set custom colors for the box, title, and subtitle. Defaults are applied if no colors are specified.
• BentoBoxWithImage: A widget for displaying an image in a rounded container, perfect for profile pictures or media grids.
  • Dynamic Image Source: Supports both local asset paths (e.g., 'assets/image.png') and network URLs.
• Fully customizable dimensions, colors, and text styles.
• Responsive design for dynamic layout across different screen sizes.

Screenshot

Getting Started

Prerequisites

• Ensure you have Flutter installed. Follow the Flutter installation guide if needed.

Installation

Add this package to your project by including it in your pubspec.yaml file:

dependencies:
  bento_box_library: ^1.1.4

Then, run:

flutter pub get

Usage

Import the Library

import 'package:bento_box_library/bento_box_library.dart';

Examples

BentoBox

BentoBox(
  height: 100,
  width: 200,
  title: "Title",
  subtitle: "This is a subtitle",
  boxColor: Colors.blue, // Custom box color
  titleColor: Colors.white, // Custom title color
  subtitleColor: Colors.grey, // Custom subtitle color
)

BentoBoxWithImage (Network Image)

BentoBoxWithImage(
  height: 150,
  width: 150,
  imagePath: 'https://via.placeholder.com/150', // Network URL
)

BentoBoxWithImage (Local Asset)

BentoBoxWithImage(
  height: 150,
  width: 150,
  imagePath: 'assets/image.png', // Local asset path
)

Complete Example

import 'package:flutter/material.dart';
import 'package:bento_box_library/bento_box_library.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('BentoBox Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              BentoBox(
                height: 120,
                width: 200,
                title: "Hello",
                subtitle: "This is a BentoBox",
                boxColor: Colors.blueAccent,
                titleColor: Colors.white,
                subtitleColor: Colors.white70,
              ),
              const SizedBox(height: 16),
              BentoBoxWithImage(
                height: 150,
                width: 150,
                imagePath: 'https://via.placeholder.com/150',
              ),
              const SizedBox(height: 16),
              BentoBoxWithImage(
                height: 150,
                width: 150,
                imagePath: 'assets/image.png',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Additional Information

Contributing

We welcome contributions! If you have suggestions or encounter any issues, feel free to open an issue or create a pull request on GitHub.

Issues

For any bugs or feature requests, visit the issue tracker.

License

This package is distributed under the MIT License. See LICENSE for more information.