colorful_background 0.0.4 copy "colorful_background: ^0.0.4" to clipboard
colorful_background: ^0.0.4 copied to clipboard

Flutter package for custom changing gradient background colors

The colorful_background is a flutter library for creating a beautiful background container with gradient colors that are always changing or animating.

Features #

  • Create beautiful backgrounds
  • Use multiple colors as backgrounds with animation
  • Add decorations with containers to make the app more beautiful.

    background without decoration background with decoration

Getting started #

This package is simple to use. It contains a duration and a list background colors as required attributes. Rest all the attributes has a default value, but you can change properties to accomplish your needs.

Add dependencies #

dependencies:
  colorful_background: ^0.0.4

Add imports #

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

Usage #

ColorfulBackground(
  // Color changing animation duration
  duration: Duration(milliseconds: 300),
  // List extra decoration containers
  decoratorsList: [
    Positioned(
        top: MediaQuery.of(context).size.height / 2.5,
        left: MediaQuery.of(context).size.width / 2.5,
        child: Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.3),
                shape: BoxShape.circle,
            ),
        ),
    ) ,
    Positioned(
        top: 100,
        left: 20,
        child: Container(
            height: 20,
            width: 20,
            decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.3),
                shape: BoxShape.circle,
            ),
        ),
    ),
    Positioned(
        top: 200,
        left: 90,
        child: Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.3),
                shape: BoxShape.circle,
            ),
        ),
    ),
  ],
  // List colors to animate in the background
  backgroundColors: [
    const Color(0xFFFF5ACD),
    const Color(0xFFFBDA61),
    const Color(0xFFFBAB7E),
    const Color(0xFFF7CE68),
    const Color(0xFFFFFB7D),
  ],
  // A child widget
  child: Text("Check my background!"),
);

ColorfulBackground attributes #

  • height: Takes a double type for the height of the widget
  • width: Takes a double type for the width of the widget
  • begin: Takes an Alignment property as begin of the gradient colors.
  • end: Takes an Alignment property as end of the gradient colors.
  • duration: Takes the duration of the animation for colors
  • backgroundColors: Takes a list of colors for background animation
  • decoratorsList: Takes a list of widgets as the decorations for the widget. It is recommended to wrap each child in Positioned widget.
  • child: Takes a widget as child

Conclusion #

🌟 Star this repo & follow for more 😊

Buy Me A Coffee

20
likes
140
points
59
downloads

Publisher

unverified uploader

Weekly Downloads

Flutter package for custom changing gradient background colors

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on colorful_background