【Flutter】#1アプリ開発ドキュメンタリー

10/10からYouTubeライブ新企画『アプリ開発ドキュメンタリー』を開始しました。
毎週日曜日にライブ配信内で、新規プロジェクト作成からリリースまですべてライブで公開します。
ただ開発をするのではなく、コードの解説を交えながら進めていきますので是非ご覧いただければと思います！

↓アーカイブ映像はこちら

どんなアプリを作るの？

今回我々が開発するのは、手書きのメモをデジタル化して保存・編集できるアプリです。手書きのメモの写真を撮るだけで、そこから文字の情報だけを取得し、スマホ上でホワイトボードのように編集できる機能が今回の目玉になります。

開発環境

Dart: 2.12 

Flutter: 2.5.2(Stable)

エディタ: Android Studio

#1で開発した内容

まずはFlutterの新規プロジェクトを作成し、ボトムナビを実装しました。

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
 @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

 PageStatus _currentPageStatus = PageStatus.top;

 final Map<PageStatus, Widget> _pageMap = {
   PageStatus.top: TopPage(),
   PageStatus.setting: SettingPage()
 };

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Column(
       children: [
         Expanded(
           child: _pageMap[_currentPageStatus] ?? SizedBox(),
         ),
         bottomNavigation(context)
       ],
     ),
   );
 }

 SafeArea bottomNavigation(BuildContext context) {
   return SafeArea(
     top: false,
     left: false,
     right: false,
     child: Container(
       height: 70,
       color: Theme.of(context).primaryColor,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceAround,
         children: [
           bottomNavigationItem(
             iconData: Icons.note_outlined,
             pageStatus: PageStatus.top,
           ),
           bottomNavigationItem(
             iconData: Icons.settings,
             pageStatus: PageStatus.setting,
           ),
         ],
       ),
     ),
   );
 }

 IconButton bottomNavigationItem({required IconData iconData, required PageStatus pageStatus}) {
   return IconButton(
     icon: Icon(
       iconData,
       color: Colors.white.withOpacity(_currentPageStatus == pageStatus ? 1 : 0.5),
       size: 35,
     ),
     onPressed: () {
       setState(() {
         _currentPageStatus = pageStatus;
       });
     },
   );
 }
}

enum PageStatus {
 top,
 setting
}

その後、手書きメモをデジタル化するためにgoogle_ml_kitパッケージを利用し、exampleを参考にコードを動かしてみました。

google_ml_kit | Flutter Package

今回はDigital Ink Recognitionという機能を導入して試していたのですが、ここで問題が発生しました。

google_ml_kitは手書きの文字を認識し、何が書かれていたかの予測を表示するためのパッケージなので、我々が作りたい『ホワイトボードのような感じで文字を編集をする』用途には使えないようでした。(当パッケージを画像から文字の部分だけを抽出するためのものだと思い違いしていました)

まとめ

そんなわけで初回から波乱の展開となってしまいましたが、こういったリアルさも含めて今後もお楽しみいただければ幸いです。

Flutterラボ｜動画で学ぶFlutter学習サイト