EasyContainer For Flutter

pub package likes popularity pub points code size license MIT

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

🗂️ Table of Contents

📷 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:
  1. 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"),
),
  1. If an onTap, onLongPress etc. parameters are provided, it can be used as a button.
EasyContainer(
  child: Text("Hello World"),
  onTap: () => debugPrint("Hello World"),
),
  1. 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),
),
  1. 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,
),
  1. 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(_MainApp());

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

👤 Collaborators

Name GitHub Linkedin
Rithik Bhandari github/rithik-dev linkedin/rithik-bhandari

Libraries

easy_container