アイマナ - ITを学ぼう

あなたの生活にITの便利さを届ける

【日本語版】【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を使っていないダメなパ […]

VSCodeにおけるPrettierとESLint(TSLint)の理解

背景 こんにちは、Naoyaです。Angularを採用したプロジェクトで、VSCodeにてTypeScriptを用いて開発することになり、フォーマッタ等を調べ、環境を作りました。しかし思ったより複雑で分かりづらかったため、自分の理解も兼ねて記事にしました。 対象読者 そもそもLintとかフォーマッタとかPrettierがよく分かってない、各々の言葉の次元が怪しい人 VSCodeにてTypeScri […]

【Flutter入門】Text widget 使い方あれこれ【サンプルコード】

様々な使い方ができるText widgetですが、毎回使い方を調べるのが面倒くさい。 今回は、Text widgetの使い方を一通りまとめました!  一番シンプルな使い方 ◆ イメージ ◆ ソースコード 文字の色を変えたい – color ◆ イメージ ◆ ソースコード 背景の色を変えたい – backgroundColor ◆ イメージ ◆ ソースコード 文字の大きさを変 […]

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

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