動画 要約 Containerのように親に指定されたサイズになるwidgetはListViewなど子供のサイズを制限しないwidgetにそのまま入れるとうまく動かない そんなときはContainerをLimitedBoxでラップして、Containerにデフォルトサイズを与えるとうまく表示される 内容 Containerなどの一部のwidgetは、親によって定義された制約に従ってサイズを設定します […]
動画 要約 AspectRatioを使うことでwidgetのアスペクト比を一定に保つことができる 内容 アプリのレイアウトを設計しているとき、アスペクト比が気になることは多いでしょう。 実際のサイズは変わったとしてもアスペクト比は保ちたい、ということはよくあります。 Flutterでは、AspectRatio widgetを使うことでwidgetのアスペクト比を一定に保つことができます。 使い方は […]
動画 要約 Flutterはアニメーションが組み込まれたアイコンも提供している 使い方は簡単でforward関数（再生）かreverse関数（逆再生）を呼び出すだけ 内容 Flutterはアニメーション付きのアイコンも提供しています。 AnimatedIcon 一覧 （動きまでわかるページがまだないです。。追って作ります。） 使い方は、まずAnimatedIcon widgetに表示したいアニメ […]
動画 要約 子widgetから親widgetのデータを参照したい場合、InheritedWidgetを使おう わざわざ子widgetにデータを渡さなくても、子widgetから直接親widgetのデータにアクセスできるようになる。 内容 あるwidgetから別のwidgetにデータを渡すのはときに面倒です。 InheritedWidgetがその悩みを解消します。 InheritedWidgetを使 […]
動画 要約 RowやColumnにはchildrenの間隔を制御するmainAxisAlignmentプロパティが用意されており、均等な間隔であれば指定できる もし均等ではなく、自由にカスタマイズしたいのであればSpacerを使おう Spacerを使えば、複雑なレイアウトでも簡単に実現できる。 内容 Row widgetとColumn widgetは、mainAxisAlignmentを指定するこ […]
動画 要約 MediaQueryを使えば、実行中デバイスの様々な情報を取得できる 開発者はその情報をもとに、最適なレイアウトを切り替えられる 取得できる情報は、画面のサイズ、デバイスの向き、文字サイズ設定、アニメーション制限の設定、明るさの設定等 内容 もしあなたが作っているアプリがスマートフォンとタブレット、両方での利用を想定している場合、あなたは画面のサイズに応じた別々のUIレイアウトを考えな […]
動画 要約 与えられたサイズに応じて柔軟にwidgetのサイズを変えたい場合はFlexible widgetを使おう flex値を指定することで、widget毎の幅を調整することもできる。（3つのwidgetを2:3:1の幅で配置するなど） fitプロパティを使うことで、スペースだけ確保してそのスペースの中で自由にwidgetの幅を指定することもできる。 内容 widgetのサイズが固定の場合、w […]
動画 要約 リストの行がアニメーション無しに増えたり減ったりすると、ユーザーから見て何が起きたのかわかりにくい AnimatedListを使えば、行の追加削除がアニメーションで表現されるためわかりやすい 内容 動的に変化するリストは多くのアプリ開発で必要になります。 リストのアイテムは常に追加、削除、変更される可能性がありますが、その際、アニメーション無しでリストの内容が変化するとユーザーに混乱を […]
動画 要約 widgetをユーザーにドラッグさせたい場合はDraggable widgetを使おう ドラッグ先はDragTarget widget で実装できる ドロップ可否の判定やドラッグ後の再ビルドなど、様々な関数が用意されている 内容 モバイルアプリには様々なUIパターンがあります。ドラッグもその１つです。 例えば、e-mailアドレスを他のコンポーネントに移したり、ドキュメントを他のフォル […]
今回は #30 ValueListenableBuilderについてです。 動画 要約 １つの値をアプリの各所から参照している場合、値に変更があると複数箇所で再ビルドしなければならず、とても大変 そんなときはValueListenableBuilderを使おう 値が変更された場合、ValueListenableBuilderにその変更が通知され、自動で再ビルドしてくれる 内容 アプリの様々な場所 […]