Skip to content

feat: add responsive layouts, navigation animations, new components, syntax highlighting and CI#7

Merged
Ryanditko merged 5 commits intomainfrom
feat/responsive-animations-components-showcase
Mar 31, 2026
Merged

feat: add responsive layouts, navigation animations, new components, syntax highlighting and CI#7
Ryanditko merged 5 commits intomainfrom
feat/responsive-animations-components-showcase

Conversation

@Ryanditko
Copy link
Copy Markdown
Owner

Summary

  • Responsive layout system: breakpoint engine (compact/medium/expanded) with responsive, expanded and flexible server-driven components for adaptive layouts
  • Navigation animations: three transition styles — fade (landing), slide-up (playground), horizontal slide (screen-to-screen) — with easeOutCubic curves
  • New components: dropdown (form selector), tabBar (tabbed content), carousel (PageView with dot indicators) — all driven from JSON contracts
  • Syntax highlighting: playground editor rewritten with VS Code dark-theme colors (keys, strings, numbers, booleans), line number gutter, and real-time tokenization
  • GitHub Actions CI: four-job pipeline (analyze, test, build web, build android) with Flutter caching and concurrency control

New files

Feature Files
Responsividade lib/core/layout/breakpoints.dart, server_responsive.dart, server_expanded.dart
Animacoes lib/core/navigation/page_transitions.dart
Componentes server_dropdown.dart, server_tab_bar.dart, server_carousel.dart, new_components.json
Syntax highlight json_syntax_highlighter.dart, json_editor_panel.dart (rewritten)
CI .github/workflows/ci.yml

Test plan

  • flutter analyze lib/ — 0 issues
  • flutter test — 111 tests passing
  • Manual: verify animated transitions between landing, playground and dynamic screens
  • Manual: load new_components screen and interact with dropdown, tabs, carousel
  • Manual: open playground and confirm syntax highlighting + line numbers render correctly
  • Verify CI pipeline runs on the PR itself

…xible components

Introduce Material Design 3 breakpoint system (compact/medium/expanded)
and three new server-driven layout components: responsive, expanded, and
flexible — enabling adaptive layouts driven entirely from JSON contracts.

Made-with: Cursor
New interactive components registered in the parser and validator:
- dropdown: form selector with label, hint, filled and options list
- tabBar: tabbed content with configurable indicator and label colors
- carousel: horizontal PageView with animated dot indicators

Includes a new_components.json showcase screen linked from home and
the playground screen selector.

Made-with: Cursor
Three transition styles replace the default MaterialPageRoute:
- FadePageRoute for the landing page (crossfade)
- SlideUpPageRoute for the playground (slide-up + fade)
- SlideHorizontalPageRoute for screen-to-screen navigation (iOS-style slide)

All use easeOutCubic curves for a polished, 350ms feel.

Made-with: Cursor
Rewrite JsonEditorPanel with VS Code dark-theme inspired colors:
- Keys in blue, strings in orange, numbers in green, booleans in keyword blue
- Single-pass regex tokenizer for real-time highlighting
- Line number gutter with separator
- Transparent TextField overlay preserves native cursor and selection UX

Made-with: Cursor
Four-job pipeline triggered on push/PR to main:
- Analyze: dart analyze --fatal-infos
- Test: flutter test --coverage
- Build Web: flutter build web --release + artifact upload
- Build Android: flutter build apk --release (push-only) + artifact upload

Includes Flutter SDK caching and concurrency control.

Made-with: Cursor
@Ryanditko Ryanditko added documentation Improvements or additions to documentation enhancement New feature or request labels Mar 31, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 31, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flutter-backend-driven-ui Ready Ready Preview, Comment Mar 31, 2026 7:36pm

@Ryanditko Ryanditko merged commit 153d698 into main Mar 31, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant