Developing the Pumpkin House Story App with Flutter: A Complete Technical Guide

The Pumpkin House Story app is a content‑driven product created by the 360 navigation front‑end team using the Flutter framework to enable users to write and share real stories.

Initially attempted as a mini‑program, low retention and platform restrictions led the team to develop a native app. Lacking an existing app team, the front‑end developers selected a cross‑platform solution and chose Flutter over React Native due to its superior performance and active community.

After researching Flutter, the team found Dart’s similarity to JavaScript and a vibrant Chinese developer community, prompting the decision to adopt Flutter for the project.

Flutter Overview – Flutter is Google’s open‑source UI toolkit that allows a single codebase to build beautiful applications for mobile, web, desktop, and embedded platforms.

Installation and Environment Configuration

Download the latest stable Flutter SDK (v1.9.1) from the official site, unzip it, set the environment variables, and optionally run flutter precache to pre‑download binaries.

To upgrade the SDK, execute flutter upgrade . To switch channels, use flutter channel (available channels: master, dev, beta, stable).

Run flutter doctor to verify the installation and view any required fixes for Android/iOS tooling.

Platform Configuration – Since the app targets Android and iOS only, flutter doctor is used to ensure those environments are correctly set up.

Development Tools – Flutter integrates well with Android Studio/IntelliJ and Visual Studio Code via plugins, allowing front‑end developers to stay within familiar editors.

Project Creation – The team created a new Flutter Application project in Android Studio, which generates the standard project skeleton.

Project Structure – The structure mirrors front‑end conventions, with Dart files organized to reflect typical web development patterns.

Widgets – The app’s UI is built from Flutter’s widget library, using MaterialApp as the root widget and customizing Material components as needed.

Plugins – To accelerate development, the team incorporated several community plugins: dio (network), cookie_jar (cookie handling), fluro (routing), flutter_html (rich text), scoped_model (state management), shared_preferences (local storage), and flutter_webview_plugin (WebView).

Animation – Both tween and physics‑based animations are supported; the project uses tween animations for pull‑to‑refresh and infinite scroll effects.

State Management – scoped_model was chosen for its simplicity; it leverages AnimateBuilder, Listenable, and InheritedWidget to manage UI state.

Native Communication – When native SDKs (user center, push, analytics) lack Flutter wrappers, the team uses MethodChannel to invoke platform‑specific code from Dart.

Debugging – Flutter’s DevTools and IDE plugins provide widget inspection and performance metrics. For network inspection, the flutter_stetho plugin enables Chrome’s network tab, while manual HttpClient proxy configuration is required for external sniffers like Fiddler.

Cookie Handling – The cookie_jar plugin resolves the absence of automatic cookie transmission in Flutter’s HttpClient.

App Showcase – Screenshots demonstrate the polished UI, and the app was featured at the 2019 Google I/O before being released on major Android app stores.

Conclusion – The project proved that Flutter is easier for front‑end developers to adopt than React Native, offering better performance and a hot‑reload workflow that significantly reduces development friction.