いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- Flutterでチェックボックスを作成する基本的な方法
- チェックボックスの色のカスタマイズ方法
- チェックボックスの形状とサイズを変更する方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
Flutterでのチェックボックスの作成
概要
Flutterでチェックボックスを作成する最も基本的な方法は、Checkboxウィジェットを使用することです。以下のサンプルコードは、シンプルなチェックボックスを画面に表示する方法を示しています。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Checkbox Demo'),
),
body: MyHomePage(),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isChecked = false;
@override
Widget build(BuildContext context) {
return Center(
child: Checkbox(
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
),
);
}
}サンプルコードの解説
- 1行目: Flutterのmaterialデザインライブラリをインポートします。
- 3行目: アプリのエントリーポイントを定義します。
- 5-17行目:
MyAppクラスは、アプリケーションのルートウィジェットを定義します。 - 19-22行目:
MyHomePageクラスは、状態を持つウィジェット（StatefulWidget）で、チェックボックスの状態を管理します。 - 25行目: チェックボックスの現在の状態（チェックされているかどうか）を保持するブール変数を定義します。
- 28-39行目:
buildメソッド内でCheckboxウィジェットを使用して、チェックボックスをUIに追加します。 - 32-36行目:
onChangedコールバックは、チェックボックスがタップされたときに呼び出され、チェックボックスの状態を更新します。
動作確認
いちのそれでは、動作を確認してみましょ〜
チェックボックスの色のカスタマイズ
概要
チェックボックスの色をカスタマイズするには、CheckboxウィジェットのactiveColorとcheckColorプロパティを使用します。以下のサンプルコードは、チェックボックスの色をカスタマイズする方法を示しています。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Checkbox Color Demo'),
),
body: MyHomePage(),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isChecked = false;
@override
Widget build(BuildContext context) {
return Center(
child: Checkbox(
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
activeColor: Colors.green, // チェックボックスが選択されたときの色
checkColor: Colors.white, // チェックマークの色
),
);
}
}サンプルコードの解説
- 37行目:
activeColorプロパティを使用して、チェックボックスが選択されたときの色を緑色に設定します。 - 38行目:
checkColorプロパティを使用して、チェックマークの色を白色に設定します。
動作確認
いちのそれでは、動作を確認してみましょ〜
チェックボックスの形状とサイズの変更
概要
チェックボックスの形状とサイズを変更するには、CheckboxウィジェットをTransform.scaleウィジェットでラップしてサイズを調整し、shapeプロパティで形状をカスタマイズします。以下のサンプルコードでは、チェックボックスのサイズを大きくし、角を丸くしています。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Checkbox Shape and Size Demo'),
),
body: MyHomePage(),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isChecked = false;
@override
Widget build(BuildContext context) {
return Center(
child: Transform.scale(
scale: 1.5, // チェックボックスのサイズを大きくする
child: Checkbox(
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
activeColor: Colors.blue,
checkColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5), // チェックボックスの角を丸くする
),
),
),
);
}
}サンプルコードの解説
- 31行目:
Transform.scaleウィジェットを使用して、チェックボックスのサイズを1.5倍に拡大します。 - 41-42行目:
shapeプロパティにRoundedRectangleBorderを設定し、チェックボックスの角を丸くします。
動作確認
いちのそれでは、動作を確認してみましょ〜
まとめ
いかがでしたでしょうか？今回は、チェックボックス(checkbox)の作成から色・形状・サイズ変更する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！
いちの自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
コメント