Zeba Academy Code Editor

🚀 A Flutter package for building developer learning experiences with a modern code editor UI, syntax highlighting, code blocks, output panels, and coding challenges.

License

Flutter

Dart

✨ Features

zeba_academy_code_editor provides reusable UI components for creating coding education applications.

🚀 Syntax Highlighting UI

Display clean developer-friendly code:

  • Dart syntax highlighting
  • Code preview UI
  • Dark editor interface
  • Monospace developer styling
  • Learning-focused presentation

📝 Code Blocks

Create interactive learning code sections:

  • Programming examples
  • Tutorials
  • Documentation snippets
  • Course lessons
  • Developer guides

🖥 Output Panel

Show execution results using a terminal-style UI.

Includes:

  • Console output display
  • Custom messages
  • Developer-friendly layout

🎯 Practice Challenges

Create coding practice modules:

  • Challenge title
  • Problem description
  • Difficulty badge
  • Expected solution

🧑‍💻 Developer Learning Tools

Useful for:

  • Coding platforms
  • LMS applications
  • Programming tutorials
  • Developer portfolios
  • Documentation systems

📦 Installation

Add dependency:

dependencies:

  zeba_academy_code_editor: ^1.0.0

Run:

flutter pub get

🔥 Usage

Import package:

import 'package:zeba_academy_code_editor/zeba_academy_code_editor.dart';

Code Editor

CodeEditor(

 block: CodeBlock(

  language: "dart",

  code: """

void main(){

 print("Hello Zeba Academy");

}

""",

 )

)

Output Panel

OutputPanel(

 output: "Hello Zeba Academy"

)

Challenge Card

ChallengeCard(

 challenge: Challenge(

 title: "Print Message",

 description:
 "Create a Dart program",

 difficulty: "Easy",

 answer:
 "print('Hello');",

 )

)

📁 Package Structure

zeba_academy_code_editor

lib/

 ├── models/

 │    ├── code_block.dart

 │    └── challenge.dart


 ├── widgets/

 │    ├── code_editor.dart

 │    ├── syntax_view.dart

 │    ├── output_panel.dart

 │    └── challenge_card.dart


 └── zeba_academy_code_editor.dart

🎨 Customization

Customize:

  • Editor UI
  • Code content
  • Output messages
  • Challenge data
  • Application themes

🧪 Testing

Run tests:

flutter test

Analyze package:

flutter analyze

💡 Use Cases

Perfect for:

✅ Coding Courses

✅ Developer Learning Apps

✅ Programming Tutorials

✅ Flutter Education Projects

✅ Documentation Apps

✅ Practice Platforms

✅ Portfolio Projects

🤝 Contributing

Contributions are welcome.

Steps:

  1. Fork repository

  2. Create branch

git checkout -b feature/new-feature
  1. Commit changes
git commit -m "Add new feature"
  1. Push changes
git push origin feature/new-feature
  1. Create Pull Request

📄 License

This project is licensed under the GNU General Public License v3.0.

You can:

  • Use
  • Modify
  • Distribute
  • Share

under GPL-3.0 conditions.

👨‍💻 About Me

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

Learn more:

🌐 Website:

https://sufyanism.com/

💼 LinkedIn:

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

🚀 Zeba Academy

Your all-in-one learning hub!

Zeba Academy is a learning platform focused on:

  • Coding
  • Technology
  • Development

Explore courses, tutorials, and practical projects.

🌐 Main Website:

https://zeba.academy

💻 Coding Resources:

https://code.zeba.academy

▶ YouTube:

https://www.youtube.com/@zeba.academy

📸 Instagram:

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

Made with ❤️ for Flutter Developers

Libraries

zeba_academy_code_editor