【日本語版】【Flutter】Widget of the Week – #41 RichText【要約】

動画 要約 widgetのスタイルを細かくデザインしたい場合はRichTextを使おう 文字列内で文字ごとに複数のフォントやサイズを使うこともできる 内容 アプリの情報伝達に文字は欠かせません。文字のスタイルやデザインはとても重要です。 必要な機能の多くはText widgetに揃っています。Text widgetはテキストのサイズやフォント、スタイルなどを自由に変えることができます。 しかし、R […]

【日本語版】【Flutter】Widget of the Week – #42 ReorderableListView【要約】

動画 要約 ReorderableListViewを使うとリストのアイテムの順番をユーザーが変えることができるようになる ユーザーはリストのアイテムを長押しすることでアイテムを掴むことができ、ドラッグしてドロップすることで好きな位置に変えることができる 内容 Flutterで何かを作ったことがある方であれば、ListView widgetを使ったことがあるでしょう。ListViewではアイテムの表 […]

【日本語版】【Flutter】Widget of the Week – #40 Placeholder【要約】

動画 要約 widgetのビルド中に真っ白な画面をユーザーに見せないようにしたり、ビルド前後でレイアウトがガタつくのを防ぐために、予めPlaceholderを表示しておくという方法がある。 Placeholderを表示するための一番お手軽な方法がPlaceholder widgetを使うこと シンプルな実装で簡単にPlaceholderを表示させることができる 内容 widgetをビルドしている間 […]

【日本語版】【Flutter】Widget of the Week – #39 LimitedBox【要約】

動画 要約 Containerのように親に指定されたサイズになるwidgetはListViewなど子供のサイズを制限しないwidgetにそのまま入れるとうまく動かない そんなときはContainerをLimitedBoxでラップして、Containerにデフォルトサイズを与えるとうまく表示される 内容 Containerなどの一部のwidgetは、親によって定義された制約に従ってサイズを設定します […]

【日本語版】【Flutter】Widget of the Week – #38 AspectRatio【要約】

動画 要約 AspectRatioを使うことでwidgetのアスペクト比を一定に保つことができる 内容 アプリのレイアウトを設計しているとき、アスペクト比が気になることは多いでしょう。 実際のサイズは変わったとしてもアスペクト比は保ちたい、ということはよくあります。 Flutterでは、AspectRatio widgetを使うことでwidgetのアスペクト比を一定に保つことができます。 使い方は […]

【日本語版】【Flutter】Widget of the Week – #37 AnimatedIcon【要約】

動画 要約 Flutterはアニメーションが組み込まれたアイコンも提供している 使い方は簡単でforward関数(再生)かreverse関数(逆再生)を呼び出すだけ 内容 Flutterはアニメーション付きのアイコンも提供しています。  AnimatedIcon 一覧 (動きまでわかるページがまだないです。。追って作ります。) 使い方は、まずAnimatedIcon widgetに表示したいアニメ […]

【日本語版】【Flutter】Widget of the Week – #36 InheritedWidget【要約】

動画 要約 子widgetから親widgetのデータを参照したい場合、InheritedWidgetを使おう わざわざ子widgetにデータを渡さなくても、子widgetから直接親widgetのデータにアクセスできるようになる。 内容 あるwidgetから別のwidgetにデータを渡すのはときに面倒です。  InheritedWidgetがその悩みを解消します。 InheritedWidgetを使 […]

【日本語版】【Flutter】Widget of the Week – #35 Spacer【要約】

動画 要約 RowやColumnにはchildrenの間隔を制御するmainAxisAlignmentプロパティが用意されており、均等な間隔であれば指定できる もし均等ではなく、自由にカスタマイズしたいのであればSpacerを使おう Spacerを使えば、複雑なレイアウトでも簡単に実現できる。 内容 Row widgetとColumn widgetは、mainAxisAlignmentを指定するこ […]

【日本語版】【Flutter】Widget of the Week – #34 MediaQuery【要約】

動画 要約 MediaQueryを使えば、実行中デバイスの様々な情報を取得できる 開発者はその情報をもとに、最適なレイアウトを切り替えられる 取得できる情報は、画面のサイズ、デバイスの向き、文字サイズ設定、アニメーション制限の設定、明るさの設定等 内容 もしあなたが作っているアプリがスマートフォンとタブレット、両方での利用を想定している場合、あなたは画面のサイズに応じた別々のUIレイアウトを考えな […]