new_fancy_border_container 1.0.0

A highly customizable Flutter widget that allows you to wrap any child widget with a beautiful gradient or solid-colored outer border.

🌀 Fancy Border Container

A highly customizable Flutter widget that allows you to wrap any child widget with a beautiful gradient or solid-colored outer border. Perfect for creating modern, elegant UI components like cards, profile frames, and buttons.

✨ Features

🎨 Gradient or solid color outer borders

🧩 Fully customizable border radius, padding, and margin

🎯 Flexible alignment, width, height, and constraints

🪄 Optional content decoration and foreground effects

⚙️ Supports transforms and clipping

💡 Works seamlessly inside any layout or animation

🚀 Getting started

Add the dependency in your pubspec.yaml:

dependencies: fancy_border_container: ^1.0.0

🚀 Install the package

flutter pub get

Import the package in your Dart file:

import 'package:fancy_border_container/fancy_border_container.dart';

💻 Usage Example

Here is a full example demonstrating how to create a gradient-bordered card with custom content decoration (shadow and rounded inner corners).

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

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

@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[200], body: Center( child: FancyBorderContainer( // --- 1. OUTER BORDER PROPERTIES ---

      // Defines the border color as a beautiful gradient
      outterBorderGradient: const LinearGradient(
        colors: [Colors.pink, Colors.orange, Colors.purple],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      // Applies rounded corners to the border itself
      outerBorderRadius: BorderRadius.circular(16),
      // Sets the thickness of the border (the gap between inner and outer containers)
      outterBorderPadding: const EdgeInsets.all(3),
      
      // --- 2. INNER CONTENT CONTAINER PROPERTIES ---

      // Defines the decoration for the inner content area (white background, shadow, and inner roundness)
      contentDecoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 8,
            offset: Offset(0, 4),
          ),
        ],
      ),
      // Center the content within the inner container
      contentAlignment: Alignment.center,
      // Set the size of the inner content area
      contentWidth: 250,
      contentHeight: 150,
      
      // --- 3. CHILD WIDGET ---
      child: const Text(
        'Stylish UI!',
        style: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ),
);

} }

fancy_border_container