container_pro 0.0.2

A beautiful Flutter widget for creating elegant gradient containers with customizable titles, subtitles, and styling.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Pro Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ContainerProExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Container Pro Examples'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Basic Example
            const Text(
              'Basic Example',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            const ContainerPro(
              title: "Welcome Back!",
              subTitle: "This is a basic container with default settings",
            ),
            const SizedBox(height: 24),

            // Custom Colors Example
            const Text(
              'Custom Colors Example',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            ContainerPro(
              title: "Premium Feature",
              subTitle: "Unlock all features with premium subscription",
              color1: Colors.deepPurple,
              color2: Colors.pink,
              height: 150,
            ),
            const SizedBox(height: 24),

            // Custom Size Example
            const Text(
              'Custom Size Example',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            ContainerPro(
              width: 350,
              height: 120,
              title: "Custom Width",
              subTitle: "This container has a fixed width of 350",
              color1: Colors.blue.shade400,
              color2: Colors.cyan.shade300,
            ),
            const SizedBox(height: 24),

            // Custom Text Colors Example
            const Text(
              'Custom Text Colors Example',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            ContainerPro(
              title: "Dark Theme",
              subTitle: "Container with custom text colors",
              color1: Colors.grey.shade800,
              color2: Colors.grey.shade600,
              textColor: Colors.yellow.shade300,
              subTitleColor: Colors.white,
              height: 140,
            ),
            const SizedBox(height: 24),

            // Custom Padding Example
            const Text(
              'Custom Padding Example',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            ContainerPro(
              title: "Extra Padding",
              subTitle: "This container has extra padding for more spacing",
              color1: Colors.orange,
              color2: Colors.red,
              padding: const EdgeInsets.all(24),
              height: 160,
            ),
            const SizedBox(height: 24),

            // Responsive Example
            const Text(
              'Responsive Example',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            const ContainerPro(
              height: 130,
              title: "Responsive Container",
              subTitle: "This container adapts to screen width (98% of screen)",
              color1: Colors.teal,
              color2: Colors.green,
            ),
            const SizedBox(height: 24),
          ],
        ),
      ),
    );
  }
}