search
LoginSignup
9

More than 1 year has passed since last update.

posted at

updated at

Organization

Flutterウィジェット体験アプリ「スマホでFlutter」をリリースした話

Flutteウィジェット体験アプリを開発!

FlutterによるFlutter初学者向けアプリをFlutter大学で共同開発しました!

※ 私の個人アカウントからKBOY, LLC.へ譲渡されました!(2021/8/1追記)

widget_apppng

アプリの概要と背景

ホーム画面 レッスンスライド エディター画面
widget_app_home.png app_bar.png editor_darcula.png

「スマホでFlutter」は、私が所属しているKBOYのFlutter大学で行なっている共同開発プロジェクトの一つです。ここでは、このアプリを記事という形でプレゼンさせていただきたいと思います。

「スマホでFlutter」は、Flutter大学メディア部編集長であり現役エンジニアのSeiboyさん(@seiboy)をPMとして、僕ともう1名のエンジニアさんの計3人が参加して共同開発を行った、FlutterによるFlutter初学者のためのプログラミング学習アプリです。

僕にとってこのアプリは、Flutterを用いて開発した初のオリジナルアプリであり、また初めての共同開発となりました。

この投稿では「スマホでFlutter」の開発について、僕なりの視点でまとめたいと思います。

なぜ「スマホでFlutter」を開発したのか

僕は1年ほど前からプログラミングに興味を持ち、動画教材やProgateなどの学習サービスを用いてプログラミング学習を独学で開始しました。しかし学習をしているだけではつまらなく飽きてしまい、いったん放置してしまうような状況でした。

そんな中、何か開発をやってみたいと思い立ち今年の春にKBOYさんの動画で出会ったのがFlutterです。いろいろなフレームワークや言語があるものの、Flutterであれば私のような初学者でもアプリを作ることができるのではないかと挑戦してみることにしました。また、KBOYさんのFlutter大学の動画がわかりやすく、学習もスムーズに進めることができました。

FlutterのWidgetはシンプルでわかりやすく、ウィジェットの概念を理解するにつれ、書籍で学んだクラスやメソッドの概念が理解できるようなったと実感しています。

しかし、Flutterをより深く学習するためには英語で書かれた公式ドキュメントを大量に読まなければならず、たとえ翻訳アプリを使ったとしても億劫になってしまいがちでした。結果として、公式ドキュメントを読む習慣がついたのはアプリ開発を初めて数ヶ月たったころでした。

そこで、これまでの学習のアウトプットも兼ねてFlutter初学者向けのアプリを作ったらどうかというアイディアを考えました。初め僕はDartPadのようなアプリをイメージしていましたが(今考えるとハードルが高すぎる。パッケージ使えばなんとかなると思っていた...)、同じようなFlutterアプリを開発したいと考えていたサロンメンバーとチームを組み、最終的に「プログランミング初学者がかんたんにウィジェットと親しめるアプリを作ろう」ということになりました。

実装内容・要件

「スマホでFlutter」の要件は以下です。

  • 初学者がFlutter公式ドキュメントにスムーズに読みこなせる準備段階を作ること
  • そのためにweb上の記事や公式ドキュメントよりもより噛み砕いた説明のコンテンツを作ること
  • 初学者がウィジェットという概念に素早く馴染めること
  • エディター機能をついており、実際の開発の雰囲気を味わえること

各機能や実装内容をまとめると、

  • Home画面のスクロール機能
  • UIの実装に必要なFlutterウィジェットの実装
  • Provider, ChangeNotifierを用いたStatelessウィジェットによる状態管理
  • アプリ内でウィジェットを生成できるエディター
  • 各ウィジェットがわかりやすく理解できるコンテンツおよびコンテンツ画面の作成

といった具合になりました。

「スマホでFlutter」の機能実装

それでは「スマホでFlutter」開発について、いくつか具体的に説明・紹介します!

1.エディター機能

エディター画面 エディターを実行
editor_darcula.png editor_preview.png

シンプルな機能ではあるものの、こちらの実装が最も大変でした。アプリ内で選んだウィジェットをエディターに反映させるためには、Flutterのパッケージなどはまったく使えずDartでゼロからコードを書かなければならなず、初めのミーティングではこのアプリの開発で力になれるのか、正直不安でした。

しかしSeiboyさんが、元となるウィジェットのデータモデルの作成を担当してくれ、僕も徐々にですが一部ウィジェット(Scaffold,AppBar,Containerなど)のデータモデル作成のタスクを担当することができました。

また、フレームワークに頼らず自前で開発していく場合、ドキュメントを充実させていく必要があり、それもエンジニアの重要な仕事の一つだと学びました。

以下は、Scaffoldウィジェットのデータモデルを作成した際のコードの一例です。

class ScaffoldData extends WidgetData {
  Widget fromClient(Map<String, dynamic> clientData) {
    return Scaffold(
      appBar: clientData['appBar'].fromParent(clientData['appBar'].props),
      body: clientData['body'].fromClient(clientData['body'].props),
      backgroundColor: clientData['backgroundColor'].data,
    );
  }//userが指定した値を返すメソッド

  Map<String, dynamic> props = {
    'appBar': AppBarData(),
    'body': ContainerData(),
    'backgroundColor': ColorData(),
  };//初期値を連想配列で設定しておく。

  Widget data = Scaffold(
    appBar: AppBarData().data,
    backgroundColor: ColorData().data,
    body: ContainerData().data,
  );//モデルから変換し実際のウィジェットを返すコード

  String widgetName = 'Scaffold';
}

2.UIのデザインについて

アプリのUIデザインは主に僕が担当させていただきました。

このアプリの目的は「初学者がFlutter公式ドキュメントにスムーズに読みこなせる準備段階を作ること」なので、Flutter公式ドキュメントのデザインを踏襲したものにしました。

こちらのアプリで学習しているうちに、自然と公式ドキュメントの雰囲気にも慣れることができる、ということに狙いを絞っています。

エディターの開発は暗闇を行く感覚でしかなかったのですが、UIを実装したことでぼんやりとしたイメージがはっきりしてきました。

Flutter公式 スマホでFlutter
flutter_official.png widget_app_home.png

( ※Flutterの公式画像などは、二次利用や商用利用が可能なことを確認の上、開発を行なってます。)

アプリの顔となるホーム画面はGridView.count()を使って実装しました。GridView.count()は要素をタイル状に並べられるウィジェットです。 crossAxisCount: 2とすることで、横に2列ウィジェットカードを並べられるようにしました。

GridView.count(
            primary: false,
            padding: const EdgeInsets.all(20),
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            crossAxisCount: 2,
            children: <Widget>[
              WidgetCard(
                image: AssetImage('images/scaffold.png'),
                nextPage: ScaffoldIndexPage(),
              ),
            ],
          ),

また、初の共同開発アプリということもあり、コードの可読性が失われないように細かくリファクタリングを行いながらコードを書きました。

以下は、GridView.countchildren:に表示しているメイン画面のウィジェットカードのコードです。このようにシンプルではありますが、ベタ書きを避けできるだけ使い回せるようコンポーネント化していきました。今後ウィジェットが追加されても扱いやすいようにしました。

class WidgetCard extends StatelessWidget {
  final Widget nextPage;
  final AssetImage image;
  WidgetCard({this.nextPage, this.image});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => nextPage,
          ),
        );
      },
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey[400]),
          borderRadius: BorderRadius.circular(3.0),
          image: DecorationImage(
            image: image,
            fit: BoxFit.fill,
          ),
        ),
        padding: const EdgeInsets.all(8),
      ),
    );
  }
}

その後、Seiboyさんにご指摘いただき、ウィジェットをコンポーネント化する際はstaticメソッドを使って無用なリビルドを防ぐと良いというアドバイスもいただきました。その辺りのアウトプット記事も、また、Qiitaに書きたいと思います。

3.レッスンコンテンツについて

レッスンコンテンツの作成も一部担当しました。複雑な言い回しやわかりにくい表現を避け、シンプルに書くということを心がけコンテンツの作成を行いました。また、随時追加コンテンツを追加していく予定です!

Containerコンテンツ画面 AppBarコンテンツ画面
container2.png app_bar.png
Containerウィジェットの解説例

Containerウィジェットは最も基本的なウィジェットのひとつです。Container特有の目立った機能はありませんが、様々なプロパティを設定したり他のウィジェットと組み合わせることでアプリの基本的な部品となります。また、レイアウトを学んだり、決めていくのにも役立ちます。早速エディターを起動して、サンプルのようにContainerのウィジェットを表示させてみよう!(ヒント...color:にはColors.blueウィジェットを指定しよう)

このアプリでは、Containerはすでに150×150のサイズで表示されるように設定してあります。ここでは、height(高さ)とwidth(幅)を設定して、サンプルのように大きなボックスや小さなボックスを表現してみよう。また、colorプロパティを触って好きな色に変更してみよう。

まとめ

シンプルなアプリではありますが、開発にするにつれ愛着も湧いてきました。リリース後はより多くのFlutter学習者さんに使っていただきたいと思います。

また、共同開発を通してGitHubやAndroid Studioなどアプリ開発を行うためのツールに慣れることができました。

初めはGitコマンドの使い方すら覚束なかったのですが、3人という少数チームということもありコミットせざるをえない状況に追い込まれたのが成長に繋がり、結果このチームに参加してとても良かったと思います。

こういった環境を提供していただいたKBOYさん、一緒に開発をやりぬいたサロンチームの皆さんには感謝しかありません。

最後までお読みいただき、ありがとうございました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
9