はてなブックマーク

この記事はFlutter 全部俺 Advent Calendar 14日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 FlutterからAndroid/iOSのAPIにアクセスする FlutterはUIの描画こそ自前で完結させることができますが、ハードウェアの情報へのアクセスや ネイティブでしか提供されていないSDKの利用など、どうしてもネイティブのAPIにアクセスする必要があることもあります。 FlutterではPlatformChannelという仕組みを使って、ネイティブのAPIにアクセスすることができます。 以下の公式ドキュメントの 図がわかりやすいです。 Dartとネイティブ側で、チャ

先日κeen@blackenedgoldさんのこちらのブログを読んで、 自分もプログラミング言語について考えていることを書いてみたいと思ったので久しぶりに更新します。 https://keens.github.io/blog/2021/01/04/future_of_proguramming_languages/ 半年ほど前からプログラミング言語を作ってみたいと思っていて、 言語デザインを考える過程で色々な言語を触っているので、それを元にプログラミング言語のごく近い未来を予測してみたいと思います。 基本的には元記事の内容に概ね賛成です。 あまり型レベルプログラミングを突き詰めてしまうと抽象度が増して初心者にとっての参入障壁になってしまわないか心配ですが それもうまく隠蔽されながら進化していくんだと思います。 次にこんな言語がくるぞ！というよりもこうあってほしいという願望に近いので、そのつも

単体テスト 一般的にはFlutterSDKを必要とせず、プレーンなDartのみで動くUIと切り離されたテストです。 APIの呼び出しなどの通信はモックしてテストを行います。 Widgetテスト FlutterのWidgetを仮想的に操作しながら行うテストです。Widget版の単体テストで、 あるWidgetが正しく動くかを保証するために行います。 統合テスト アプリ全体が意図した通りに動くことを確認するためのテストです。コマンドラインで完結する他のテストと違い 実際にエミュレーターなどでアプリを立ち上げて行います。 あらかじめ定義しておいたテストスクリプトに合わせて、 仮想的に任意のWidgetをクリックしたり表示されている文字列をテストしたりすることで、より網羅的で統合的な テストを行うことができます。 人の手で行うデバッグをできるだけ自動化しようとするものです。 どのテストをどれだけ行

この記事はFlutter 全部俺 Advent Calendar 12日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 FlutterのThemeとはなにか Flutterは、アプリに統一的なデザインスタイルを提供するために、Themeクラスを提供しています。 Themeを適切に使えば、最小限のコストでアプリのデザインを変更したり、ダークモードに対応したりできます。 Theme の基本的な使い方 Themeは基本的にMaterialAppとのセットで使います。MaterialAppのtheme: に指定したThemeDataが アプリ全体に適用されます。 ... return MaterialA

最近自分の周りでFlutterを始める人が多く、ありがたいことにFlutterに関する質問を個人的にもらうことが増えてきましたが、 特にその中でもアプリ全体の設計をどうするべきかのについてよく聞かれます。 2019年の12月に書いたアドベントカレンダーの中でBloc,Redux,MobXの3つのアーキテクチャを紹介しましたが、 現在は、それらを使わずにアプリ設計をしています。 Flutterのアプリ設計(Bloc) https://itome.team/blog/2019/12/flutter-advent-calendar-day21/ Flutterのアプリ設計(Redux) https://itome.team/blog/2019/12/flutter-advent-calendar-day22/ Flutterのアプリ設計(Mobx) https://itome.team/blog

この記事はFlutter 全部俺 Advent Calendar 10日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 Flutterの画面遷移 FlutterではすべてがWidgetなので画面もまたWidgetで、画面内の他のWidgetと明確な区別はありません。 Route というWidgetが一画面を表していて、 Navigator によって表示する Route を切り替えることによって画面遷移が実現されています。 使い方 内部の実装を詳しく紹介する前に基本的な使い方をみていきましょう。 ほとんどの場合 MaterialApp が持っている Navigator を使って画面遷移します。 N

この記事はFlutter 全部俺 Advent Calendar 9日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 BoxConstraintsとは Flutterをでアプリのレイアウトを実装しているときに、Widgetのサイズを指定することは意外なほど少ないと思います。 これはFlutterのWidgetのサイズが、 BoxConstraints という制約ロジックによってほとんど自動的に決まっているからです。 このおかげで、Android/iOSのネイティブアプリのように明示的にサイズを指定しなくてよくなる一方で、 理解できていないと思わぬ落とし穴にはまることもあります。 Constrai

この記事はFlutter 全部俺 Advent Calendar 3日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 Dartについて DartはGoogleがJavascriptの持っている根本的な問題を解決するために作った言語です。 もともとは完全にJavascriptを置き換える目的で、専用のDartVM上で動く言語として作られていました。 “We have decided not to integrate the Dart VM into Chrome.” http://news.dartlang.org/2015/03/dart-for-entire-web.html しかし、結果的に

この記事はFlutter 全部俺 Advent Calendar 6 日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的に Flutter の公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼は Twitter にお願いします。 BuildContext とは何か Flutter を使っていると避けて通れない BuildContext ですが、抽象的な概念なので、なんとなく使ってしまっている人も多いと思います。 BuildContext が現れる箇所として、代表的なものは StatelessWidget の build メソッドの仮引数 StatefulWidget の State の build メソッドの仮引数 Theme.of(context) や Scaffold.of(context)

この記事は([Flutter 全部俺 Advent Calendar])(https://adventar.org/calendars/4140) 19日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 アプリの国際化 アプリの国際化とは、OSの設定に合わせて表示言語を変えられるようにすることで、多言語の人が使えるようにすることです。 flutter_localizations Flutter単体では国際化に対応していないので、flutter_localizationsというパッケージを使って国際化します。 Localizedクラスを用意する クラス名は何でもいいですが、最終的にLocalized

この記事はFlutter 全部俺 Advent Calendar 7日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 Providerパッケージ 6日目の記事で 紹介した InheritedWidget のラッパーライブラリです。 今回のアドベントカレンダーで唯一標準パッケージでないパッケージの紹介ですが、状態管理とDIに関してデファクトスタンダードと言えるライブラリなのでピックアップしました。 インストール方法 pubspec.yaml に以下を追加して、 $ flutter pub get

この記事はFlutter 全部俺 Advent Calendar 25日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 Flutter for Web アドベントカレンダー最終日となる今日は、Android/iOSに次ぐ新しい対応プラットフォームであるWebについてです。 Flutter for WebはFlutterのv1と同時に発表され(そのときはHummingbirdというコードネームで呼ばれていました)、 2019年のGoogle I/OでFlutter for webとしてパブリックプレビューとなりました。 Hummingbird時代は別レポジトリとして進められていましたが、Flutt

この記事はFlutter 全部俺 Advent Calendar 8日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にFlutterの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はTwitterにお願いします。 Flutterアプリのパフォーマンス FlutterはGPUを使った描画とさまざまな最適化による差分更新によって、宣言的なレイアウトでありながら高いパフォーマンスを実現しています。 最適化の多くはフレームワークが行ってくれますが、アプリ開発者が気を付けることで、より安定したパフォーマンスと高いユーザー体験をもったアプリを作ることができます。 この記事では、そのようなFlutterアプリのパフォーマンスチューニングのテクニックを紹介します。 なお、本記事で高いパフォーマンスとは、描