easy_container 1.2.2

An easy to use container for flutter with built in gesture detectors and a lot of customization.

EasyContainer For Flutter

---

An easy to use container for flutter with built in gesture detectors and a lot of customization.

---

🗂️ Table of Contents

• 🤔 Why not Container or Card?
• 📷 Screenshots
• ✨ Features
• ❓ Usage
• 🎯 Sample Usage
• 👤 Author

---

🤔 Why not Container or Card?

A tappable, elevated, rounded, padded box normally means nesting four widgets and repeating the border radius so the ripple clips correctly:

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  child: InkWell(
    borderRadius: BorderRadius.circular(8),
    onTap: () {},
    child: const Padding(
      padding: EdgeInsets.all(16),
      child: Text("Hello"),
    ),
  ),
)

EasyContainer is that, as one widget, with plain doubles instead of EdgeInsets:

EasyContainer(
  elevation: 4,
  borderRadius: 8,
  padding: 16,
  onTap: () {},
  child: const Text("Hello"),
)

It also sinks its elevation while pressed, and forwards the rest of InkWell's callbacks such as onLongPress, onDoubleTap and onHover.

---

📷 Screenshots

Sample Containers	On Pressed Animation

---

✨ Features

• Gesture Detectors: Built-in support for onTap, onLongPress, and more.
• Custom Padding & Margin: Use shorthand for all sides or specify custom insets.
• Border Customization: Toggle borders with custom color, width, and style.
• Elevation Support: Add elevation to create shadows and a raised effect.
• Simple & Lightweight: Minimal configuration with powerful customization.

---

❓ Usage

1. Add easy_container as a dependency in your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter

  easy_container:

2. Use the EasyContainer widget in case of using the normal Container or Card widget, as it offers more customizations.

import 'package:easy_container/easy_container.dart';

EasyContainer(
  child: Text("Hello World"),
),

3. If an onTap, onLongPress etc. parameters are provided, it can be used as a button.

EasyContainer(
  child: Text("Hello World"),
  onTap: () => debugPrint("Hello World"),
),

4. Want to add some padding/margin/borderRadius?

Padding from all sides can be added by passing padding as a double. If you want to customize padding, then use customPadding which expects EdgeInsets allowing for customization.

If customPadding is passed, padding is ignored.

Same applies for margin and borderRadius.

EasyContainer(
  child: Text("Hello World"),
  onTap: () => debugPrint("Hello World"),
    
  // Shorthand for EdgeInsets.all(20)
  padding: 20,

  // if customPadding passed, padding is ignored.
  // Hence padding applied to container is 10 from all sides.

  customPadding: EdgeInsets.all(10),
),

5. The default alignment is center. So the container tries to take as much space as possible. To deny the same, you can set the alignment to null or specify height/width.

EasyContainer(
  child: Text("Hello World"),
  onTap: () => debugPrint("Hello World"),

  // child not longer takes all the available space
  alignment: null,
),

6. To enable a border, showBorder must be true. Defaults to false.

If showBorder is true, parameters like borderColor, borderWidth, borderStyle come into play.

EasyContainer(
  child: Text("Hello World"),
  onTap: () => debugPrint("Hello World"),
  showBorder: true,
  borderWidth: 5,
  borderColor: Colors.red,
),

🎯 Sample Usage

See the example app for a complete app.

Check out the full API reference here.

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

void main() => runApp(const MainApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: EasyContainer(
            height: 300,
            width: 300,
            padding: 20,
            elevation: 10,
            margin: 20,
            borderRadius: 20,
            color: Colors.red,
            onTap: () => debugPrint("Container Tapped"),
            child: const CircularProgressIndicator.adaptive(),
          ),
        ),
      ),
    );
  }
}

---

👤 Author

Built and maintained by Rithik Bhandari, a mobile developer building cross-platform apps with Flutter.

• 🌐 Portfolio: rithikbhandari.dev
• 📦 More packages: pub.dev/publishers/rithikbhandari.dev
• 💻 GitHub: @rithik-dev
• 💼 LinkedIn: rithik-bhandari