マガジン
ひとりアドベントカレンダー Flutter編 2018
nbht
- 13本
メジャーリリースに向けて最後の追い込みに入ってそうなFlutter。(← 12/4にリリースされました） 公開したFlutter製のアプリを例題にして、開発過程を段階的に公開していきます。 一記事/日を基本にしますが、都合により遅れたり先走っての公開になるかもしれません。
記事一覧
タブでのカテゴリ分け -ひとりアドベントカレンダー Flutter編 2018 その12-
MaterialIconは数が豊富で良いのですが、フラットなままで見ると数が多すぎて少し見づらいです。
ということで、12日目はアイコンをタブでカテゴリ分けしてみます。
昨日までの内容と今後については目次を参照してください。
ところで、JSONデータを処理するときに利用したAPIにはカテゴリ情報がついていました。
今回はそのカテゴリ情報を元にしてタブに分割表示してみます。
いつもどおりGit
下スワイプでの画面クローズ -ひとりアドベントカレンダー Flutter編 2018 その11-
最近のスマートフォンは大画面化がすすみ上部の戻るボタンまで指が届かず、テンポよく操作しにくくなってきています。
ということで、11日目は閉じるボタンを押さずとも下スワイプで画面を閉じてみます。
昨日までの内容と今後については目次を参照してください。
今回も先日使ったGestureDetectorを利用します。
いつもどおりGitHubのプロジェクトにChapter11ブランチでアップしてますの
Heroでの画像アニメーション -ひとりアドベントカレンダー Flutter編 2018 その10-
画面遷移で拡大表示は出来ましたが、ただ遷移させただけではMaterialDesign特有の華やかさというか遊び心がすこし足りない感じです。
ということで、10日目は画面遷移の際にアニメーションを加えてみます。
昨日までの内容と今後については目次を参照してください。
アニメーションを加えるというと、絵心もセンスもない人はそれだけで難しそうと敬遠してしまいがちです。
ですが、Flutterはアニメ
タップして個別に拡大表示 -ひとりアドベントカレンダー Flutter編 2018 その9-
マテリアルアイコンを一覧表示という目的はほぼ達成しましたが、ときには個別に拡大してみたくなるときもあります。
ということで、9日目はタップで画面遷移させて拡大表示させてみます。
昨日までの内容と今後については目次を参照してください。
画面を遷移させるには、「遷移先の画面を作成」「遷移させるアクションの作成」という2つの対応が当然ながら必要です。
今回もGitHubのプロジェクトにChapte
MediaQueryを利用してサイズ調整 -ひとりアドベントカレンダー Flutter編 2018 その8-
単にスマートフォンと言っても画面サイズは多種多様にあるので、端末によってはアイコンが大きすぎたり小さすぎたりしてしまって見づらい可能性があります。
ということで、8日目はデバイスのサイズを取得し、どの端末でもほぼ同じ大きさになるように自動計算させてみます。
昨日までの内容と今後については目次を参照してください。
今回は簡単な題材なので、内容も簡単にいってみたいと思います。
Flutterには
モデル化させてMとVを分離 -ひとりアドベントカレンダー Flutter編 2018 その7-
Flutterではロジック部分もUI部分もDartで書くことが出来ることがメリットなのですが、ロジックとUIが混じってしまうと見通しが非常に悪くなり保守性が低くなります。
ということで、7日目は前回のコードをリファクタリングしてモデル化させてみます。
昨日までの内容と今後については目次を参照してください。
リファクタリングしてモデル化といっても、FlutterだからとかDartだからとか特別な
FutureBuilderを使って非同期にデータ表示 -ひとりアドベントカレンダー Flutter編 2018 その6-
最近のアプリは外部APIやクラウドデータを利用することが多いと思います。そんなとき同期処理をしててはUIにロックが掛かってしまいますので、非同期で処理をする必要があります。
ということで、6日目はFutureBuilderを使ったWidgetの非同期組み立てをやってみます。
昨日までの内容と今後については目次を参照してください。
FutureBuilderを利用する前にFlutter(Dart
HTTPでJSON取得 -ひとりアドベントカレンダー Flutter編 2018 その5-
今どきのアプリであればHTTPでのデータ取得は必須な処理だと思います。そのなかでも、今やJSONでのやり取りはスタンダードになっています。
ということで、5日目はHTTPでJSONを取得してみたいと思います。
昨日までの内容と今後については目次を参照してください。
前回は正規表現を使ってベタなテキストデータを処理してアイコンの一覧を作る準備をしました。しかしアイコンは1,000種類近くもあるた
正規表現でテキスト処理 -ひとりアドベントカレンダー Flutter編 2018 その4-
最近は専用のAPI経由でフォーマット済みのデータを取得して使用することが多くなりましたが、それでもまだまだベタなテキストを処理する機会は存在します。そんなテキスト処理のときに力を発揮するのが正規表現。もちろんDartでも使えます。
ということで、4日目は正規表現を使ってみたいと思います。
昨日までの内容と今後については目次を参照してください。
マテリアルアイコンを一覧表示させるためには、一覧表
SafeAreaで表示エリアを確保 -ひとりアドベントカレンダー Flutter編 2018 その3-
ノッチに邪魔されずコンテツを表示させるのは結構面倒だったりします。が、FlutterであればSafeAreaというWidgetが標準で用意されていますので、簡単に対応させることができます。
ということで、第3日目はSafeAreaを使ってみたいと思います。
昨日までの内容と今後については目次を参照してください。
iPhoneXで登場したノッチ（正式名はセンサーハウジング）、今年は全てのモデルに
Padding（またはMargin）だけが目的でContainerを使うのは間違ってる（というか分かりづらい） -Flutter-
この記事は Flutter Advent Calendar 2018 向けの記事です。
・レイアウト調整の目的でPadding付きのContainerでラップすると分かりづらくない？
・調整用のカスタムWidgetを作って挟み込むと良いのでは？
・「コードが短くなる」「ネストは深くならない」というメリットも！
高レベルなネタが多そうな中、こんな感じで背伸びせず軽い感じでいってみたいと思います。
Cardでコンテンツをカード表示 -ひとりアドベントカレンダー Flutter編 2018 その2-
グリッド表示ではカードスタイルが見やすく、カードスタイルはグリッド表示にしたくなるという、CardとGridは相性抜群です。
ということで、2日目はCardを使ってみたいと思います。
昨日までの内容と今後については目次を参照してください。
さてFlutterでのCardですが、一つの記事にするにはあまりにもシンプルすぎます。childは必須として、実際に使うとしたらcolorとmarginくら
GridViewでコンテンツを一覧表示 -ひとりアドベントカレンダー Flutter編 2018 その1-
iPhoneが登場したあとはスマートフォンでの一覧表示といえばリスト表示というのが一般的でしたが、コンテンツの主役ががテキストからイメージに変わってきたこともありグリッド表示というのも一般的になってきました。
ということで、第一回目はGridVIewを使ってみたいと思います。
明日以降の予定は目次を参照してください。
さて、FlutterでのGridViewですが、利用方法が5つ用意されていま
ひとりアドベントカレンダー Flutter編 2018 ～目次～
Flutterいいですよね。慣れちゃうとSwiftさえも触りたくなくなっちゃいます。
年内にリリースされれば今以上に熱くなることは確実(12/4にリリースされました）なので、先にビッグウェーブに乗る感じで24回に分けて記事を投稿しておこうと思います。
題材は公開したての「Material Icons Viewer」です。ぶっちゃけマテリアルアイコンを一覧表示するだけのアプリですが、そこそこ機能