このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

【Flutter】CheckboxListTileのチェックボックスをカスタマイズ

Flutter

2022.10.01

この記事は最終更新日から1年以上が経過しています。

どもです。

突然ですが、皆さん Flutter 扱っているでしょうか?

私、存在もずっと前から知っていてクロスプラットフォーム開発は「Flutter」だろう。

とずっと思ってはいましたが、以前からサンプルアプリ開発など触ってはいましたが、またしばらく扱わなくなりました。

で、先日、Flutter 3.0がリリースされ、MacOSやLinuxアプリも作成できるようになり、更に最強感増してきております。

PCのGUIアプリを作成する機会があって、いままでは「Flutter」の選択肢(スマホのみビルドだったので)はなかったのですが、今後は「Flutter」の選択できるとのことで、久々扱かったのですが、やっぱ最高ですね。

もう「Flutter」一択で、Flutter沼にハマってしまいそうな勢い。

 

Flutter」自身、世界的にも注目度も高まっており、国内でも以前と比べると導入する企業も増えており、今後も使われる機会が増えていき、将来性も高いと思っております。

しかしながら出来ることも多く、用意されているWidgetも多く、マテリアルデザインと縁のない方は覚えるのも困難だったりしますよね。

てわけで、今回はCheckboxListTileのチェックボックスのカスタマイズになります。

 

CheckboxListTile

CheckboxListTileは、CheckboxとListTileが合体したWidget。

ということで、便利ですが、カスタマイズが難しそうな印象。

今回、以下の様な如何にもPC用として使う ToDo APP制作のUIで使用してみることにしました。

そう、デフォルトのCheckboxはこの様な感じで「如何にも」のチェックボックスとなっています。

で、上記の様に円形のデザインに変更していくのですが、Checkbox自体のカスタマイズはそれなりにありますが、CheckboxListTileのチェックボックスにカスタマイズに関する日本語の記事も少なく、

stackoverflowにぶち当たりました。

ここでは、テーマをオーバライドする方法が記されていますが、

final theme = Theme.of(context);
final oldCheckboxTheme = theme.checkboxTheme;
final newCheckBoxTheme = oldCheckboxTheme.copyWith( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100)), );

チェックボックスの円形だけが適応されなかったので上記の形でオーバライドさせたのですが、

ふと、CheckboxListTileの実装みると、

this.shape,
this.checkboxShape,

と、shapeはCheckboxListTile自体(多分)で、checkboxShapeとCheckbox用のshapeが用意されていたのに気が付きました。(気づけよと)

いやぁ、公式ドキュメントちゃんと読まないとですね。

activeColor: Colors.black.withOpacity(0),
checkboxShape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10)),
    side: BorderSide(
        color: Color.fromRGBO(217, 217, 217, 1),
        width: 2.0,
),

で、背景透過で、ボーダー太め(色も変更)、チェックマークはデザインの方の色が気に入らなかったので実装を白っぽい方へと。

ほぼ完璧。

と、思いきや、

チェック後のactiveColor設定すると、チェック後の枠線もなくなってしまう。。。

指定できるプロパティもなさげ。。

これは、厳しいのか。。

と、できないか調べていますが、無理っぽいのでこれで行こうか考え中。

ToDoAPPのgithhubレポジトリ

今年残りは「Flutter」をガンガン扱っていこうかな。ともう今日このごろでした。

ではでは。

またまたぁ。

 

 

Comment

Related Article

Flutter – Flameでゲーム作成 (キャラクターの移動)

2023.07.23

Flutterで作る ChatGPT Prompt Manager

2023.07.12

【Flutter】CheckboxListTileのチェックボックスをカスタマイズ

2022.10.01

CATEGORY LIST

LATEST NEWS

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

mac

2024.10.16

Z80エミュレータ- EMUZ80の組み立て

電子工作

2024.10.13

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US