CATEGORY

Flutter

【日本語版】【Flutter】Widget of the Week – #50 AnimatedOpacity【要約】

動画 要約 AnimatedOpacityを使うことで簡単にOpacityのアニメーションを実現できる。 使い方は簡単でwidgetをAnimatedOpacityでラップして、アニメーションの長さをdurationに指定するだけ 内容 widgetの透過性、見え方を変えたいときは、AnimatedOpacity widgetを使いましょう。 AnimatedOpacityを使うことで、例えば、選 […]

【日本語版】【Flutter】Widget of the Week – #49 Stack【要約】

動画 要約 Stackを使えば、ColumnやRowの中でwidgetを自由自在に配置できる。 指定したルールで規則的に配置することができる。 Positionedで個別に位置を数値で指定することもできる。 内容 ColumnやRowのレイアウトの制限に苦労していませんか? Stack widgetを使うことで自由自在にwidgetを配置することができるようになります。 Stackはwidgetの […]

【日本語版】【Flutter】Widget of the Week – #48 ConstrainedBox【要約】

動画 要約 ConstrainedBoxを使うと、widgetに対して、幅と高さに対して、最大値、最小値を指定することができる。 例えば、Text widgetの場合、ConstrainedBoxで指定した幅を超える場合は自動で次の行に折り返す。 内容 Widgetのサイズ調整の方法はいろいろありますが、ConstrainedBoxもその一つです。 ConstrainedBoxは子widgetの高 […]

【日本語版】【Flutter】Widget of the Week – #47 Semantics【要約】

動画 要約 スクリーンリーダーや検索エンジンなどのセマンティクスに情報を伝えるためのwidgetがSemantics disableやhintなど、widgetの50を超えるプロパティを設定することができる 内容 ご存知の通り、FlutterはUIの見た目や振る舞いを指定できるwidgetが数多く用意されています。 しかし、それ以外の目的を持つwidgetもあります。 Semanticsはwidg […]

【日本語版】【Flutter】Widget of the Week – #46 IndexedStack【要約】

動画 要約 複数のwidgetの表示を切り替える場合、IndexedStackを使うとシンプルに実装できる 表示するwidgetをchildrenに渡し、indexで表示するwidgetを指定する 表示するwidgetを切り替える場合は、setState等でindexの値を変えるだけでいい 内容 ユーザーがwidgetの表示を切り替えられるようにする場合、IndexedStackが使えるかもしれま […]

【日本語版】【Flutter】Widget of the Week – #45 AnimatedPadding【要約】

動画 要約 AnimatedPaddingを使えば、Paddingの変化をアニメーション付きで表現できる 使い方はwidgetをAnimatedPaddingでラップして、padding, duration, curveを与えるだけ 内容 Paddingはwidget間にスペースを作ることができる便利なwidgetです。 では、このPaddingのスペースをアニメーション付きで変化させたい場合はど […]

【Flutter】SafeArea サンプルコード【入門】

SafeAreaを使うことで、デバイスの形によってアプリのコンテンツが見切れたりするのを防いでくれます。レイアウトの調整はSafeAreaがやってくれます。 今回はSafeAreaを使っていないパターンと使ったパターン、それぞれ紹介します。  動作イメージ SafeAreaを使っていないダメなパターン   SafeAreaを使ったパターン   サンプルコード SafeAreaを使っていないダメなパ […]

【日本語版】【Flutter】Widget of the Week – #43 AnimatedSwitcher【要約】

動画 要約 AnimatedSwitcherを使えば、widgetの切り替えをアニメーション付きでできる アニメーションの種類も自由に選べる 内容 AnimatedSwitcherを使えば、複数のwidgetの表示をアニメーション付きで切り替えることができます。  まず最初に表示するwidgetをAnimatedSwicherの子widgetに設定します。さらにトランジションの長さも設定します。  […]

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

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