Zeba Academy Circuit UI #

A Flutter package that brings the aesthetics of electronic circuits and PCB (Printed Circuit Board) designs into your applications.

zeba_academy_circuit_ui provides a collection of circuit-inspired widgets including PCB backgrounds, LED indicators, digital displays, electronic switches, and animated circuit flow effects, making it easy to build futuristic dashboards, IoT interfaces, electronics-themed applications, and cyberpunk-inspired user experiences.

Features #

✨ PCB-inspired backgrounds

✨ LED status indicators

✨ Digital display widgets

✨ Electronic toggle switches

✨ Circuit flow animations

✨ Lightweight and dependency-free

✨ Fully customizable colors and styling

✨ Responsive across mobile, tablet, desktop, and web

Installation #

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_circuit_ui: ^1.0.0

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_circuit_ui/zeba_academy_circuit_ui.dart';

Components #

PCBBackground #

Creates a circuit-board inspired background.

const PCBBackground()

Example:

Scaffold(
  body: Stack(
    children: [
      const Positioned.fill(
        child: PCBBackground(),
      ),
    ],
  ),
);

LEDIndicator #

A glowing LED-style status indicator.

LEDIndicator(
  isOn: true,
)

Example:

const LEDIndicator(
  isOn: true,
)

DigitalDisplay #

Displays values using a digital electronics-inspired style.

const DigitalDisplay(
  value: '1024',
)

ElectronicSwitch #

A customizable electronic switch component.

ElectronicSwitch(
  value: isEnabled,
  onChanged: (value) {},
)

CircuitFlowAnimation #

Creates an animated electrical signal flowing through a circuit path.

const SizedBox(
  width: 300,
  height: 80,
  child: CircuitFlowAnimation(),
)

Complete Example #

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

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

class CircuitDemo extends StatefulWidget {
  const CircuitDemo({super.key});

  @override
  State<CircuitDemo> createState() => _CircuitDemoState();
}

class _CircuitDemoState extends State<CircuitDemo> {
  bool ledOn = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            const Positioned.fill(
              child: PCBBackground(),
            ),
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  LEDIndicator(
                    isOn: ledOn,
                  ),
                  const SizedBox(height: 20),

                  const DigitalDisplay(
                    value: '1024',
                  ),

                  const SizedBox(height: 20),

                  ElectronicSwitch(
                    value: ledOn,
                    onChanged: (value) {
                      setState(() {
                        ledOn = value;
                      });
                    },
                  ),

                  const SizedBox(height: 40),

                  const SizedBox(
                    width: 300,
                    height: 80,
                    child: CircuitFlowAnimation(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Use Cases #

• Electronics-themed applications
• IoT dashboards
• Hardware monitoring interfaces
• Embedded system simulators
• Cyberpunk UI designs
• Educational electronics apps
• Futuristic control panels
• Maker and robotics projects

Roadmap #

Future planned additions include:

• Seven-segment displays
• LCD display widgets
• Oscilloscope widgets
• Rotary knobs
• DIP switches
• Push buttons
• Voltage meters
• Frequency counters
• Animated PCB traces
• Advanced electronic dashboards

License #

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You are free to use, modify, and distribute this software under the terms of the GPL-3.0 License.

See the LICENSE file for complete details.

About Me #

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at:

• https://sufyanism.com/
• https://www.linkedin.com/in/sufyanism

Your All-in-One Learning Hub! #

🚀 Explore courses and resources in coding, technology, and development at Zeba Academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on learning experiences.

Zeba Academy #

➡ Visit our main site: https://zeba.academy

➡ Explore courses and resources: https://code.zeba.academy

➡ YouTube Channel: https://www.youtube.com/@zeba.academy

➡ Instagram: https://www.instagram.com/zeba.academy/

Made with ❤️ by the Zeba Academy community.

Thank you for visiting and supporting open-source software!