CATEGORY

Widget

  • 2023年4月4日
  • 2023年4月4日

【Flutter】ExpansionTileで開閉可能なリスト項目を作成

この記事では、FlutterのExpansionTileを初心者にもわかりやすく解説。効果的な使い方や実例を紹介しながら、アプリ開発の効率向上につながる情報を提供します。さあ、あなたのFlutter開発も次のステップへ！

  • 2023年3月28日
  • 2023年3月28日

【Flutter】お洒落なTextFormFieldを作る

対象者 Flutterを学び始めた初心者 フォームデザインに興味がある方 簡単なフォームの作り方を知りたい方 お洒落なUIを作りたい開発者 はじめに この記事では、Flutterを使ってお洒落なTextFormFieldを作成する方法を説明します。 簡単なフォーム検証を行うアプリの一部で、入力が必須のテキストフィールドを含みます。入力がある場合は「検証成功!」と表示し、そうでない場合は「検証失敗! […]

  • 2023年3月26日
  • 2023年3月26日

【Flutter】お洒落なTextFieldを作成

対象者 Flutterを学び始めた初心者 テキスト入力のUIをカスタマイズしたい開発者 ユーザビリティを向上させるためのテキストフィールドデザインに興味がある方 はじめに この記事では、FlutterでおしゃれなTextFieldを作成する方法を説明します。この例では、左側に虫眼鏡アイコン、右側にソートアイコンを持つTextFieldを作成し、ヒントテキストと角丸の境界線を追加します。 実施するソ […]

  • 2023年3月1日
  • 2023年3月1日

【Flutter】Row内に上寄せと下寄せにしたいWidgetが両方ある

対象者 FlutterでRow内で、上寄せと下寄せにしたい項目がある場合 はじめに LINEのメッセージが表示されている画面をFlutterでも再現しようとした。しかし、同じRowの中で上揃えと下揃えになっている項目があったため、どのようにするのか分からなかった。 ListViewの中にRowがあるため、Expanded(child:Container())を使ってTextを寄せようとすると、エラ […]

  • 2022年5月14日
  • 2022年5月14日

【Flutter】画面一杯に背景画像を表示する

要件 スマホアプリの背景に画像を使いたい 画面が縦でも横でも、背景一杯に画像を出したい。 Widgetはスマホのノッチ（切り込み）に被らないようにしたい。 実装 解説 背景とメインコンテンツのレイヤーを作成する Stackを使って、背景とメインコンテンツを重ねる child: Stack( children: [ Container( 画像を表示する BoxFit.coverで、画面が縦でも横でも […]

  • 2022年4月12日
  • 2022年4月14日

[Flutter]丸いWidgetを作る

Flutterを書いていて、丸いWidgetがよく必要になるので、書き方を記録しておきます。 押さないWidget CircleAvatarを使用する 色々な例 押すWidget ElevatedButtonにCircleBorderを適応させる

  • 2022年3月18日
  • 2022年3月18日

[Flutter] ListTileの設定。メニュー付

Flutterで一覧を作成するときには、ListTileを使用します。ListTileのサンプルはたくさん見つかります。ただ、メニューも含めてコピペできるソースがなかったので、作成しました。 コピペ用のソース 解説 画像がほぼ全てですが、、、 title: タイルのメインのコンテンツ。情報の名前など。 subtitle: タイルのサブのコンテンツ。情報の補足説明など。 leading: タイルの先 […]