Flutterでアプリ開発・PlatformごとのUIで実装

システム開発部のTです。
Flutterでアプリを開発するということは、当然iOS、Android両方で見た目も同じUIができますよね？
以下、iOS（左画像）、Android（右画像）両方で見た画面デザインです。

いかがでしょう。
同じですよね！
これがFlutterで作った場合のアプリの強みかと思います。

しかし、このマテリアルデザインの場合、どうしてもAndroidっぽいUIになるのは当然です。
では、iOSみたいなフラットデザインにはできないものでしょうか。

Flutterの公式サイトには、Cupertino（iOS-Style）Widgetというのがあります。

https://flutter.dev/docs/development/ui/widgets/cupertino

このWidgetを利用することで、以下のようにiOSっぽいデザインにすることも可能です。

こんな感じにUIをデザインすることが可能になりますが、可能であればプラットフォームごとにデザインが切り替わるようにできればと思ってしまいます。

本件では、iOS、Androidの各プラットフォーム上で動作するときに、自動で各プラットフォームに適したUIに切り替わってくれるライブラリ「flutter_platform_widgets」を紹介します。

flutter_platform_widgetsの追加

以下のページのライブラリをインストールします。
https://pub.dev/packages/flutter_platform_widgets

dependenciesにflutter_platform_widgetを追加してください。

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_platform_widgets: ^1.9.5 # <---これを追加

その後、「pub get」でインストール完了です。

main.dartの整理

プロジェクト生成直後、余計なコメント等があるので、削除していきます。
コメント削除後のmain.dartです。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      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.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

上記のmain.dartに今回のflutter_platform_widgetを反映させます。

flutter_platform_widget反映

特に難しいことはありませんので、以下の内容にて書き換えていきます。

MyAppの書き換え

MaterialAppをPlatformAppに書き換えます。
MaterialAppに存在していたthemeについては存在しないので削除してください。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return PlatformApp(    // <---- MaterialAppをPlatformAppに書き換えする、themeプロパティは存在しないので削除
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

_MyHomePageState反映

こちらもMaterial系のwidgetを書き換えていきます。
ScaffoldだったところをPlatformScaffoldに、appBarもPlatformAppBarにします。
Scaffoldに存在していたfloatingActionButtonが存在しないので削除。
代替えとして、PlatformIconButtonを追加しました。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(　    // <--- ScaffoldをPlatformScaffoldに書き換え
      appBar: PlatformAppBar(  // <--- appBarもPlatformAppBarに書き換え
        title: Text(widget.title),
      ),
      body : Stack(children: [
        Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter'
              ),
            ],
          ),
        ),
        Container(
          child: PlatformIconButton(       // <--- floatingActionButtonが存在しないので、代わりにPlatformIconButtonを追加
            onPressed: _incrementCounter,
            materialIcon: Icon(Icons.add),
            cupertinoIcon: Icon(CupertinoIcons.add),
            color: CupertinoColors.activeBlue,
          ),
          alignment: Alignment.bottomRight,
          margin: EdgeInsets.only(right: 10.0, bottom: 10.0),
        )
      ],)
      // floatingActionButton: FloatingActionButton(   // <--- これらは削除
      //   onPressed: _incrementCounter,
      //   tooltip: 'Increment',
      //   child: Icon(Icons.add),
      // ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

以上、簡単な置き換えでしたが、上記にて動作確認してみます。

動作確認

iOS、Androidそれぞれで実行した結果が以下になります。

UI部品が少ないので、物足りないところではございますが、OSに合ったスタイルになれたかと思います。
OSごとに分ける必要がある場合、参考にしてみていただければと思います。
PlatformWidgetのUI部品は他にも存在するので試してみてください。

まとめ

ここまで使ってみての所感ですが、やはりMaterialWidgetのほうが種類も使いやすいものも多いように見えました。
実際には、flutter_platform_widget以外にも同系統のライブラリもあるので、ご自身に合うライブラリで実装していただければと思います。

Tweet