← back
JOURNAL · 2020.02.09

flutterでiosのtoday-extensionを作って見る

2020.02.09 · 13 min read #iOS#Flutter#Today-Extension

以下の方法はFlutter 1.17以上では動かなくなりました。

1. Flutterプロジェクトを新規作成

2. ビルドして確認

AndroidStudioでビルドして確認

Xcodeでビルドして確認

ios/Runner.xcworkspaceを開いて

3. Today Extenstionを作成

  • テンプレートからToday Extenstion選択して作成

  • today Targetに App.framework , Flutter.framework を追加

4. Today Extenstionの修正

  • MainInterface.storyboardから不要なラベルを削除
  • Flutter frameworkをimport
  • FlutterEngineをつくる
  • FlutterViewControllerをTodayViewControllerに追加
TodayViewController.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import Flutter

class TodayViewController: UIViewController, NCWidgetProviding {

    lazy var flutterEngine = FlutterEngine(name: "TodayViewController")

    override func viewDidLoad() {
        super.viewDidLoad()
        flutterEngine.run()
        addFlutterVC()
    }

    func addFlutterVC() {
        let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
        flutterViewController.view.translatesAutoresizingMaskIntoConstraints = false
        addChild(flutterViewController)
        view.addSubview(flutterViewController.view)

        flutterViewController.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        flutterViewController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        flutterViewController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        flutterViewController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

        flutterViewController.didMove(toParent: self)
    }
}

5. ナビゲーションバーを削除

  • DartクラスでToday Extenstion用のTodayAppを作成
    　（基本MYAppのままでappBarのみ削除）
today_app.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import 'package:flutter/material.dart';

class TodayApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyTodayPage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyTodayPage extends StatefulWidget {
  MyTodayPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyTodayPageState createState() => _MyTodayPageState();
}

class _MyTodayPageState extends State<MyTodayPage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      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),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
  • Today Extenstion用のエントリーポイントを作成
main.dart
1
2
@pragma('vm:entry-point')
void mainForTodayExtension() => runApp(TodayApp());
  • Today Extenstion用のエントリーポイントを利用
TodayViewController.swift
1
2
3
4
5
override func viewDidLoad() {
    super.viewDidLoad()
    flutterEngine.run(withEntrypoint: "mainForTodayExtension", libraryURI: nil)
    addFlutterVC()
}

6. Today Extenstionの高さ変更可能に

TodayViewController.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
override func viewDidLoad() {
    super.viewDidLoad()

    extensionContext?.widgetLargestAvailableDisplayMode = NCWidgetDisplayMode.expanded

    flutterEngine.run(withEntrypoint: "mainForTodayExtension", libraryURI: nil)
    addFlutterVC()
}

func widgetActiveDisplayModeDidChange(_ activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize) {
    if (activeDisplayMode == NCWidgetDisplayMode.compact) {
        self.preferredContentSize = maxSize;
    } else {
        self.preferredContentSize = CGSize(width: 0, height: 200);
    }
}

7. Today Extenstionのタイトル修正

全ソースコードはこちらに
https://github.com/hmhv/flutter_today_extension_example

8. 参考

← newer
AssociatedObjectOwnerでobjc_g(s)etAssociatedObjectを利用
older →
Soft-UI(Neumorphism)をSwiftで作って見る
← back to home