さそり
ListViewウィジェットに余白を設定するときの違い
はじめに Flutterにて、ListViewウィジェットを使用する際に、余白を設定する位置によって表示が変わりました。この記事では、余白の設定の位置によって、どのような表示になるのかまとめます。 余白を設定する位置について ListViewウェジェットの親にPaddingウィジェットを配置する ListViewウィジェットの親にPaddingウィジェットを配置すると、ListViewウィジェットの外側に余白が設定されることになります。 これは、スクロール可能領域の外側に余白ができるため、スクロール可能領 ...
Dartのオプショナル型の使い方
Dart言語のNull Safetyは、コードの信頼性を向上させ、実行時のエラーを最小限に抑えるための強力なツールです。この中で重要な概念の一つがオプショナル型であり、null許容性を表現します。そして、これに関連する重要な操作がオプショナル型のアンラップです。 オプショナル型の導入 Dart 2.12以降では、デフォルトでNull Safetyが有効になっています。オプショナル型を使用すると、変数がnullかもしれないことを示すことができます。 String? nullableString = "Hel ...
Freezedを使用したイミュータブルなクラスの作成方法
Flutter開発では、イミュータブルなデータクラスを作成することがよくあります。これにより、不変性が保たれ、予測可能で安全なコードを書くことができます。Freezedは、Flutterアプリケーションで簡単にイミュータブルなデータクラスを生成するための有名なパッケージの一つです。この記事では、Freezedの基本的な使い方について説明します。 Freezedとは？ Freezedは、コード生成パッケージであり、Dart言語でイミュータブルなデータクラスを作成するのに役立ちます。これにより、手動で無駄なコ ...
【Flutter】Widgetをまたぐタップイベントを検知する方法
背景 以下動画のような部品を作成したいことがありました。 当初は、GestureDetectorで実現できるかと思っていましたが、「GestureDetectorを使用する際の問題点」の章に記載する問題が発覚し、困りました。 GestureDetectorを使用する際の問題点 Flutterをある程度実装したことがある方なら使ったことがあると思いますが、タッチ関係のイベントを処理する際は、GestureDetectorを使用します。今回もGestureDetectorのonPanStart,onPanUp ...
【HTML/CSS】リストの最初の要素のみデザインを変更
横並びの要素の内、一番左以外にmarginをつけたい このような場合に、リストの最初の要素のみmargin:0を適用したいと考えます。 .navigation li:first-child{ margin: 0; } このようにすれば、liの初めのものだけにmargin:0を適用できます。
【HTML/CSS】画像のはみ出しを防ぎたい
画像がはみ出す 以下、画像のように親の要素サイズに画像が収まらない場合があります。 対策 cssにて親の要素に以下の設定を行います。 overflow:hidden; 対策結果 以下画像のように、親要素の範囲のみ画像が表示されるようになりました。真っ青だけど・・・。
CSSでの背景画像設定がうまくできない
はじめに HTMLにてWebページを作成する際に、背景画像を設定することはよくあります。今回、画像ファイルのパス指定にてハマったので対応をまとめます。 画像のパスを指定しているのに画像が表示されない 以下のようなCSSを作成して画像ファイルを指定していました。しかし、サイトを表示しても画像が表示されません。 background-image: "imgae/Logo@2x.png"; 修正方法 CSSにてパスやURLを指定する時には、url()関数を使用する必要があるようです。 background-im ...
【随時更新】HTMLのheadでよく使う項目まとめ
はじめに Webサイト製作を行なっていく上で、headによく使用する項目を記載していきます。 headとは HTMLのhead部分は、実際には表示されない部分となります。この部分にはタイトルやCSSのリンク、メタデータ(文字エンコード等)の情報を設定します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test title</title> </head& ...
【Flutter】SingleChildScrollViewとTextFieldを組み合わせたときのバグ？対策
背景 入力フォームの画面にて、キーボードを開いた際に下にあるTextFieldが隠れてしまったので、キーボードを開いた際にスクロールさせるようにしたいと考えました。よって、SingleChildScrollViewを入れることで対応しようと思ったのですが、ここでFlutterのバグ？らしい挙動を発見しました。 バグ？らしき挙動について TextFieldに入力した際に、バリデートにてエラーになるとTextFieldのdecorationにエラーメッセージを表示する仕様でした。 キーボードを開いてスクロール ...
Chromeでローカルファイルリンクを開きたい時
初めに Chromeでローカルファイルのリンクを開きたい時がありました。 実現できないか調査した結果をまとめたので、参考にしていただければと思います。 ローカルファイルリンク有効化拡張機能 以下の拡張機能を追加すれば、file://から始まるリンクを開くことができるようでした。https://chrome.google.com/webstore/detail/enable-local-file-links/nikfmfgobenbhmocjaaboihbeocackld?hl=ja ただ、開くのはブラウザ ...