magpie_fly: An Open‑Source Flutter Component Library for Unified UI Development

Background : Many companies are exploring Flutter for its smooth UI, hot reload, and rich component capabilities. While experimenting with the Anjuke UI, the team encountered issues such as insufficient built‑in widgets, difficulty choosing among similar third‑party components, and the need for local rendering to verify styles.

Purpose of magpie_fly : To provide a unified, open‑source component library that reduces lookup and learning costs, ensures consistent UI across the group, aggregates high‑level widgets, and enables code generation from design drafts.

Current achievements : Implemented unified component management and documentation, displaying markdown, live widget preview, and source code together. Future work includes UI generation from design, unified styling, and further automation.

Implementation details : Component pages are built from markdown files that embed special JSON snippets, e.g., {{"demo": "lib/demo/horizonal_scroll/HorizontalScrollDefault.dart", "code": true}} . The parser extracts demo paths from config.dart and renders the widget alongside its code. Additional parameters like jump control full‑screen display.

Rapid component integration : A script generates a template under example/lib/demo , updates ListData , and registers the demo in util/config.dart (e.g., 'lib/demo/test_widget/test_widget': () => TestWidget(), ) and assets paths (e.g., - lib/demo/test_widget/ ).

Existing components : video feed auto‑play, pinned_sliver for safe‑area sticky headers, banner_round carousel, horizonal_scroll with load‑more, draggable_btn, popup_window, etc., each described with usage and screenshots.

Future roadmap : Expand component collection, improve documentation, and encourage community contributions to make magpie_fly indispensable for daily development.

Authors : Wu Dan (iOS senior engineer), Jin Xiubo (iOS senior engineer), Li Yixin (Android senior engineer) from 58.com.