Cross‑Platform Mobile Development with Flutter: Evolution, Practices, and Challenges

For a long time mobile development required two separate codebases for the same product logic, leading to wasted manpower, UI inconsistencies, increased testing pressure, and higher maintenance costs.

Duplicated effort wastes resources.

UI designs may diverge between iOS and Android.

Testing becomes more complex because bugs appear only on one platform.

Engineering improvements, such as zero‑instrumentation analytics, become costly.

Our team explored cross‑platform options, from WebView‑based solutions like Cordova and PhoneGap to React Native, but most suffered from performance gaps compared to native. Flutter, released by Google, offers a UI toolkit that renders directly via the Skia engine, providing native‑like performance with a single Dart codebase.

1. Evolution of Cross‑Platform Solutions

iOS SDK (2008) and Android SDK (2009) used different languages, prompting the search for a unified codebase.

1.1 WebView‑Based Implementations (e.g., Cordova)

These wrap web content in a native WebView, which limits UI capabilities and performance.

1.2 React Native

Uses native components via a bridge, but the bridge can become a bottleneck for high‑frequency UI updates.

1.3 Flutter Design Philosophy

Flutter provides its own widget library, compiled to native machine code and rendered with Skia, eliminating the need for a bridge and enabling fast, complex UI rendering.

2. Practical Flutter Experience

2.1 UI Component Challenges

Flutter’s widget tree can become deeply nested, making code hard to read. Example:

Container(
  constraints: BoxConstraints.expand(
    height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.teal.shade700,
  alignment: Alignment.center,
  foregroundDecoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://www.example.com/images/frame.png'),
      centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  transform: Matrix4.rotationZ(0.1),
  child: Text('Hello World'),
)

Each child is assigned via the child property, leading to deep indentation and reduced readability.

2.2 Data Flow and Architecture

Flutter adopts a reactive model similar to React. State changes trigger setState , causing the widget tree to rebuild. A minimal counter example:

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text('$_counter', style: Theme.of(context).textTheme.display1),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

For larger apps we adopted Redux for predictable state management, following its three principles: single source of truth, read‑only state, and pure‑function reducers.

2.3 JSON Serialization without Reflection

Flutter cannot use reflection, so we rely on dart:convert and code‑generation libraries ( json_annotation , json_serializable , build_runner ) to create fromJson methods.

class FeedModel {
  List imglist;
  int commentnum;

  FeedModel(this.imglist, this.commentnum);

  factory FeedModel.fromJson(Map
json) => _$FeedModelFromJson(json);
}

The generated part looks like:

FeedModel _$FeedModelFromJson(Map
json) {
  return FeedModel(
    json['imglist'] as List,
    json['commentnum'] as int,
  );
}

2.4 Video Texture Sharing

To avoid costly GPU‑>CPU‑>GPU transfers, we expose a native Texture widget and share GPU resources via a platform‑specific ShareGroup (iOS) or shareContext (Android).

Flutter runs four runners (UI, GPU, IO, Platform). By sharing an EAGLContext through a ShareGroup, native and Flutter threads can exchange textures without copying data.

3. Future Plans

Flutter 1.0 (Dec 2018) introduced stable iOS‑style widgets, performance improvements, and Firebase integration. Upcoming work (early 2019) focuses on better tooling for incremental adoption (Add‑to‑App) and platform‑view widgets (AndroidView, UiKitView) to embed native controls inside Flutter.

Experimental projects include Hummingbird (Flutter for Web) and the Fuchsia OS, both leveraging Flutter as the UI framework.

Overall, Flutter provides a powerful, unified approach to mobile UI development, improving productivity while enabling advanced features such as reactive state management, code‑generated JSON handling, and efficient texture sharing.