はじめに Flutterでドラッグ＆ドロップで入れ替え可能なリストを作成する場合、ReorderableListViewが非常に便利です。単に並び替えだけではなく、特定の項目を選択した際に動的な変化を与えることで、よりアトラクティブなUIを実現したくなりました。しかし、ReorderableListView内のitemBuilderをいじるだけでは実現できませんでした。そこで、リスト内のWidge […]
対象者 FlutterでのUIデザインを向上させたいエンジニア Squircleの概念と実装方法を知りたいデザイナー・開発者 アプリのデザインをよりモダンで柔らかい印象にしたい方 はじめに 皆さんは「Squircle（スクワークル）」という形をご存知でしょうか？これは四角形と円の中間に位置する形で、最近のモダンなUIデザインでよく見かけるようになりました。特にFlutterでアプリ開発を行う際、デ […]
対象者 FlutterでAutocompleteウィジェットを深く理解したい方 カスタマイズされた入力フォームを作成したい開発者 ユーザー体験を向上させるためのサジェスト機能に興味があるエンジニア はじめに 以前、FlutterのAutocompleteウィジェットについてブログを書きました。改めて使ってみると、つまずく点がありました。特に、サジェストリストの消し方や、送信ボタンを押したときの挙動 […]
はじめに Flutterを使用してアプリを開発する際、リスト表示は非常によく使われるUI要素の一つです。特に、チャットアプリやSNSのタイムラインのように、新しいデータや過去のデータを動的にロードする必要がある場合、ListViewをどのように実装するかが重要になります。本記事では、新しいデータと古いデータを動的にロードできるListViewの実装方法について解説します。 目的 新しいデータのロー […]
対象者 Flutterで中級レベルのUI操作や状態管理を学びたい方 TabBarのカスタマイズや表示切り替えを実装したい方 Flutterのアニメーションやタブの管理に関する具体的な実装例を探している方 はじめに Flutterを使ったアプリ開発では、TabBarによる画面の切り替えはよく利用される機能の一つです。しかし、特定の条件下でTabBarを表示・非表示にする必要がある場合、その制御が少し […]
対象者 Flutterを使用しているモバイルアプリ開発者 タイピング風アニメーションの実装やカスタマイズに興味がある方 アプリのUI/UXを向上させたいと考えているエンジニア はじめに アプリのユーザー体験を一歩先に進めたいと考えたことはありませんか？特に、ユーザーが自然に引き込まれるようなインタラクティブな要素を取り入れたいと感じたことがある開発者の皆さん、タイピング風アニメーションはその答えの […]
対象者 Flutterを使用してモバイルアプリを開発している開発者 ユーザーエクスペリエンスの向上を目指しているエンジニア 動的なUIコンポーネントの実装方法を学びたいプログラマー はじめに アプリケーションのユーザーエクスペリエンスを向上させるためには、動的なDrawerの実装が有効です。 静的なドロワーでは、あらかじめ決められた内容しか表示できず、ユーザーの操作や状態に応じたカスタマイズができ […]
対象者 Flutterを使用している中級開発者 キーボードの表示・非表示の切り換えを検知する方法を知りたい方 はじめに モバイルアプリケーションの開発において、ユーザーがテキスト入力を行う際にキーボードの表示・非表示を検知することは、UIの最適化やアプリの挙動を改善するために非常に重要です。今回は、Flutterを使用してキーボードの状態を捕捉する方法について説明します。 キーボードの有無で画面レ […]
対象者 Flutterの基本的な知識を持っている方 モバイルアプリ開発に興味がある方 デザイン性の高いUIを作成したいと考えている方 はじめに モバイルアプリ開発に携わっていると、ユーザーインターフェース（UI）のデザインに工夫を凝らすことが重要だと感じる瞬間が多々あるでしょう。特に、Instagramのような視覚的に魅力的なデザインを取り入れたいと考えることはありませんか？そんなときに役立つのが […]
対象者 FlutterにおけるUI開発に興味があり、具体的なアニメーション技術を学びたい開発者 ユーザーエンゲージメントを向上させるためにアプリの視覚的な要素を改善したいプロジェクトリーダーやデザイナー 効果的なテキスト表示方法を探求しており、新しいUIパターンの実装に挑戦したい中級から上級のプログラマー はじめに AppBarのtitleが非常に長く、通常の表示では一行に収まらない場合、どのよう […]