Flutter Overview, Core Concepts, and Practical Tips

1. Why Learn Flutter Flutter addresses the growing demand for cross‑platform front‑end development, improves developer competitiveness, offers fast onboarding despite slightly lower native performance, and ensures consistent UI across devices thanks to the Skia rendering engine.

2. Flutter Technology Stack The stack consists of several layers: the Flutter Framework (pure Dart SDK), UI libraries for animation and gestures, the Rendering layer that builds and updates the UI tree, the Widgets layer (Material and Cupertino components), the Engine layer (C/C++ SDK including Skia, Dart runtime, and Text rendering), and the Embedder layer that integrates Flutter into host platforms.

3. Widgets Widgets are the building blocks of Flutter UI. They are either StatelessWidget for immutable UI or StatefulWidget for mutable UI. Example of a simple stateless widget:

class LessWidget extends StatelessWidget {
  const LessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Example of a stateful widget:

class FulWidget extends StatefulWidget {
  const FulWidget({Key? key}) : super(key: key);
}

class _FulWidgetState extends State
{
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

4. Dart Language Overview Dart is a Google‑developed, object‑oriented language with C‑like syntax, supporting interfaces, mixins, abstract classes, reified generics, optional typing, and a sound type system. It compiles to JavaScript for web and to native ARM code (AOT) for release builds.

5. GetX Introduction GetX is a lightweight Flutter package offering high‑performance state management, dependency injection, and routing. Its three principles are performance, efficiency, and clean architecture. Basic usage involves adding the dependency in pubspec.yaml , importing the package, and launching the app with runApp(GetMaterialApp(home: Home())) :

// Add to pubspec.yaml
dependencies:
  get:
    # run "pub get" after adding

// Import in Dart file
import 'package:get/get.dart';

// Use in main()
void main() => runApp(GetMaterialApp(home: Home()));

6. Common Issues and Solutions • WebView requires minSdkVersion 19 in build.gradle . • Negative margins can be achieved with transform: Matrix4.translationValues(-10.w, 0, 0) . • Overflow visibility issues are solved by adjusting parent size or layout. • WebView‑related splash screen flicker is avoided by disposing the WebView before popping the route. • IntrinsicHeight does not work under tight constraints; use appropriate layout widgets. • Text wrapping problems are solved with the Wrap widget:

Wrap(
  runSpacing: 10,
  children: [
    ...List.generate(list.length, (kIndex) => GestureDetector(
      onTap: () {
        // click handler
      },
      child: Text('文案')
    ))
  ]
);

7. Performance Optimization • Keep build() methods small; split large widgets into smaller ones for finer‑grained rebuilds. • Prefer StatelessWidget and use const constructors to reduce rebuild cost and RAM usage. • Avoid semi‑transparent widgets when possible; replace with images. • Optimize app size by building for a single ABI, enabling minifyEnabled and shrinkResources in build.gradle , and compressing images (e.g., using TinyPNG) and setting cacheWidth / cacheHeight . • Reduce package size by targeting only the dominant arm64‑v8a architecture.

8. Summary Flutter’s custom rendering engine enables a single codebase to deliver native‑like experiences across mobile, web, and desktop. Its rich widget library, fast development cycle, and extensive plugin ecosystem make it a powerful choice for cross‑platform development, and resources such as the Chinese documentation at https://book.flutterchina.club/ can help newcomers get started.