zeba_academy_code_editor 1.0.0

Learning code editor UI package with syntax highlighting, challenges and output panels.

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.

✨ 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

3. Commit changes

git commit -m "Add new feature"

4. Push changes

git push origin feature/new-feature

5. 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