まず、テキストだけ（“Hello, World!”）を表示するFlutterのコードを準備します。

// Flutterのコード
// インポートとか省略
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Hello, World!',
        ),
      ),
    );
  }
}

前回まで外枠は、 MaterialApp を使っていましたが、 CupertinoApp を使います。

Flutterでは、「マテリアルデザイン」をコンセプトにしたアプリを作る場合は、 MaterialApp を使い、iOSのUI/UXデザインに特化したデザインにしたいアプリの場合は、 CupertinoApp を使います。


今回は、画面表示で比較しやすいように CupertinoApp を使います。

続いて、同じ内容をSwiftUIで実装すると、下記のようなコードになります。

// SwiftUIのコード
// インポートとか省略
@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            HomePageView()
        }
    }
}

struct HomePageView: View {
    var body: some View {
        Text("Hello, world!")
    }
}

結果、iOSシミュレータ（iPhone15サイズ）で表示させた内容を比較すると、下記のようになります。


Flutterの画面の作り方の基礎は、前回どおりですので、割愛します。

コードを比べてみると、大まかに下記のキーワードで対応することがわかります。

　・Flutterの main とSwiftUIの @main

　・Flutterの M

FlutterとSwiftUIのコード例を下記に記載します。（スクリーンショットは割愛）

Flutterのコード例

// Flutterのコード
// インポートとか省略
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: 
        CupertinoButton(
          onPressed: () {
            print('Tapped');
          },
          child: const Text('Do something'),
        ),
      ),
    );
  }
}

※ Flutter で print を使うと、デフォルトだとワーニングが表示されるため、analysis_options.yaml ファイルの avoid_print を修正します

linter:
  rules:
    avoid_print: false  # Uncomment to disable the `avoid_print` rule

SwiftUIのコード例

// SwiftUIのコード
// インポートとか省略
struct HomePageView: View {
    var body: some View {
        Button {
            print("Tapped")
        } label: {
            Text("Do something")
        }
    }
}

ボタンは、Flutterでは、iOSライクのボタンの CupertinoButton ウィジェットを使い、SwiftUIでは、Button ビューに相当します。

FlutterとSwiftUIのコード例を下記に記載します。

Flutterのコード例

// Flutterのコード
// インポートとか省略
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child:
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(CupertinoIcons.globe),
            Text('Column!!'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(CupertinoIcons.alarm),
                Text('Row!'),
              ],
            )
          ],
        ),
      ),
    );
  }
}

SwiftUIのコード例

// SwiftUIのコード
// インポートとか省略
struct HomePageView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe").foregroundColor(.blue)