hexify 0.0.2

hexify: ^0.0.2 copied to clipboard

example/main.dart

// Import necessary packages
import 'package:flutter/material.dart';
import 'package:hexify/hexify.dart';

// Entry point of the application
void main() {
  runApp(HexifyExampleApp());
}

// Main application widget
class HexifyExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hexify Examples'),
        ),
        // Use SingleChildScrollView to enable scrolling
        body: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Basic Color Creation Section
                Text('Basic Color Creation', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                SizedBox(height: 10),

                // Example 1: Create color from hex code with '#'
                Text('Create color from hex code with #'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    color: Hexify(colorCode: '#FF5733'),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a color from hex code with \'#\''),
                SizedBox(height: 15),

                // Example 2: Create color from hex code without '#'
                Text('Create color from hex code without #'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    color: Hexify(colorCode: 'FF5733'),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a color from hex code without \'#\''),
                SizedBox(height: 20),

                // Opacity Section
                Text('Opacity', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                SizedBox(height: 10),

                // Example 3: Color with opacity
                Text('Color with 50% opacity'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    color: Hexify(colorCode: '#FF5733', opacity: 0.5),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a color with 50% opacity'),
                SizedBox(height: 20),

                // Shading Section
                Text('Shading', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                SizedBox(height: 10),

                // Example 4: Color with shade
                Text('Color with 70% shade'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    color: Hexify(colorCode: '#FF5733', shade: 0.7),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a color with 70% shade'),
                SizedBox(height: 20),

                // RGBO Colors Section
                Text('RGBO Colors', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                SizedBox(height: 10),

                // Example 5: Color from RGBO values
                Text('Color from RGBO values'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    color: Hexify(colorCode: '255, 87, 51, 0.8'),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a color from RGBO values'),
                SizedBox(height: 20),

                // Linear Gradients Section
                Text('Linear Gradients', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                SizedBox(height: 10),

                // Example 6: Basic Linear Gradient
                Text('Basic Linear Gradient'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    gradient: Hexify(
                      gradientType: HexifyGradientType.linearGradient,
                      firstColor: '#FF5733',
                      secondColor: '#3498DB',
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a basic linear gradient'),
                SizedBox(height: 15),

                // Example 7: Linear Gradient with Three Colors
                Text('Linear Gradient with Three Colors'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    gradient: Hexify(
                      gradientType: HexifyGradientType.linearGradient,
                      firstColor: '#FF5733',
                      secondColor: '#3498DB',
                      thirdColor: '#2ECC71',
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a linear gradient with three colors'),
                SizedBox(height: 20),

                // Radial Gradients Section
                Text('Radial Gradients', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                SizedBox(height: 10),

                // Example 8: Basic Radial Gradient
                Text('Basic Radial Gradient'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    gradient: Hexify(
                      gradientType: HexifyGradientType.radialGradient,
                      firstColor: '#FF5733',
                      secondColor: '#3498DB',
                      radius: 0.8,
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a basic radial gradient'),
                SizedBox(height: 20),

                // Advanced Gradient Options Section
                Text('Advanced Gradient Options', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                SizedBox(height: 10),

                // Example 9: Linear Gradient with Custom Stops
                Text('Linear Gradient with Custom Stops'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    gradient: Hexify(
                      gradientType: HexifyGradientType.linearGradient,
                      firstColor: '#FF5733',
                      secondColor: '#3498DB',
                      thirdColor: '#2ECC71',
                      stops: [0.2, 0.5, 0.8],
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a linear gradient with custom stops'),
                SizedBox(height: 15),

                // Example 10: Radial Gradient with Custom Center and Focal Point
                Text('Radial Gradient with Custom Center and Focal Point'),
                Container(
                  width: double.infinity,
                  height: 50,
                  decoration: BoxDecoration(
                    gradient: Hexify(
                      gradientType: HexifyGradientType.radialGradient,
                      firstColor: '#FF5733',
                      secondColor: '#3498DB',
                      center: Alignment(0.3, -0.5),
                      focal: Alignment(-0.1, 0.6),
                      focalRadius: 0.2,
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
                SizedBox(height: 5),
                Text('*Example of creating a radial gradient with custom center and focal point'),
                SizedBox(height: 20),
              ],
            ),
          ),
        ),
      ),
    );
  }
}