🐈

Flutterアプリ開発の1歩目 Mac OS向け

に公開
Flutter
tech

※sdkなどのインストールは済んでいる前提

・アプリディレクトリの作成

flutter create my_app

・試しに起動

open -a Simulator
flutter run -d ios

・main.dartを修正

main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MoteruApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Moteru Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.pinkAccent),
        useMaterial3: true,
      ),
      home: const MissionPage(),
    );
  }
}

class MissionPage extends StatefulWidget {
  const MissionPage({super.key});

  @override
  State<MissionPage> createState() => _MissionPageState();
}

class _MissionPageState extends State<MissionPage> {
  int _index = 0;

  static const _missions = [
    'Start conversations with a smile.',
    'Share a compliment today.',
    'Take a deep breath before replying.',
  ];

  void _showNextMission() {
    setState(() {
      _index = (_index + 1) % _missions.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Today\'s Mission'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'Tap the button to get a quick mission you can finish in seconds.',
              style: theme.textTheme.titleMedium,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 24),
            DecoratedBox(
              decoration: BoxDecoration(
                color: theme.colorScheme.secondaryContainer,
                borderRadius: BorderRadius.circular(24),
              ),
              child: Padding(
                padding: const EdgeInsets.all(24),
                child: Text(
                  _missions[_index],
                  textAlign: TextAlign.center,
                  style: theme.textTheme.headlineSmall?.copyWith(
                    color: theme.colorScheme.onSecondaryContainer,
                    height: 1.4,
                  ),
                ),
              ),
            ),
            const SizedBox(height: 24),
            FilledButton.icon(
              onPressed: _showNextMission,
              icon: const Icon(Icons.refresh),
              label: const Text('Another idea'),
            ),
          ],
        ),
      ),
    );
  }
}

・simを起動

open -a Simulator

・使用デバイスのIDを確認

flutter devices

・アプリの検証
ビルドしてアプリ起動までやってくれる

flutter run -d <シミュレータのID>

・dartでコードを書いてアプリを開発する

・実機検証
flutterアプリのルートで以下を実行

open ios/Runner.xcworkspace

Xcodeが開くので：

  1. 左上のプロジェクト（Runner）を選択
  2. Targets → Runner → Signing & Capabilities
  3. 「Team」で自分の Apple ID を選択
  4. （初めてなら「Add an Account」から Apple ID を追加）
  5. Bundle Identifier がユニークになるように編集
    例: com.example.myapp → com.yourname.myapp
  6. 上部の実行ターゲットに 接続している iPhone を選択
  7. flutter run -d <id>を実行
  8. iphoneで設定アプリ → 一般 → VPNとデバイス管理 or プロファイルとデバイス管理」→「“○○（デベロッパ名）”を信頼」 をタップ
  9. ターミナル表記のInstalling and launching... を待つ(あまりに長い場合、一度中断して再度flutter runを実行)

Discussion