Skip to content

How to name Swift UI widgets

Matt Carroll edited this page Oct 2, 2023 · 1 revision

When porting a Swift UI view over to a Flutter widget, what name should be given to the Flutter widget?

One issue is that Flutter contains a number of widgets that have the same name as various Swift UI views: Text, Image, etc.

Despite the possible name conflicts between Swift UI views and existing Flutter widgets, the swift_ui package uses the same names for its widgets as the corresponding Swift UI views. Therefore, the swift_ui package includes its own Text widget, Image widget, etc.

How to handle naming conflicts

Conflicts among widget names can only be resolved via namespacing. Developers can either import swift_ui.dart with a namespace, or developers can import widgets.dart and material.dart with a namespace. The chosen namespace depends upon which widgets are more common within a file.

When using a small number of standard Flutter widgets within a mostly Swift UI experience, consider namespacing the Flutter widgets.

import 'package:flutter/widgets.dart' as w;
import 'package:swift_ui/swift_ui.dart';

void main() {
  runApp(
    SwiftUi(
      child: NavigationBar(
        title: w.Text("Regular Flutter Text"),
      ),
    ),
  );
}

When using a small number of Swift UI widgets within a traditional Flutter widget tree, consider namespacing the Swift UI widgets.

import 'package:flutter/widgets.dart';
import 'package:swift_ui/swift_ui.dart' as sw;

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: sw.Text("Swift UI Text"),
        ),
      ),
    ),
  );
}
Clone this wiki locally