zeba_academy_pixel_ui #

A retro-inspired Flutter UI package that brings the charm of classic handheld gaming devices and pixel-art interfaces to your Flutter applications.

Create nostalgic user experiences with pixel-perfect widgets, CRT screen effects, retro animations, and GameBoy-inspired themes.

Features #

✨ Retro Pixel Buttons

✨ Pixel Containers

✨ CRT Screen Overlay Effects

✨ Pixel Blink Animations

✨ Pixel Loading Indicators

✨ GameBoy-Inspired Theme System

✨ Lightweight & Easy to Use

✨ Fully Customizable

Preview #

Build interfaces inspired by:

• GameBoy
• Retro Handheld Consoles
• Pixel-Art Games
• Vintage Computer Terminals
• Arcade Style Applications

Installation #

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_pixel_ui: latest_version

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_pixel_ui/zeba_academy_pixel_ui.dart';

Getting Started #

Apply the GameBoy theme to your application:

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

void main() {
  runApp(
    MaterialApp(
      theme: GameBoyTheme.theme(),
      home: const HomePage(),
    ),
  );
}

GameBoy Theme #

MaterialApp(
  theme: GameBoyTheme.theme(),
);

Provides a nostalgic green-screen GameBoy color palette.

PixelButton #

Retro pixel-style button with press animation.

PixelButton(
  onPressed: () {
    print('Pressed');
  },
  child: const Text('START'),
)

PixelContainer #

Container with retro pixel borders.

PixelContainer(
  child: Text('Pixel UI'),
)

CRTOverlay #

Adds CRT scanline effects to any widget.

CRTOverlay(
  child: YourWidget(),
)

PixelBlink #

Simple blinking animation for text or widgets.

PixelBlink(
  child: Text('PRESS START'),
)

PixelLoader #

Animated pixel loading indicator.

const PixelLoader()

Complete Example #

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

void main() {
  runApp(
    MaterialApp(
      theme: GameBoyTheme.theme(),
      home: const HomePage(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CRTOverlay(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PixelBlink(
                child: const Text(
                  'ZEBA ACADEMY',
                  style: TextStyle(fontSize: 24),
                ),
              ),
              const SizedBox(height: 30),
              PixelButton(
                onPressed: () {},
                child: const Text('START'),
              ),
              const SizedBox(height: 30),
              const PixelLoader(),
            ],
          ),
        ),
      ),
    );
  }
}

Roadmap #

Version 1.x #

• PixelButton
• PixelContainer
• CRTOverlay
• PixelLoader
• PixelBlink
• GameBoyTheme

Version 2.x #

• Pixel Cards
• Pixel Dialogs
• Pixel Text Fields
• Retro SnackBars
• CRT Distortion Effects
• Animated Scanlines
• NES Theme
• Sega Theme
• Pokémon Theme Pack
• Pixel Particle System

Contributing #

Contributions, issues, and feature requests are welcome.

Feel free to submit a pull request to help improve the package.

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 or connect with me on LinkedIn.

Your all-in-one learning hub! #

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

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

➡ Explore hands-on courses and resources at: https://code.zeba.academy

➡ Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy

➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/

Thank you for visiting!