概要

GitHub CLI1.0がとうとうリリースされました！

GitHub CLI 1.0をリリース - GitHubブログ

GitCLI 1.0をリリース - Issue からリリースまで、GitHub上のワークフローのすべてが、ターミナルから実行可能になります。 - GitHub API を呼び出し、ほぼあらゆるアクションのスクリプト記述だけでなくコマンドにカスタムエイリアスを設定することができます。 - GitHub.com だけ...

github.blog

むしろ、今までなかったのが不思議なくらい笑

本記事では、

・GitHub CLIで何が出来るのか
・GitHub CLIのインストール方法

について解説出来ればなと思います。

ちなみに、どうでもいいのですがGit”h”ubではなくGit”H”ubです笑

GitHub CLIで何が出来るのか？

Issueからリリースに至るまでGitHub上のワークフローの全てが出来ます！

また、当たり前っちゃ当たり前なのですが基本的には
カレントディレクトリのレポジトリを対象として動きます。

それでは、以下例を見てみましょう。

Issue関連

作成

$gh issue create --title "あれがダメ" --body "こうしたらダメだった"
$gh issue create --label "ヘルプ"

下記の様に引数なしだと対話式で作成出来ます。
$gh issue create

一覧

$gh issue list

#192 ほげ
#189 ふが
...

その他、closeやreopenなどが出来ます。

レポジトリ関連

クローン

$gh repo clone OWNER/REPOSITORY_NAME

その他、createやforkなどが出来ます。

エイリアス関連

$gh alias set   [flags]

として、aliasを設定出来ます。

例えば、

$gh alias set il 'issue list'

// とすると

$gh il

// イシュー一覧表示

の様に設定出来ます。

GitHub CLIのインストール方法

では、続いてこれら便利なGitHub CLIを使うためのインストール方法を紹介します。

$ brew install github/gh/gh

これで、ghコマンドが使える様になります。

GitHub CLIにログインしよう

次に、GitHub CLI上でログインをしましょう。

$gh auth login

すると、対話シェルが始まります。
以降、選択していきます。

? What account do you want to log into?  [Use arrows to move, type to filter]
> GitHub.com
  GitHub Enterprise Server

? How would you like to authenticate?  [Use arrows to move, type to filter]
  Login with a web browser
> Paste an authentication token

Tip: you can generate a Personal Access Token here https://github.com/settings/tokens
The minimum required scopes are 'repo' and 'read:org'.
? Paste your authentication token:

書いてある通り、

Build software better, together

GitHub is where people build software. More than 50 million people use GitHub to discover, fork, and contribute to over 100 million projects.

github.com

に飛び、認証トークンを発行します。

GitHub CLIで行いたいアクションに必要な権限を与えて「Generate Token」ボタンを押すと
発行されます。

一度、発行した後はこの文字列は再表示できないので必ずコピーしましょう。
(と言っても、もし間違えたら消して作り直せば良いだけだけど。)

? Choose default git protocol  [Use arrows to move, type to filter]
 HTTPS
>  SSH

として終わりです。

晴れてGitHub CLIが使える様になりました！！

Twitterフォローお願いします

The post 【GitHub CLI】3分で出来る！1.0がリリースされてみたのでインストール手順を解説してみた。 first appeared on 技術は熱いうちに打て！.

概要

Flutterでアニメーションを実装したいけど、アニメーション実装するための方法がありすぎて良く分からん…。

そんなあなたに向けた記事を書きましたので是非読んでみてください。

How to choose which Flutter Animation Widget is right for you? – Flutter in Focushttps://t.co/SidoquJFAx…

この動画がすごく参考になったので
、アニメーションのWidget選びの時に使える様に図式化してみた。
願わくば、デザイナーの人に作り直して欲しいｗ
ブログ化します。#Flutter pic.twitter.com/cbCaNPlq7E

— ashdik(朝日)@Swift,Flutter,Wine,BoardGameエンジニア (@daiki1003) September 21, 2020

参考とした動画

先に言ってしまうと本記事はFlutterチームが出している下記の動画を
和訳してまとめた感じの記事です。
本当にわかりやすい動画だったので記事化したくて書きました。

まとめ画像

この画像だけでも覚えて帰ってね。

画像を見てわからないところは下記で説明しているので
読んでみてください。
それでも分からなければ @daiki1003に質問して下さい！

では、詳細にまいりましょう。

1. お絵かきの様なアニメーションかどうか？

まず、最初はこの質問からです。

お絵かきの様な…と言うのは例えば、鳥が羽ばたくとかそういった類のものです。
それともプリミティブなウィジェット(Row, Column…)が対象なのか。

yes→2へ。
no→3へ。

2. 画像で表現出来る？

大変そうですね、心中お察しします笑

そのアニメーションはベクタ画像やラスタ画像などを使って、アニメーションは実現出来ますか？
出来るのであれば、riveやlottieなどを使って表現してみましょう！

画像で表現出来ない場合は？

その場合は、CustomPainter
を継承したクラスを作成し、描画を行いましょう。
実装例は以下です。

class Sky extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var rect = Offset.zero & size;
    var gradient = RadialGradient(
      center: const Alignment(0.7, -0.6),
      radius: 0.2,
      colors: [const Color(0xFFFFFF00), const Color(0xFF0099FF)],
      stops: [0.4, 1.0],
    );
    canvas.drawRect(
      rect,
      Paint()..shader = gradient.createShader(rect),
    );
  }

  @override
  SemanticsBuilderCallback get semanticsBuilder {
    return (Size size) {
      // Annotate a rectangle containing the picture of the sun
      // with the label "Sun". When text to speech feature is enabled on the
      // device, a user will be able to locate the sun on this picture by
      // touch.
      var rect = Offset.zero & size;
      var width = size.shortestSide * 0.4;
      rect = const Alignment(0.8, -0.9).inscribe(Size(width, width), rect);
      return [
        CustomPainterSemantics(
          rect: rect,
          properties: SemanticsProperties(
            label: 'Sun',
            textDirection: TextDirection.ltr,
          ),
        ),
      ];
    };
  }

  // Since this Sky painter has no fields, it always paints
  // the same thing and semantics information is the same.
  // Therefore we return false here. If we had fields (set
  // from the constructor) then we would return true if any
  // of them differed from the same fields on the oldDelegate.
  @override
  bool shouldRepaint(Sky oldDelegate) => false;
  @override
  bool shouldRebuildSemantics(Sky oldDelegate) => false;
}

CustomPainterは上手く使えば、効率的にアニメーションを描画できますが
下手すると…です。
パフォーマンス監視ツールなどを駆使して上手に実装しましょう。

こちらはかなり上級者向け、修羅の道です笑

3. 永遠？不連続的？協調？

次の3つの質問、

どれか一つでもyes→4へ。
全てno→6へ。

そのアニメーションは永遠に続く？

・1秒毎にランダムなカラーに変更する
・ずっと回転してる

みたいなアニメーションかどうかです。

不連続的なアニメーションか？

不連続、と言うのはアニメーションが0から1、0から1、0から1…と言う様に繰り返すか？
と言うことです。
動画では円が小さい→大きい、小さい→大きい
と言うアニメーションのが例となっています。

複数のウィジェットを協調して動かしたいか？

一つだけではなく、複数のウィジェットをタイミングを見計って動かしたいかどうかです。

動画では四角がウェーブする様なアニメーションが例となっています。

4. FooTransitionに欲しいものはあるか？

このセクションに来た場合、あなたが求めているアニメーションは

Explicit Animation(明示的なアニメーション)

と言うものになります。

AnimationControllerを用意し、必要なタイミング(ボタンを押されたなど)でcontrollerに対して
forward/reverse/stopなどを明示的に呼ぶからです。

Flutter側でContainerSizeTransition、ScaleTransitionなどを用意してくれています。
望むプロパティを変更出来るクラスはありますか？

ある→それを使って実装。
ない→5へ。

5. そのウィジェットは独立しているか？

クラスとしてアニメーションを作成したいかどうかです。

yes→AnimatedWidget
をサブクラス化してアニメーションを実装しましょう！
実装例は以下です。

class SpinningContainer extends AnimatedWidget {
  const SpinningContainer({Key key, AnimationController controller})
      : super(key: key, listenable: controller);

  Animation get _progress => listenable;

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: _progress.value * 2.0 * math.pi,
      child: Container(width: 200.0, height: 200.0, color: Colors.green),
    );
  }
}

no→AnimatedBuilderを
使ってアニメーションを実装します。
実装例は以下です。

final animation = Tween(begin: 0, end: 2 * pi).animate(controller);
AnimatedBuilder(
  animation: animation,
);

※パフォーマンスが心配…？

さて、実際に望む通りのアニメーションをFooTransitionなりAnimatedWidgetなりで
実装してみた。
けど、パフォーマンスが悪い…。

そんな時は、上で紹介したCustomPainterを使ってみましょう。

6. AnimatedFooに欲しいものはあるか？

このセクションに来た場合、あなたが求めているアニメーションは

Implicit Animation(暗黙的なアニメーション)

と言うものになります。

AnimationControllerは自前で用意せず、Flutter側で用意してくれた
クラスが内包してくれています。
プロパティを変更するだけで、アニメーションをしてくれるのでとてもお手軽に実装出来ます。

例えば、AnimatedContainer, AnimatedSizeなどを用意してくれています。
自分が変えたいプロパティがこれらの中に含まれているとしたらこれらを使いましょう！

どんなものがあるかやそれぞれの使い方はmonoさんが詳しく説明してくれているこちらのリンクがおすすめです。

Flutterのお手軽にアニメーションを扱えるAnimated系Widgetをすべて紹介

シンプルなアニメーションはImplicitlyAnimatedWidgetで扱うと楽に組めます

medium.com

おおよそ、これだけで実装出来ます。

AnimatedPositioned(
  top: _top,
  duration: const Duration(milliseconds: 300),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ), 
),

この状態で

setState(() {
  _top = 300;
});

で終わり。簡単でしょ？

TweenAnimationBuilderを使う

AnimatedFooがない場合、TweenAnimationBuilderを
使って実装してみましょう。
実装例は以下です。

TweenAnimationBuilder(
  tween: Tween(begin: 0, end: targetValue),
  duration: Duration(seconds: 1),
  builder: (BuildContext context, double size, Widget child) {
    return IconButton(
      iconSize: size,
      color: Colors.blue,
      icon: child,
      onPressed: () {
        setState(() {
          targetValue = targetValue == 24.0 ? 48.0 : 24.0;
        });
      },
    );
  },
  child: Icon(Icons.aspect_ratio),
);

これでボタンを押すたびに、アイコンが24になったり48になったりします。

最後に 「次回以降も記事を読んでみたい！」
「この辺分からなかったから質問したい！」

そんな時は、是非@daiki1003のフォローお願いします♪

The post 【Flutter】Animated？Transition？もう迷わない！アニメーションに最適なWidgetの選び方を丁寧に解説してみた first appeared on 技術は熱いうちに打て！.

概要

「2020年10月」って表記したいけど、どのフォーマット使えば良いんだっけ？

そんなあなたの疑問にお答えする様な記事になってるかと思います。

IntlとFlutterのバージョン

Flutter：1.20.4
Intl：^0.16.1

Intlのインストール

intl | Dart Package

Contains code to deal with internationalized/localized messages, date and number formatting and parsing, bi-directional text, and other internationalization iss...

pub.dev

パッケージのインストール方法についてはこちらをどうぞ。

【超簡単！】Flutterのパッケージのインストール方法を説明するよ！

Flutterのパッケージのインストール方法で悩んでいませんか？ この記事では、主に初心者向けにパッケージインストール方法からおすすめのパッケージについて解説しています。 是非ご覧ください♪

blog.dalt.me

2020.10.06

日本語の場合

注意点

予め、

import 'package:intl/date_symbol_data_local.dart';

await initializeDateFormatting('ja_JP');

こちらをどこかで読んでおく必要があります。

Intlでのフォーマットとその出力結果

print(DateFormat.d('ja').format(DateTime.now()));

の様にしています。

Twitterフォローお願いします

The post 【Flutter】Intlパッケージの各フォーマットの出力結果一覧をまとめてみた first appeared on 技術は熱いうちに打て！.

概要

Flutterでの開発には、世界中のデベロッパが作ってくれたパッケージのインストールが欠かせません。
あなたはどの様にパッケージを追加していますか？

実は、以前パッケージのインストール記事を書きました。

【超簡単！】Flutterのパッケージのインストール方法を説明するよ！

Flutterのパッケージのインストール方法で悩んでいませんか？ この記事では、主に初心者向けにパッケージインストール方法からおすすめのパッケージについて解説しています。 是非ご覧ください♪

blog.dalt.me

2020.10.06

pub.dev に飛んで、欲しいパッケージ名を選択。
Installingタブを選択して。

…面倒くさい！

今回は早ければ3秒でパッケージ追加が完了してしまう、
魔法の様なVSCodeエクステンション「Pubspec Assist」を紹介します！

Pubspec Assist - Visual Studio Marketplace

Extension for Visual Studio Code - Easily add and update dependencies to your Dart and Flutter project.

marketplace.visualstudio.com

Pubspec assistのインストール方法

1. Visual Studio Codeを立ち上げる

2. Extensionsタブを選択 (⌘ + Shift + X)

3. pubs…くらいまで入力

4. 「Pubspec assist」が出るはずなので追加

Pubspec assistの使い方

1. ⌘ + Shift + pでコマンド入力画面の表示

2. 「Pubspec Assist: Add/update dependency」を選択

3. インストールしたいパッケージ名の全てまたは一部をタイプし、Enter

4. 複数候補がある場合は一つを選択する (なければ3の時点でインストール開始)

これで終わりです。

めちゃくちゃ簡単じゃないですか？
ちなみに、バージョンは最新のものが表記されます。

Twitterフォローお願いします

The post 【Flutter】3秒でパッケージ追加完了！？VSCode使いに絶対に入れて欲しい拡張機能「Pubspec Assist」を紹介するよ！ first appeared on 技術は熱いうちに打て！.

概要

所持端末をiOS14に変えたため、それにつられてFlutterも1.22.1にアップグレードしました。
それが原因かわかりませんが、build_runnerを走らせると

~/repos/flutter/bin/cache/pkg/sky_engine/lib/ui/channel_buffers.dart:47:14 - This requires the 'non-nullable' language feature to be enabled.

こんなエラーが大量に出ました。

今日はこれを解決するために行ったことを書いていきたいと思います。
結果だけ知りたい人は最後の方までスクロールしてみてください！

Flutterパッケージのアップグレード

エラーを見ていると

Your current `analyzer` version may not fully support your current SDK version.

Please try upgrading to the latest `analyzer` by running `flutter packages upgrade`.

Analyzer language version: 2.9.0
SDK language version: 2.10.0

If you are getting this message and have the latest analyzer please file
an issue at https://github.com/dart-lang/sdk/issues/new with the title
"No published analyzer available for language version 2.10.0".
Please search the issue tracker first and thumbs up and/or subscribe to
existing issues if present to avoid duplicates.

と言うエラー文が見えたのでその通りに

flutter packages upgrade

を実行しました。

この時点ではまだ解決せず。

analyzerパッケージのアップグレード

以前、1.20.4の際に、

【Flutter】build_runnerでNo actions completed for 15.1sが出て困って解決した話

Flutter

blog.dalt.me

2020.09.02

この様なエラーで困っていました。
この時の解決方法はanalyzerのバージョンを指定すること。

analyzer: 0.39.14

今回、このバージョンを

analyzer: 0.39.17

にしたところ無事解決！！！

Twitterフォローお願いします

The post 【Flutter】これで解決！build_runnerで 「This requires the 'non-nullable' language feature to be enabled.」の対処法 first appeared on 技術は熱いうちに打て！.

概要

TODOアプリや何か目標を達成するアプリなど、達成時の演出は気持ち良くしたいですよね。
その気持ちよさはアプリの継続にも大きく繋がってくるかと思います。

今回はそんな時にぴったりのConfettiパッケージについて解説しようと思います。

confetti | Flutter Package

Blast colorful confetti all over the screen. Celebrate in app achievements with style. Control the velocity, angle, gravity and amount of confetti.

pub.dev

Confettiパッケージのインストール

パッケージのインストール方法については過去記事のこちらを
参考にしていただけると出来るかと思います。

VSCode使いの方は、拡張機能であるPubspecAssistを使うと
簡単にインストール出来るのでおすすめです！

【Flutter】3秒でパッケージ追加完了！？VSCode使いに絶対に入れて欲しい拡張機能「Pubspec Assist」を紹介するよ！

Flutterでの開発には、世界中のデベロッパが作ってくれたパッケージのインストールが欠かせません。 あなたはどの様にパッケージを追加していますか？ 実は、以前パッケージのインストール記事を書きました。 pub...

blog.dalt.me

2020.10.06

それ以外の方はこちらをご覧ください。

【超簡単！】Flutterのパッケージのインストール方法を説明するよ！

Flutterのパッケージのインストール方法で悩んでいませんか？ この記事では、主に初心者向けにパッケージインストール方法からおすすめのパッケージについて解説しています。 是非ご覧ください♪

blog.dalt.me

2020.10.06

最低限のコード

class ConfettiSample extends StatefulWidget {
  @override
  _ConfettiSampleState createState() => _ConfettiSampleState();
}

class _ConfettiSampleState extends State<ConfettiSample> {
  final _controller = ConfettiController(duration: Duration(seconds: 50));

  @override
  void initState() {
    _controller.play();
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.topRight,
        child: ConfettiWidget(
          confettiController: _controller,
        ),
      ),
    );
  }
}

これだけで最低限の紙吹雪が出てきます。

では、これをカスタマイズするにはどうすれば良いのでしょうか？
何がカスタマイズ出来るのでしょうか？

Confettiパッケージでカスタマイズ出来るところ

それでは、これから何をカスタマイズ出来るのか紹介していきましょう。

全体の秒数

final _controller = ConfettiController(duration: const Duration(seconds: 10));

ConfettiControllerインスタンスを生成する際に、引数として渡します。
何も渡さなければデフォルトで30秒間が設定されています。

発射頻度

0から1の間で設定し、大きければ大きいほど1フレームの間に
発射する紙吹雪の頻度が増えます。

ConfettiWidget(
  confettiController: _controller,
  emissionFrequency: 0.1,
);

emissionFrequency: 0.1

emissionFrequency: 1

噴出角度

0から2πの間で噴出する角度を設定する事が出来ます。
デフォルトはπになっており、真左に向かって噴出します。
1/4πが真下、3/4πが真上になっています。

import 'dart:math';

ConfettiWidget(
  confettiController: _controller,
  blastDirection: pi,
);

blastDirection: 0

blastDirection: 3 * pi / 2

最小/最大噴出初速

紙吹雪の出る瞬間の5フレーム分の速度の最小、最大値を設定します。
デフォルトは最小5、最大20です。
どちらかだけを指定する事も出来ますが、最小値<最大値は満たしている必要があります。

ConfettiWidget(
  confettiController: _controller,
  minBlastForce: 5,
  maxBlastForce: 20,
);

minBlastForce: 50, maxBlastForce: 200

一度に発射する紙の数

一度に発射する紙の数を設定します。
デフォルトは10です。

ConfettiWidget(
  confettiController: _controller,
  numberOfParticles: 10,
);

numberOfParticles: 100

噴出方向性

噴出開始位置からの噴出の仕方を設定できます。
enumになっており、directional or explosiveで設定できます。
デフォルトはdirectional。

ConfettiWidget(
  confettiController: _controller,
  blastDirectionality: BlastDirectionality.directional,
);

blastDirectionality: BlastDirectionality.explosive

紙の落ちる速さ

紙の落ちる速さ、つまり重力の大きさを設定します。
0〜1の間で設定します。
0でも無重力というわけではなく、落ちはしますがかなりゆるやかになっています。
デフォルトは0.1。

ConfettiWidget(
  confettiController: _controller,
  gravity: 0.1,
);

gravity: 0

gravity: 1

繰り返しをするかどうか

最初に設定した、「全体の秒数」の表示が終わった後にループをするかどうかを設定します。
デフォルトはfalse。
trueにしても急に紙吹雪がなくなったりしないのでどこが継ぎ目か分からない様に上手くやってくれている印象です。

ConfettiWidget(
  confettiController: _controller,
  shouldLoop: false,
);

紙吹雪の色

紙吹雪の色を設定します。
複数色設定する事も可能です。
設定された値の中からランダムで選択されます。
指定しないとランダム色となります。

想像はつくと思いますが、空だとエラーになってしまいます。

ConfettiWidget(
  confettiController: _controller,
  minBlastForce: 50,
  colors: null,
);

紙の最小/最大サイズ

紙吹雪それぞれの最小、最大サイズを設定します。
その間でランダムに大きさが決定されます。
デフォルトは最小Size(20, 10)、最大Size(30, 15)です。

ConfettiWidget(
  confettiController: _controller,
  minimumSize: Size(20, 10),
  maximumSize: Size(30, 15),
);

minimumSize: Size(1, 1), maximumSize: Size(10, 10)

抗力

紙吹雪に対する抗力を設定出来ます。
0から1の間で設定し、小さければ小さいほど強い抗力になります。
デフォルトは0.05。

ConfettiWidget(
  confettiController: _controller,
  particleDrag: 0.05,
);

particleDrag: 0

particleDrag: 0.5

particleDrag: 1

描画領域

紙吹雪の描画領域を指定することができます。
この指定サイズを超えた紙吹雪は描画されません。
デフォルトはnullです。

ConfettiWidget(
  confettiController: _controller,
  canvas: null,
);

canvas: Size(500, 500)

おまけ：発射開始位置描画

ほぼ開発用途ですが、紙吹雪の発射開始位置を描画させるかどうかを指定します。
デフォルトはfalseです。

displayTarget: true

いかがでしたでしょうか？
皆さんの好みの紙吹雪演出は作れそうでしょうか？

Twitterフォローお願いします

The post 【Flutter】紙吹雪はこれで決定！Confettiパッケージについて徹底解説してみた first appeared on 技術は熱いうちに打て！.

概要

Flutterでコードを書いていると

・デバッグ(リリース)時のみ動作させたい

の様な要件が出てくると思います。

そんなときにどうやって判定すれば良いかを解説したいと思います。

Flutterで実行モードを判定する方法とは？

2020年11月5日現在、「Flutter check debug mode」などと検索すると
assertを使う方法や “dart.fm.product”環境変数を使う方法などが出てきます。

が、今はそんなに難しいことをする必要はありません。

import 'package:flutter/foundation.dart';

if (kDebugMode) {
  // デバッグモード
}

if (kProfileMode) {
  // プロファイルモード
}

if (kReleaseMode) {
 // リリースモード
}

と言う様に簡単に判定出来る定数が用意されているので
こちらでいけるかと思います。

Twitterフォローお願いします

The post 【2020年版】Flutterでdebug/profile/releaseの実行モードを確認する方法 first appeared on 技術は熱いうちに打て！.

概要

週刊Flutterとは？

Building performant Flutter widgets

Building performant Flutter widgets

This article is part of a series developed after the Flutter Material team worked on making the Flutter Gallery app more performant on the…

medium.com

概要

・AnimationListenerのaddListener内でsetStateをしない
・ListView(children: […]) vs ListView.builder
　- 予め描画する個数がわかっており、そこまで多くない場合は前者
　- それ以外は後者
　　- ListView.builderは描画する範囲のWidgetを都度描画する
・framework.dartをごにょごにょすると各Widgetのビルド回数が分かる

InteractiveViewer

概要

・画面サイズをはみ出す際に、ズームなどよしなに出来る様にしてくれるWidget

Improving perceived performance with image placeholders, precaching, and disabled navigation transitions

Improving perceived performance with image placeholders, precaching, and disabled navigation…

Perceived performance is how fast an application feels to the user. This article covers three strategies that you can use in your…

medium.com

概要

・ネットワークから画像を取得する際に、Widgetサイズがかわり画面がガチャガチャしてしまうことがる
・Image.frameBuilderを使えばこの問題に対処出来る
・precacheImageなんて言うメソッドもあるので有効活用出来ると良い

Learn Flutter Hooks and Maximize Your Code Reuse

概要

・StatefulWidgetではinitStateやdisposeしなきゃいけないけどFlutterHooksを使えば、
ボイラープレートを減らせるよ
・Hookを継承した新しいusexxxxメソッドの作り方の説明

dart の stream を理解して async* と yield を正しく使う

dart の stream を理解して async* と yield を正しく使う - Qiita

はじめに dartのstream、初めてみたときは「なんだコレ」と思いました。パッと見難しげで、ちょっと避けていました。ただ、最近避けて通れなくなった出来事もあり、その際にだいぶ理解できたので、なんだかよくわからない人向けに解説...

qiita.com

概要

・Streamはデータをつなぐ架け橋を作る、橋の両端はクラスだろうがメソッドだろうがなんでも可
・”.sink.add”でデータを流す、”.listen”でデータの流れを監視
・await forでデータの流れの終わりまで待って続きの処理を行う
・async*を書くと戻り値がStreamになる、yieldはasync*を記述された関数のreturnの代わりになる

Themes in Flutter: Part 1

Themes in Flutter: Part 1

This is how the theme looks in flutter!

medium.com

概要

テーマに関しては本当にプロパティが多すぎて挫折するので、これを期にまとめて学習しようと思いました。

その他

先週の金曜日くらいにやろうと思い立ったので、今週は記事少なめです。
来週からきちんと1週間分になるのでもう少し多くなって来るとは思います。

Twitterフォローお願いします

The post 週刊Flutter #0 first appeared on 技術は熱いうちに打て！.

概要

週刊Flutterとは？

みんなのlib/以下のフォルダ構成ってどうなってるの？

#Flutter のフォルダ構成に関して lib フォルダ以下みんながどうしてるのかめちゃくちゃ気になる。
出来ればこのTweetがそんな知見が集まるスレになってくることを祈って…

— ashdik(朝日)@Flutter,Wine,BoardGameエンジニア (@daiki1003) November 9, 2020

こちらに関しては、本当にいろんな方から意見をいただきありがたい限りです。
めちゃくちゃ勉強になったので、今後ブログ記事にしようかと思っています。
Atomic Designを使う、機能名でルート階層を作るなどなど。
良ければ上記スレを覗いてみてください。

Accessible expression with Material Icons and Flutter

Accessible expression with Material Icons and Flutter

Material Design and Flutter both help developers build experiences that are flexible, accessible, and expressive…

medium.com

・マテリアルアイコンが「塗り潰し」「枠のみ」の他に「シャープ」「丸っぽい」が追加されたよ
・vectorなので拡大縮小やカラーリングで質が落ちる心配はない
・pubspec.yamlでuses-material-design:trueを指定すれば
使える
・コンパイル時に実際に使っているアイコン以外は削ぎ落としてパッケージ化をしてくれる

Size matters: Reducing Flutter App size best practices

Size matters: Reducing Flutter App size best practices

2.6 million apps in the Google Play store today — no wonder convincing a user to install your app has never been more difficult. As if it…

medium.com

・どんな素晴らしいアプリを作ってもアプリサイズが大きいとダウンロードしてくれる可能性は低くなる
・データとして、APKサイズが10MBまでのアプリは100MBまでのアプリより1.3倍ダウンロードされている
・アプリのパフォーマンスを改善する7つのtipsをご紹介

1. 画像をバンドルせずにダウンロードさせる、圧縮するとなお良い
2. カスタムフォントはgoogle_fontsパッケージを使おう
3. 不必要なアイコンはバンドルしない(flutter buildに –tree-shake-icons を付与)
4. ABI毎にダウンロード対象リソースを分ける (flutter build appbundle か flutter build apk –split-per-abi)
5. プロフィール画像など良く使う画像等をキャッシュする
6. Proguard(変数名を短くしたり、不必要なコードの刈り取り)
7. 必要なライブラリだけ使う (いらなくなったアセットやライブラリは削除しろ)

New ad formats for Flutter

New ad formats for Flutter

Beta program opens for inline banner and native ads support

medium.com

・新しい広告フォーマット「インラインバナー」「ネイティブ広告」が追加されたよ
・インラインバナーはFlutterViewに取り込める
・だがまだ、招待オンリーのβ版
・本番アプリで実装してみてフィードバックが欲しいとのこと
・出来れば2021年初期頃にリリースしたい

My November Recommendations for Flutter Packages

My November Recommendations for Flutter Packages

Discover Flutter

medium.com

個人的には、いろんなサイズの端末をエミュレート出来るdevice_previewがすごいと思いました。

device_preview 0.5.4
色んな端末上での動作をエミュレート出来るプラグイン。
え、普通にすごくないか？
Flutterって一回コード書けばAndroid/iOSで動くと言いつつもやはり見た目とか動作検証は必要になってくるからそこをいかに効率化するかはとても大事な所。https://t.co/Rqqlopp0Y3#Flutter

— ashdik(朝日)@Flutter,Wine,BoardGameエンジニア (@daiki1003) November 13, 2020

Flutter Complete Reference Book Review

Flutter Complete Reference Book Review

This past week the flutter community was blessed with the arrival of a new book, Flutter Complete Reference. Being that it is so new, many…

medium.com

Amazon | Flutter Complete Reference: Create beautiful, fast and native apps for any device (English Edition) [Kindle edition] by Miola, Alberto, Angelov, Felix, Rešetár, Matej, Rousselet, Rémi | Specific Skills | Kindleストア

Flutter Complete Reference: Create beautiful, fast and native apps for any device (English Edition) by Miola, Alberto, Angelov, Felix, Rešetár, Matej, Roussele...

amzn.to

・700ページ越えの超大作であるこちらの本のレビュー記事
・英語版のみしかないが僕は購入しました、本当にいろいろ網羅的に描かれていて今から読むのが楽しみ！
・Dart言語、FlutterのWidgetの基本を網羅し、Riverpodなどのツールにも言及されている
・RiverpodやProviderの作者であるRemi Rousseletさんがレビュアーらしい
・この本で知ったのですが、riverpodはProviderのアナグラム(並び替え)らしい…！
・最初2チャプターのレビューはこちらのyoutube動画にて

5 Tools/Packages for Productive Flutter Development

5 Flutter Packages/tools for faster & more productive project development

Here is my recommendation of 5 Flutter packages or tools that can help you make your project development faster & more productive.

medium.com

ログを見やすくするloggerパッケージなんかはすぐに使ってみたいと思いました！

logger | Dart Package

Small, easy to use and extensible logger which prints beautiful logs.

pub.dev

Controlling time in Dart unit tests, the better way

Controlling time in Dart unit tests, the better way

How to control DateTime.now() in Dart unit tests - the better way.

iiro.dev

・DateTime.now()が内包されたメソッド、クラスのテストをどうするのか？
・インスタンス作成時にコンストラクタの引数で望んでいる時刻の生成関数を渡すことによって解決
・でも、それ全部のクラスでやるの？
・Clockクラスを作る、上記対応をする、このクラスを全部で参照すれば解決….！？
・clockパッケージ(Dartチーム監修)に依存するのが良い
・個人的な感想としては、一般的にはDateTime.nowが汎用的に使われている中で覚えること一つ増えるのはなかなかにハードだなぁと。

Develop an iOS 14 Widget in Flutter with SwiftUI

Develop an iOS 14 Widget in Flutter with SwiftUI

Damn, I really want to create an iOS 14 homescreen widget, but my app runs on Flutter. So I guess it’s not possible? 🤕

itnext.io

Flutter + Firestore: You may be using it wrong.

Flutter + Firestore: You may be using it wrong.

Cloud Firestore can be very powerful when coupled with Flutter, but also tricky for Production-Ready Apps where a good architecture is…

medium.com

Twitterフォローお願いします

The post 週刊Flutter #1 first appeared on 技術は熱いうちに打て！.

概要

週刊Flutterとは？

Announcing Dart null safety beta

Announcing Dart null safety beta

Beginning the journey to migrate packages to a sound, safer state

medium.com

・Dart SDKを2.12以上に制限すれば使える

environment:
  sdk: ">=2.12.0-0 <3.0.0"

・移行するには、依存しているパッケージがNullSafety対応している必要がある

dart pub outdated --mode=null-safety

で調べられる
・NullSafetyの利点は
　・安全性
　・コンパイル速度/実行速度の向上

Deprecation Lifetime in Flutter

Deprecation Lifetime in Flutter

Reliably removing deprecated code on a scheduled basis.

medium.com

・いくつかのAPIをdeprecatedにしようとしている
・deprecatedにする前にはFlutter Contributor Discordや
flutter-announce、flutter-devの様なgoogle groupにも手を加える前にお知らせする
・ target="_blank">マイグレーションガイドの追記
・本格的に削除するのはstable版のリリースから1年か4つのstable版リリースの長い方
・このフローでやるのは初めてなので、今回はdeprecated量は少なめ

Dartの自作 package を null safety 版に移行した際の知見

Dartの自作 package を null safety 版に移行した際の知見

zenn.dev

・$dart migrateで移行差分をwebで確認出来る
・NullSafety非対応のパッケージに依存している場合は

// @dart=<major>.<minor>

の様に記述することで異常終了を回避出来る

Flutter Performance Optimization

Flutter Performance Optimization

Know all about async/await , Isolate, Thread & Event Loops

medium.com

Isolate class - dart:isolate library - Dart API

API docs for the Isolate class from the dart:isolate library, for the Dart programming language.

api.flutter.dev

・スレッドはあるメモリの塊を持つ独立したプロセスで、メモリ上で与えられた処理を行うもの
・JavaやC++はスレッド間でヒープメモリを共有するが、Isolateは各々がメモリを保持しており独立して処理できる
・Isolate間でデータのやり取りはポート(ReceivePort, SendPort)を通してやり取りできる
・大量のデータをネットワークから取得する、画像処理などをする時にIsolateを使う
・

var getData = await compute(function, parameter);

の様にcomputeメソッドを記述することでIsolateを使える。
・第一引数はstaticなFutureかFunction、第二引数は第一引数のFutureやFunctionに渡したい引数

New Localization (Flutter 1.22): i18n and l10n support

New Localization (Flutter 1.22): i18n and l10n support

Flutter 1.22 introduced in-built support for internationalization (i8n) and localization (l10n). In the earlier versions of Flutter, we…

medium.com

The 10 Best and Most Liked Flutter Packages

The 10 Best and Most Liked Flutter Packages

Increase your productivity and development speed today

medium.com

・flutter_slidableは初耳なのでちょっと触ってみたい

Flutter/Riverpodで、ProviderScopeのoverridesを使ってFlavorを伝播する

Flutter/Riverpodで、ProviderScopeのoverridesを使ってFlavorを伝播する

zenn.dev

flutter1.22から追加されたMaterialStateをサクッと解説する

flutter1.22から追加されたMaterialStateをサクッと解説する

zenn.dev

Flutter Immutability as a PRO using StateNotifier

Creating Flutter Application Integrated With Artificial Intelligence

Creating Flutter Application Integrated With Artificial Intelligence

The rapid growth of digitization has successfully paved the way for emerging technologies that lead to better user experience. We are into…

medium.com

まだ少ししか見れてないので、次回の週刊Flutter辺りに概要載せたい。

Twitterフォローお願いします

The post 週刊Flutter #2 first appeared on 技術は熱いうちに打て！.

概要

週刊Flutterとは？

Dev Fest LATAM – Null safety in Dart

・NullSafetyについて
・まだやることはたくさんあるし今公開しているものは変わる可能性はある
・dart migrateを使うと良いよ
・null! とかも出来る… 😂

Creating a Flutter App from Sketch

Creating a Flutter App from Sketch

Wouldn’t it be cool, if you could create a working Flutter app directly from a design created in Sketch? Let’s do a proof of concept…

medium.com

・SketchからUIを興す方法
・ちょっと時間はかかりそうだが、ボリューム多めのUIをSketchで組んでいる方は取り組んでみると良さそう？
(僕も時間がある時にやってみます)

週刊 Dart & Flutter インプット 46

週刊 Dart & Flutter インプット 46

毎週金曜日に、@ntaoo がインプットした Dart & Flutter の情報のリンク集をまとめて共有します。

medium.com

【Flutter】Text Widgetのwidthを取得し、アニメーション付きでアンダーラインを表示する方法

【Flutter】Text Widgetのwidthを取得し、アニメーション付きでアンダーラインを表示する方法 - Qiita

アニメーション付きアンダーラインはAnimatedContainerで表現する。 Text Widgetのwidth取得方法はこちらを参考に実装。 header_menu_item.dart class HeaderMenuIte...

qiita.com

・RenderParagraphと言うのを使って計算しているみたい

詳しく調べてみると…

Flutter テキストレンダリングの仕組み

Flutter テキストレンダリングの仕組み - Qiita

1. はじめに 本記事は、主にFlutterのテキストWidget (Text, RichText) における、テキストのレンダリングの仕組みについての調査結果をまとめています (他の記事も同様ですが、基本的に随時更新しています...

qiita.com

・上記の流れで読んだのがこれ
・Flutterのテキスト描画システムはBuild, Layout, Paintの工程に分かれる
・Textは内部にRichText

wine_classifier

PuzzleLeaf/flutter_popular_wine_classifier

Simple Mobile classification model for popular wine - PuzzleLeaf/flutter_popular_wine_classifier

github.com

・Flutter好きのワイン好きとしては入れざるを得なかった笑

Learn Flutter Like A PRO 2021 Edition ( Absolutely Free )

Learn Flutter Like A PRO 2021 Edition ( Absolutely Free ) 💙

Build 25+ Apps ⚡️

My 3 Years of hard work to make this content. 👨🏻‍💻

For the correct order to learn. ⌕

Here is the Full Thread Down 👇🏻

Retweet for awareness. 🔁

Subscribe MTECHVIRAL Youtube
@mtechviral #Flutter pic.twitter.com/skXLfUoBve

— The Pawan Kumar (@imthepk) November 27, 2020

これのうちの一つが下記動画↓

Top VS Code Extensions You Don’t Know

VSCodeのextensionを10個ちょい紹介してくれてる。
確かに知らないの多いなぁー。https://t.co/I4zDF1GNOH#Flutter

— ashdik(朝日)@Flutter,Wine,BoardGameエンジニア (@daiki1003) November 29, 2020

確かに、Bracket Pair Colorizer2以外知らなかった。

上のツイートのコメントでも紹介したが、

Error LensやGit Historyなどは入れて見て結構良かったのでおすすめ。
Bookmarksとかも近々入れてみる予定。

Learn Flutter Life Cycle In 10 Minutes

・initState, didChangeDependencies, didUpdateWidget, deactivate, disposeについて紹介
・呼ばれるタイミングや、superを呼ぶタイミングなど
・deactivateは確かに初めて知ったし、どういうタイミングで呼ばれるかは気になるところ🤔

Coding Guidelines for Dart

Coding Guidelines for Dart

High quality code with good style is not only essential for a developer, but also makes it easier to maintain the software.

medium.com

・ファイル名はスネークケース、クラス名はキャメルケース、enumの値は先頭小文字のキャメルケース
・クラスプロパティの順番はプライベートメンバ、パブリックプロパティ、コンストラクタ、パブリックメソッド
→これ本当か？lint的にはコンストラクタは一番最初に持ってこいって書いてる様な。
・dartfmtでフォーマットする、1行は80行以内、1メソッドはコメントなどを除き30行以内

Animated TypeWriter Box In Flutter

Animated TypeWriter Box In Flutter

I generally needed to work with flawless or insane animations. I have worked with Flutter for a long time, and I was beginning to locate…

medium.com

・タイプライターの様なアニメーションをFlutterで実現するための説明
・アニメーションを作成するのに、必須であるDurationやTweenなどの説明を丁寧にしてくれているのでアニメーションが苦手な人は一読する価値はあるかも
・そして全コードも載せてくれているのでコピペで実現可能なのも👍

Complete Movie App — Pilot (1)

Complete Movie App — Pilot (1)

Hey, Glad that you’re here.

medium.com

・現状11まで連載されている
・必要になることが多い、言語管理やエラーハンドリングなど解説されている

Twitterフォローお願いします

The post 週刊Flutter #3 first appeared on 技術は熱いうちに打て！.

概要

週刊Flutterとは？

Developing with Flutter on Apple Silicon

flutter/flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond. - flutter/flutter

github.com

・最低でも1.22.4にしてね (betaとかdevにするともっと良くなってるかも)
・実機はいけるけどシミュレータはまだ
・Android Emulatorもまだ
・VSCodeやJetBrainsのサポートも進んでいる
・cocoapods失敗するけど、workaroundもあるよ

SwitchListTile(今週のウィジェット)

・List形式でSwitchを実装したい場合に便利
・リストのどこを押しても反応する
・ListTileの様にleading, trailing, title, subtitleも設定可能

週刊Dart & Flutter インプット47

週刊 Dart & Flutter インプット 47

毎週金曜日に、@ntaoo がインプットした Dart & Flutter の情報のリンク集をまとめて共有します。

medium.com

FlutterでもFirebaseAnalyticsを活用しよう

FlutterでもFirebaseAnalyticsを活用しよう

Flutterでも FirebaseAnalyticsを活用しよう @kikuchy

docs.google.com

Flutter x Firebaseアーキテクチャ

Explore Slivers in Flutter

Explore Slivers In Flutter

Using Slivers To Making Scrollable Layouts In Flutter

medium.com

・SliverとCustomScrollView恐怖症の人は絶対見るべき
・かく言う僕がそうだったのだが、これを見てとても良く分かったし苦手意識は無くなった

Obfuscating The Flutter App

Obfuscating the Flutter App

In-app development, it is important to manage its performance. Performance covers different aspects like speed and responsiveness and it…

medium.com

・アプリサイズが小さいことは大事、難読化すれば小さくなるしリバースエンジニアリングもされづらくなるよ
・やり方の説明が詳細に載っている

Chip Widget: Material Design with Flutter

Flutterで100画面を超える規模のアプリを開発してみた感想 | 東京のアプリ開発会社

株式会社Pentagon (ペンタゴン) の yamatatsu です。アプリ開発のエンジニアとして仕事をしています。Flutterでの開発歴は1年ほどになります。 この記事を読...

pentagon.tokyo

・割と初心者向けに丁寧に解説されているイメージ
・フォルダ構成やAPIの呼び方、エラーハンドリングなど
・一読するとFlutterでアプリを作ると言うのはどう言うことかを学べると思う

Stacked architecture in Flutter

Stacked architecture in Flutter

In the quest of finding the most versatile architecture that I can use to create and maintain Flutter apps. I have tried no architecture…

liewjuntung.medium.com

Build a Twitter App in 14 minutes with Flutter

・AsyncValueやTwitterフォローお願いします 「次回以降も記事を読んでみたい！」
「この辺分からなかったから質問したい！」

そんな時は、是非@daiki1003のフォローお願いします♪

また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！

ashdik

Hey 👋 I just created a page here. You can now buy me a coffee!

www.buymeacoffee.com

The post 週刊Flutter #4 first appeared on 技術は熱いうちに打て！.

概要

この記事は、Flutter #1 Advent Calendarの10日目の記事です。

こんなやつ実装します。
コード量的には200行ほどで出来てしまいます！
(自分でもびっくり)

実際の動作

今回の全コードはgist.github.comに載せています！
・main.dartにコピペ
・pubspec.yamlに依存関係を追加
だけで動くと思います。

ざっくりとした手順

// 機能
1. 表示するバッジ数を取得 (本記事では説明は割愛)
2. バッジ数を保持するためのStateProviderを定義
3. それぞれのバッジ数をStateProviderに保持
4. アプリの状態を監視する (本記事では説明は割愛)
5. バックグラウンドに行く際にアプリのバッジを設定

// UI
6. お知らせバッジWidget生成
7. タブアイコンWidget生成
8. BottomNavigationBarの生成

それではやっていきましょう！

機能

1. 表示するバッジ数を取得 (本記事では説明は割愛)

こちらは詳細は割愛しますが、APIか内部処理で取得することになるでしょう。

2. バッジ数を保持するためのStateProviderを定義

final _homeBadgeProvider = StateProvider<int>(
  (ref) => 0,
);
final _notificationBadgeProvider = StateProvider<int>(
  (ref) => 0,
);
final _myPageBadgeProvider = StateProvider<int>(
  (ref) => 0,
);

final _appBadgeProvider = Provider<int>(
  (ref) {
    final homeBadge = ref.watch(_homeBadgeProvider).state;
    final notificationBadge = ref.watch(_notificationBadgeProvider).state;
    final myPageBadge = ref.watch(_myPageBadgeProvider).state;

    return homeBadge + notificationBadge + myPageBadge;
  },
);

タブの分だけStateProviderを用意します。
後に通知数を更新する必要があるので、StateProviderを使用しています。

そして、最後アプリのアイコンに付けるバッジ数を
保持する_appBadgeProviderです。
アプリのタブに表示するバッジ数をref.watchで監視し、
それらが更新された時に勝手に再計算されます。
なので、僕らが意図的に値を更新することはありません。
そのため、Providerを使っています。

※ここでは、同じファイルで参照するのでprivateになっていますが、
別ファイルにpublicで定義してもOKです！

3. それぞれのバッジ数をStateProviderに保持

final badgesResponse = await http.get(url);
final json = json.decode(badgesResponse.body);

context.read(_homeBadgeProvider).state = json['home_count'];
context.read(_notificationBadgeProvider).state = json['notification_count'];
context.read(_myPageBadgeProvider).state = json['my_page_count'];

取得する部分は簡略化していますが、何らかの方法で取得したバッジ数を、
定義したStateProviderに保持していきます。

4. アプリの状態を監視する (本記事では説明は割愛)

WidgetsBindingObserver と言うmixinに準拠することによって
アプリの状態を監視する事が出来ます。
詳しくは別記事で解説しようと思っています。

5. バックグラウンドに行く際にアプリのバッジを設定

flutter_app_badgerと言うパッケージを使います。

flutter_app_badger | Flutter Package

Plugin to update the app badge on the launcher (both for Android and iOS)

pub.dev

パッケージのインストール方法に関してはこちらからどうぞ。

【超簡単！】Flutterのパッケージのインストール方法を説明するよ！

Flutterのパッケージのインストール方法で悩んでいませんか？ この記事では、主に初心者向けにパッケージインストール方法からおすすめのパッケージについて解説しています。 是非ご覧ください♪

blog.dalt.me

2020.10.06

VSCodeを使っている方は圧倒的にこちらの方がおすすめです！

【Flutter】3秒でパッケージ追加完了！？VSCode使いに絶対に入れて欲しい拡張機能「Pubspec Assist」を紹介するよ！

Flutterでの開発には、世界中のデベロッパが作ってくれたパッケージのインストールが欠かせません。 あなたはどの様にパッケージを追加していますか？ 実は、以前パッケージのインストール記事を書きました。 pub...

blog.dalt.me

2020.10.06

@override
void didChangeAppLifecycleState(AppLifecycleState state) async {
  super.didChangeAppLifecycleState(state);

  if (state != AppLifecycleState.inactive) {
    return;
  }
  
  if (!await FlutterAppBadger.isAppBadgeSupported()) {
    return;
  }
  
  FlutterAppBadger.updateBadgeCount(
    context.read(_appBadgeProvider),
  );

上記メソッドはアプリの状態が変化した時に呼ばれます。

AppLifecyccleStateは

enum AppLifecycleState {
  // アプリ画面が表示されており、ユーザのインプットに反応できる状態
  resumed,

  // ユーザのインプットに反応出来ないが、Flutterのホストビューは動いている状態
  // 認証画面が出ていたり、電話がかかってきたりアップスイッチャーが立ち上がっていたりといった状態
  inactive,

  // アプリ画面は表示されておらず、ユーのインプットに反応もせず、バックグラウンドで動いている状態
  paused,

  // Flutterエンジン上で動いているが、、ホストビューからは切り離されている状態
  detached,
}

の様に定義されています。

今回はアプリがバックグラウンドに行く際に、アイコンにバッジを付けたいので
inactiveのみ監視します。(pausedではない)

次に、「アプリがバッジをサポートしているか」
つまりユーザがプッシュ通知に対して許可をしているかを確認します。

最後に、アプリのバッジ数を更新をします。

ここまでで、機能面の実装は終わりました。

タブにバッジを付けるUI部分を実装していきましょう。

UI

6. お知らせバッジWidget生成

class NotificationBadge extends StatelessWidget {
  const NotificationBadge({
    @required this.badgeCount,
  });
      
  final int badgeCount;
      
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
      decoration: BoxDecoration(
        color: Color.fromRGBO(250, 47, 49, 1.0),
        shape: BoxShape.circle,
      ),
      child: Text(
        badgeCount.toString(),
        style: const TextStyle(
          color: Colors.white,
          fontSize: 10,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

特筆すべきことはありません、バッジ数を取得して赤背景で表示するだけです。

7. タブアイコンWidget生成

enum TabType {
  home,
  notification,
  myPage,
}

extension TabTypeEx on TabType {
  ...
  ...
  /// choose provider for observing
  StateProvider get provider {
    switch (this) {
      case TabType.home:
        return _homeBadgeProvider;
      case TabType.notification:
        return _notificationBadgeProvider;
      case TabType.myPage:
        return _myPageBadgeProvider;
    }
    throw UnimplementedError();
  }  
}

class TabItem extends HookWidget {
  const TabItem(
    this.type, {
    @required this.selected,
  });

  final TabType type;
  final bool selected;

  @override
  Widget build(BuildContext context) {
    final badgeCount = useProvider(type.provider).state;
    final showBadge = 0 < badgeCount;
    return Stack(
      overflow: Overflow.visible,
      children: [
        Icon(type.iconData),
        if (showBadge)
          Positioned(
            top: -7,
            right: -12,
            child: NotificationBadge(badgeCount: badgeCount),
          ),
      ],
    );
  }
}

TabTypeはタブの種類を表すenumです。
extensionを使ってそれぞれのタブに応じたデータを返す様にしています。

肝は

final badgeCount = useProvider(type.provider).state;

の部分。

3の手順で、stateを更新した際にこの TabItemクラスがリビルドされ
バッジ数が更新される様になっています。
そして、バッジ数が0以上の時にバッジが表示されると言う流れです。

ビューの部分に関して少しだけ補足。
NotificationBadgeを右上にはみ出る様に設置しています。
このはみ出た部分も含めて正しく描画するために、Stackにoverflowプロパティを設定しています。

8. BottomNavigationBarの生成

class Sample extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final tabType = useState(TabType.home);
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: tabType.value.index,
        items: TabType.values
            .map(
              (tabType) => BottomNavigationBarItem(
                icon: TabItem(tabType, selected: false),
                activeIcon: TabItem(tabType, selected: true),
                label: tabType.title,
              ),
            )
            .toList(),
        onTap: (value) => tabType.value = TabType.values[value],
      ),
    );
  }
}

今回の内容ではないので詳細は省きますが、
useStateを使うことによって値が更新された時にリビルドされる様にしています。

BottomNavigationBarItemを使って
非アクティブ時、アクティブ時のアイコンをそれぞれTabItemを指定します。

最後に

いかがでしたでしょうか？
記事執筆現在(2020/12/10)ではバッジをriverpodで実装した例は
見当たらないので(僕のググラビリティが低いだけの可能性ありｗ)、
皆様の参考になれば幸いです。

Twitterフォローお願いします

The post 【Flutter】Streamを一切使わず、riverpodで実装する通知バッジ first appeared on 技術は熱いうちに打て！.

概要

週刊Flutterとは？

Updates on Flutter Testing

Updates on Flutter Testing

Updated integration testing that supports Firebase Test Lab on mobile; stand-alone support for web and desktop, too!

medium.com

・Dart側のテストって楽だけど、Flutter側(UI側)のテストは結構辛いものがあった
・今までは flutter_driver パッケージを使ってたけど必要以上に複雑だし、バグが起きた時再現しようにもどう言う状態なのか分からない
・integration_test 1.0をリリースしたよ！🎉
・webとデスクトップは動くけどプレリリース版
・さらにFirebase Test Labにも対応

(拙著)【Flutter】Streamを一切使わず、riverpodで実装する通知バッジ

【Flutter】Streamを一切使わず、riverpodで実装する通知バッジ

この記事は、Flutter #1 Advent Calendarの10日目の記事です。 こんなやつ実装します。 コード量的には200行ほどで出来てしまいます！ (自分でもびっくり) 実際の動作 ...

blog.dalt.me

2020.12.10

・riverpodと通知バッジって相性良い気がするのにどこにも記事がないので記事化した

[RFC] Change on the syntax for listening providers

[RFC] Change on the syntax for listening providers · Issue #246 · rrousselGit/river_pod

Hello! This issue is an open discussion for a potential change on how to consume/combine providers. The goal of these changes are: offer a uniformized way to li...

github.com

・riverpodパッケージにて、Providerの監視方法が変わるかも
・一部コンパイラセーフではなくなる可能性も示唆されている

Cache User Data Securely in Flutter with Hive (NoSQL)

Cache User Data Securely in Flutter with Hive (NoSQL)

Ever came across a situation to store user data (or access tokens) securely in mobile app? Welcome to Hive…

medium.com

・SharedPreferencesではなくHiveを使おう
– セキュリティ面が甘い
– プリミティブ型のみしか保存できない
・HiveならNoSQLベースで読み書き速い、暗号化できる、Dartのみで書かれてるのでプラットフォームに依存しないなどの利点がある
・基本的な使い方の解説

Simple Firebase Login Flow in Flutter, Now Firebase

Simple Firebase Login Flow in Flutter, Now Firebase

Part Two: Adding Firebase along with better error checking

medium.com

Flutter App life Cycle Like a Boss – Learn How to Reuse the Logic

・アプリのライフサイクルには4つある、detached, inacitve, paused, resumed
・これらを監視するにはWidgetsBindingObserverを
・10種類ものメソッドが使える
・アプリの監視をしたければ、MaterialAppをラップしたAppLifecycleManagerなどを作る

Stream/Sinkを使いこなす！ Stream/RxDart初心者のためのBLoC入門 part2

Stream/Sinkを使いこなす！ Stream/RxDart初心者のためのBLoC入門 part2 - Qiita

前回の記事 この記事は以下の記事の続きとなりますが、この記事から読み始めてもOKです。 Stream/RxDart初心者のためのBLoC入門

qiita.com

Hero + PhotoView + GestureDetectorでドラッグアニメーション付き画像ビューア

Hero + PhotoView + GestureDetectorでドラッグアニメーション付き画像ビューア - Qiita

はじめに この記事はCyberAgent Developers #2 Advent Calendar 2018の13日目の記事です。 この記事ではHero animationとPhotoViewというライブラリを使って作る画像ビ...

qiita.com

・PhotoViewと言うライブラリを使って画像をフルスクリーン表示できて且つ指で操作できる画像ビューアを作成

Detecting Objects in Flutter

Detecting Objects in Flutter

Using tflite and SSD-MobileNet

towardsdatascience.com

・Flutterで物体認識の実装
・使うパッケージはimage_picker, tflite, cameraの3つ
・写真だけでなくリアルタイムでも可能

Twitterフォローお願いします

The post 週刊Flutter #5 first appeared on 技術は熱いうちに打て！.

概要

皆さん、ページ間の遷移はどんな方式でやっていますか？

Navigator2.0ですか？
…すごい、僕に教えてください🙇‍♂️笑

え、まだpushNamedを使っている？
僕にもそんな時期がありました。
今日はそんな皆さんにおすすめのルーティング方法をお教えしたいと思います！

pushNamed時代に感じていた問題意識

以前は、pushNamedを使っていましたが、
その時に以下の3つの問題意識を抱えていました。

1. ページの追加が面倒

ページを追加するたびに、routeNameを定義して、
app.dartに移動して、routesに追加して…とやるのが大変億劫でした。

2. ページを表示するのに必須パラメータが何かを覚えていないといけない

引数なしで遷移出来るページもありますが、引数が必要なページもありますよね？
そんな時にそのページに何を渡すか全部覚えてますか？
ページ設計者なら分かるかもしれませんが、新しく入ってきた人に分かりますか？

また、それを引き出す際にModalRouteから引き出す際に暗黙的なキャストが必要です。
もし、渡す側だけ型を変え、受け取り側を変え忘れていれば正しく処理出来なくなります。

3. Navigatorを作った際に、onGenerateRouteで再定義しなければいけない

BottomNavigationBarを用いたアプリで
タブを残したまま遷移したい場合、Navigatorを別途作成する必要があります。
pushNamedを使っていると、各Navigatorで遷移するであろう全てのページを
onGenerateRouteに定義する必要がありますが、これがまた大変です…。

MaterialAppにも設定しているのに、ここでも設定しなければいけないのか…
となりました。

そこで…！
今回紹介するルーティング方法です。

※全コードは下記gistに載せてあります！

僕が全力でお勧めしたいルーティング方法

それがこちらです。

class SampleWithPush extends StatelessWidget {
  static Route<dynamic> route() {
    return MaterialPageRoute<dynamic>(
      builder: (_) => SampleWithPush(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Anything();
  }
}

遷移させる側のコードはこちら。

Navigator.of(context).push<dynamic>(
 SampleWithPush.route(),
)

🎉これだけです！！！🎉
もう、routesへの登録は必要ありません。

作成したページに、staticでRouteを返すメソッドを作成してあげるだけ。
簡単じゃないですか？
これで1. ページの追加が面倒の問題は解消されましたね！

と同時に、pushNamedではなくpushを使うため、
onGenerateRouteも参照されません。
よって、3. Navigatorを作った際に、onGenerateRouteで再定義しなければいけないも解消されました！

引数を付けたルーティングはどうすれば良いの？

class SampleWithArg extends StatelessWidget {
  static Route<dynamic> route({
    @required int someId,
  }) {
    return MaterialPageRoute<dynamic>(
      builder: (_) => SampleWithArg(),
      settings: RouteSettings(arguments: someId),
    );
  }

  @override
  Widget build(BuildContext context) {
    final someId = ModalRoute.of(context).settings.arguments;
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Text(someId.toString()),
        ),
      ),
    );
  }
}

この様にrouteメソッドに引数を付けて定義し、
settingsに渡すだけです。
使う側(主にbuildメソッド)は、いつもの様にModalRoute.of(context).settings.argumentsで取得します。

遷移させる側のコードはこちら。

Navigator.of(context).push<dynamic>(
  SampleWithArg.route(someId: 1),
)

@requiredなため、仮にsomeIdを渡さないと、エラーは出ないまでも警告を出してくれます。
仮に渡さなければいけない引数を忘れていたとしても、警告で教えてくれるので
忘れる心配はほぼ0です。

Navigator.of(context).push<dynamic>(
  SampleWithArg.route(), // warning!
)

これで、2. ページを表示するのに必須パラメータが何かを覚えていないといけないも解消されました！

いかがでしょうか？
しばらくこのルーティングを使っていますが、特に困ったシチュエーションは今のところありません。

よければ使ってみてくださいね！

Twitterフォローお願いします

The post 【Flutter】もうnamedRouteは使わない！僕が全力で勧めたいルーティング方法をサンプル付きで解説してみた first appeared on 技術は熱いうちに打て！.

概要

週刊Flutterとは？

Simple Firebase Login Flow in Flutter, Now Firebase

Simple Firebase Login Flow in Flutter, Now Firebase

Part Two: Adding Firebase along with better error checking

medium.com

【Flutter】もうnamedRouteは使わない！僕が全力で勧めたいルーティング方法をサンプル付きで解説してみた

【Flutter】もうnamedRouteは使わない！僕が全力で勧めたいルーティング方法をサンプル付きで解説してみた

新しく作ったページに遷移させる場合、どうしていますか？ え、まさかまだpushNamedを使っている？ もっと簡単な方法を説明していますので、ぜひご覧ください！

blog.dalt.me

2020.12.15

・namedRouteって結構めんどくないですか？
・各ページに遷移情報を定義することで解決するブログを書いた

Null Safety In Flutter a Simple Guide

Flutter Performance Tips for Fast Apps

7 Reasons Why Building A Startup App in Flutter is Ideal For Your Business

7 Reasons Why Building A Startup App in Flutter is Ideal For Your Business

Thinking of building a startup app in Flutter? Take a calculated look at the pros and cons before you choose Flutter for mobile app development.

www.thirdrocktechkno.com

loading_overlay | pub.dev

loading_overlay | Flutter Package

A modal progress indicator widget that fades in and out. Wrap around another widget to block access to widget during an async call.

pub.dev

Twitterフォローお願いします

The post 週刊Flutter #6 first appeared on 技術は熱いうちに打て！.

概要

週刊Flutterとは？

FlutterをMVVMで実装する

Flutter を MVVM で実装する

この記事は Flutter Architecture Blueprints の解説記事です。 今回は Flutter アプリを MVVM で実装する上でどういう形にしていったかを解説していきたいと思います。

wasabeef.medium.com

・Riverpodを使った基本的なアーキテクチャを紹介したflutter-architecture-blueprintsの
解説記事

Live coding with null safety: DevFest GDG Central Asia

VSCode Tips & Tricks | Flutter | 20 Useful Shortcuts

Flutter(Dart)のエラーハンドリング３選

Flutter(Dart)のエラーハンドリング３選｜shogo yamada｜note

Flutter or Dartとしてエラーハンドリングは調べてみると、主に下記の３つがあって、その３つを紹介します。 １、.catchError((e) => ~~~) ２、try - catchで囲む ３、builderの中で分岐する １、.catchError((e) => ~~~) まず最初に...

note.com

・catchErrorかtry/catchかbuilder分岐か

flutter_sound | pub.dev

flutter_sound | Flutter Package

A complete api for audio playback and recording. Audio player, audio recorder, media player, media recorder, sound player, sound recorder.

pub.dev

・録音や再生などの音声コントロールが出来るパッケージ

Flutterで迷いがちなよくあるUIの作り方/いじり方

・RippleEffectのクロップやグラデーションを施したボタンなどちょっと工夫を凝らしたUIの作り方が紹介されている

同じお題でUIを構築してみてFlutter, JetpackCompose, SwiftUIの三種の宣言的UIフレームワークを比較してみる

同じお題でUIを構築してみてFlutter, JetpackCompose, SwiftUIの三種の宣言的UIフレームワークを比較してみる

zenn.dev

Twitterフォローお願いします

The post 週刊Flutter #7 first appeared on 技術は熱いうちに打て！.

概要

テスト、怖くないですか？
面倒くさくないですか？

分かりますよ。

この記事は、そんなあなたのテストへの恐怖心を取り除くために執筆しました。

こんなの出せたら、かっこいいですよね。
大丈夫です、この記事を読んでいただければ誰でも出せるようになります！

本記事の構成

・ファイルの作り方、お作法
・テストの記述
・テストの単位
・テストの実行
・coverage

大体、この様な構成で書いて行きます。
最短でテストを動かせる様になる事を最優先するため、
基本的な知識をすっ飛ばすこともあるかと思いますが、
その辺は他の記事も参考にしながら勉強してみてください。

Flutterにおけるテストファイルの作り方・お作法

さて、まずはテストファイルを作らないことには始まらないので早速作ってみましょう。

ファイルの作り方

ルート階層に存在している、testフォルダ以下に
テストを記述するファイルを作成します。

基本的に、どんなファイル名でどんな階層でもテストは実行出来ますが。
少しだけお作法があるので守りましょう。
後の自分や仲間を守ることになります。

ファイルを作る際のお作法

ファイル末尾を_test.dartにする

hoge_repository.dartのテストファイル名はhoge_repository_test.dartにしましょう。

test階層以下をlib階層以下と同等にする

lib/hoge/repository/fuga_repository.dartのテストのファイル階層はtest/hoge/repository/fuga_repository_test.dartにしましょう。

Flutterにおけるテストの記述

さて、ファイルを作ったところで早速テストを書いてみましょう。

まず、雛形です。

import 'package:test/test.dart';

void main() {

}

テストファイルは必ず、main関数を持ちます。
この中にテストを記述していきます。

一つ一つのテストの記述

仮に、一つテストを記述してみましょう。

test('variable test', () {
  var sampleValue = 'sample';
  expect(sampleValue, 'sample');
});

割と直感的ですよね？

test(テスト名, () {
  // 前処理
  expect(処理や変数, 処理による結果や変数の期待値);
});

テストの一つ一つはこの様な書式で記述します。

testと言う関数を記述することで、
一つのテストを作る事が出来ます。

そして、この中に

この処理をしたらまたはこの値はこうなってほしい

と言う意味を持つexpect関数を0個以上記述します。
全てが「こうなってほしい」を満たすことによってテストが一つ通った (Passed) と言うことになります。

Flutterにおけるテストの単位

groupを使いこなそう

test('add test', () {
  expect(42 + 42, 84);
});

test('minus test', () {
  expect(42 - 42, 0);
}):

以上2つのテストがあるとします。
問題なく、通りそうですね。
これで終わりでも良いんですが、この2つ良くみてみると両方とも
整数値に対する処理を行っていますよね？

こう言う場合は、group関数を使ってまとめる事が出来ます。

group('integer test', () {
  test('add test', () {
    expect(42 + 42, 84);
  });
  test('minus test', () {
    expect(42 - 42, 0);
  });
});

記述式はtestと一緒で第一引数に名前、第二引数に実行するテストです。

groupによるメリット？

group化をすることにより、実行結果を以下の様に見やすくする事が出来ます。

この場合、まだ数が少ないのでメリットを感じにくいかもしれませんが
数が多くなってくるとより顕著になってきます。

Flutterにおけるテストの実行

それでは、ここまで書けたところでテストを実行してみましょう。

import 'package:test/test.dart';

void main() {
  group('integer test', () {
    test('add test', () {
      expect(42 + 42, 84);
    });
    test('minus test', () {
      expect(1 / 0, double.infinity);
    });
  });
}

コマンドによる実行

全テスト実行

$flutter test
00:03 +2: All tests passed! 

指定ファイルのみの実行

$flutter test [test_file_name]
00:02 +2: All tests passed! 

指定したテストのみの実行

$flutter test --plain-name 'test_name' [test_file_name]

例えば

$flutter test --plain-name 'minus test' test/widget_test.dart
00:01 +1: All tests passed!  

coverage

coverageとは？

テストについて調べていると、テストカバレッジやcoverageなんて
言葉が目に入ってくると思います。
これは、全プログラムの実行フローに対してどこまでテストによって保証されているかを示す率です。

ちょっと具体例を出してみましょう。

int add(int a, int b) {
  return a + b;
}

test('add test', () {
  expect(add(1, 2), 3);
});

この場合、coverageは100%となります。

では、以下の場合はどうでしょう？

int divide(int numerator, int denominator) {
  if (denominator != 0) {
    return numerator / denominator;
  } else {
    return double.nan;
  }
}

test('divide test', () {
  expect(divide(4, 2), 2);
});

この場合、coverageは50%となります。
なんとなく分かりましたか？
else文の方の処理を通らないので、2個のうち1つだけがテストで保証されている状態、
つまり50%となります。

coverageの出し方

では、Flutterでどうやってこのcoverageを出すのでしょうか？

$flutter test --coverage

と、実行したいテストに--coverageを付け足してあげるだけです。

ですが、これを実行すると

coverage/lcov.infoと言う何やら怪しいファイルが生成されるだけです。
しかも、中を見ても良く分からない…。

でも安心してください。
ここまで来ればもうちょっとで、最初に示した表が出せるのでもう一踏ん張りです！

coverageの可視化

lcovのインストール

このファイルを解析するための、ツールを一つ下記コマンドでインストールします。

$brew install lcov

これが終わり次第、以下を実行してみてください。

$genhtml coverage/lcov.info -o coverage/result

こちらが実行終わりましたら、-oで指定したフォルダが
生成されているはずです。

この中にあるindex.htmlをブラウザで表示すると
最初に示した表が表示されるはずです！

いかがでしたでしょうか？
テストへの恐怖心が少しでも減ってくれれば嬉しいです！

また、ここ分からなかったよ！とかがあれば気楽に@daiki1003まで
リプライお待ちしております！

Twitterフォローお願いします

The post 【Flutter】大丈夫、テストは怖くないよ first appeared on 技術は熱いうちに打て！.

概要

週刊Flutterとは？

🛠テスト

そろそろテストを書いていかなければなと思ったので下記記事を参考にしました。
他にも何個か読みましたが、Flutterのテスト初心者はこの3つを読めばとりあえずはOKかなと。

Flutterの3種類のソースコードテスト(Unit Test, Widget Test, Integration Test)についてのまとめ

Flutterの3種類のソースコードテスト(Unit Test, Widget Test, Integration Test)についてのまとめ - Qiita

この記事は全部俺 Advent Calendar 2018の12日目の記事です。 Flutterテストの種類について ソースコードで記載するFlutterのテストには、以下のように3種類のテストがあります。 Unit Testが...

qiita.com

Flutter のテストをちゃんと書いてみる　〜ユニットテスト編〜

Flutter のテストをちゃんと書いてみる　〜ユニットテスト編〜 - Qiita

Flutter アプリ開発を初めてはや半年近く、正直に言ってテストコードなんて1行も書けていなかったので、ある程度アプリ開発の流れがわかったこのタイミングでちゃんと調べてみました。 Flutterのテストについて調べた | @yuj...

qiita.com

【Flutter】大丈夫、テストは怖くないよ

【Flutter】大丈夫、テストは怖くないよ

テスト、怖くないですか？ 面倒くさくないですか？ 分かりますよ。 この記事は、そんなあなたのテストへの恐怖心を取り除くために執筆しました。 こんなの出せたら、かっこいいですよね。 大丈夫です、この記事を...

blog.dalt.me

2020.12.31

・そして自分でも記事を執筆！

Gap

wasabeefさんのflutter-blueprints-architectureを見ていた中で、Gapと言うのが出てきたので何か調べてみた。

gap | pub.dev

gap | Flutter Package

Flutter widgets for easily adding gaps inside Flex widgets such as Columns and Rows or scrolling views.

pub.dev

Gap: A simple example to create your own RenderObject

Gap: A simple example to create your own RenderObject

I love how Flutter is designed. The combination of immutables objects, the Widgets and mutables ones called RenderObjects is very powerful…

romain-rastel.medium.com

⚠️Error Handling

一旦通信が成功するベースでアプリを完成させ、さてそろそろエラーハンドリングもしていかなきゃなと
思っていた中で見つけた記事。
APIに関するエラーだけをハンドリングするなら前半2つだけで良い。
もっとアプリ全体のエラーハンドリングをするなら最後の一つも読んだ方が良さそう。

【Flutter】dio + freezed でAPIレスポンスをResultで受け取る

【Flutter】dio + freezed でAPIレスポンスをResultで受け取る

zenn.dev

Handling Network Calls and Exceptions in Flutter

Handling Network Calls and Exceptions in Flutter

In this article I will show you how you can handle network calls and exceptions using dio, flutter_bl...

dev.to

Handling Flutter errors with Catcher

Handling Flutter errors with Catcher

Handling errors is everyday programmer job. This job is done infinite times in daily work. In Dart we can handle it easily with try-catch…

medium.com

Error retrieving thread information関係

どなたか #Flutter 開発中に

[VERBOSE-2:profiler_metrics_ios.mm(184)] Error retrieving thread information: (ipc/send) invalid destination port

が大量に出てデバッグ実行が止まってしまうと言う問題を解決した方はいらっしゃいませんか？🤔 pic.twitter.com/c26fHLF8HB

— ashdik(朝日)@Flutter,Wine,BoardGameエンジニア (@daiki1003) January 4, 2021

M1 MacbookProでこれに悩んでいたので、調べた。

Getting “Error retrieving thread information: (ipc/send) invalid destination port” in the logs on Apple Silicon M1

Getting "Error retrieving thread information: (ipc/send) invalid destination port" in the logs on Apple Silicon M1 · Issue #71395 · flutter/flutter

When compiling the counter app I receive the following error every ~200 ms: Error retrieving thread information: (ipc/send) invalid destination p...

github.com

🧩その他

Robertさんいいですねー。

Flutter Short BUT Gold’s

Flutter Short BUT Gold’s

Sometimes, big steps aren’t that big; actually, you should think just simple, and it will come to your hands at last.

medium.com

The Ultimate Flutter Setup 2021

20+ Error Screens for Flutter App

・おしゃれなUIのエラー画面がコード付きで解説されている

https://github.com/flutter/flutter/issues/71395

Twitterフォローお願いします

The post 週刊Flutter #8 first appeared on 技術は熱いうちに打て！.

riverpod/flutter_hooks関連

flutter_hooksやBuildContextについて詳しく説明してくれています。
どちらも興味深く読ませていただきました。
FlutterHooksとかは、出来る事が多い一方一部の機能だけ使って満足してしまいがちです。
こうやって実装を奥深くまで探ることで、バグを減らせたり自分なりの使い方を見つけたり出来そうなので
良いですね！

Inside Fluter Hooks

Inside Flutter Hooks - Qiita

概要 Flutter Hooksを使う機会があり、すごい便利だなと思っていたのですが、 内部的にどんな風に実装されているのか掘り下げてみようかと思い、今回色々調べてみました。 (何か間違っていたりしたらコメントいただけると嬉しい...

qiita.com

FlutterのBuildContextとは何か

FlutterのBuildContextとは何か - Qiita

Flutterで実装していると割と最初の方に疑問が出てくるのが、BuildContextだと思います。 これは、何も考えずにSnackbarを出そうとしたら、エラーになるので、ほとんどの人はここでつまずくと思います。 Widgetは...

qiita.com

Error handling

Flutter Tutorial – Dio Connectivity Retry Interceptor

Social Network for Programmers and Developers

Morioh is the place to create a Great Personal Brand, connect with Developers around the World and Grow your Career!

morioh.com

packages

Page 1 | Top packages

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs.

pub.dev

を眺めていて、面白そうなパッケージを紹介します。

carousel_slider

carousel_slider | Flutter Package

A carousel slider widget, support infinite scroll and custom child widget.

pub.dev

double_back_to_close_app

flutter_material_showcase | Flutter Package

Material Design components showcase for Flutter apps. Use this package to check your ThemeData against most Material widgets.

pub.dev

flutter_material_showcase

double_back_to_close_app | Flutter Package

A Flutter package that allows Android users to press the back-button twice to close the app.

pub.dev

その他

Flutter — 5 little things to know — Part 0

Flutter — 5 little things to know — Part 0

Some Interesting things to know about flutter/dart

nonybrighto.medium.com

SALOON BOOKING APP with Flutter (Parte One)

この動画内にある下で紹介しているアプリ集を買うか迷い中…🤔

Prokit – Biggest Flutter UI Kit

上記動画で紹介されているUIコード集。4000円くらい。
ただ、Flutter1.xとなっているので結構古そう？

Prokit - Biggest Flutter UI Kit

  Latest Release (Version 19.0 – 26 Dec 2020) Added in Integration – File Picker Added in Integration – Image Picker Added in Integration – Video Picker A...

codecanyon.net

flutter build iosの難読化に失敗する

flutter build iosの難読化に失敗する - Qiita

コメントで教えていただきました。 こちらの方法で難読化してください。 @shinriyo さんありがとうございます！ 上記の方法...

qiita.com