
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- トグルボタン(ToggleButtons)の基本的な実装方法
- トグルボタン内のテキストサイズを動的に変更する方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
トグルボタン(ToggleButtons)の基本実装
概要
トグルボタンは、ユーザーが複数のオプションの中から一つ以上を選択できるウィジェットです。ここでは、基本的なトグルボタンの実装方法を解説します。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ToggleButtonExample(),
);
}
}
class ToggleButtonExample extends StatefulWidget {
@override
_ToggleButtonExampleState createState() => _ToggleButtonExampleState();
}
class _ToggleButtonExampleState extends State<ToggleButtonExample> {
List<bool> isSelected = [false, false, false];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('トグルボタンのデモ'),
),
body: Center(
child: ToggleButtons(
children: <Widget>[
Text('赤'),
Text('青'),
Text('黄'),
],
onPressed: (int index) {
setState(() {
isSelected[index] = !isSelected[index];
});
},
isSelected: isSelected,
),
),
);
}
}
サンプルコードの解説
- 3行目: アプリケーションのエントリーポイントを定義し、
MyApp
クラスを呼び出します。 - 5-12行目: アプリケーションのルートウィジェットとして
MaterialApp
を定義し、ToggleButtonExample
をホーム画面として設定します。 - 14-17行目:
ToggleButtonExample
ウィジェットを定義し、トグルボタンの状態を管理するためのステートフルウィジェットを作成します。 - 20行目: トグルボタンの選択状態を管理するためのブール型リスト
isSelected
を定義します。初期状態ではすべてfalse
です。 - 29-41行目:
ToggleButtons
ウィジェットを使用してトグルボタンを作成します。children
プロパティには表示するテキストウィジェットのリストを、onPressed
プロパティにはボタンが押された時の処理を、isSelected
プロパティには各ボタンの選択状態を表すブール型リストをそれぞれ指定します。
動作確認



それでは、動作を確認してみましょ〜


ウィジェットを横幅いっぱいに広げたり、割合表示する方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。


トグルボタン(ToggleButtons)でテキストのサイズを変更する
概要
次に、トグルボタンを使用して画面に表示される文字列のサイズを変更する方法を解説します。ユーザーが「文字サイズ10」「文字サイズ20」「文字サイズ30」のいずれかのボタンを選択すると、テキストのサイズが変わる実装を行います。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TextSizeToggleButton(),
);
}
}
class TextSizeToggleButton extends StatefulWidget {
@override
_TextSizeToggleButtonState createState() => _TextSizeToggleButtonState();
}
class _TextSizeToggleButtonState extends State<TextSizeToggleButton> {
List<bool> isSelected = [true, false, false];
double textSize = 10.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('テキストサイズ変更デモ'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ToggleButtons(
children: <Widget>[
Text('文字サイズ10'),
Text('文字サイズ20'),
Text('文字サイズ30'),
],
onPressed: (int index) {
setState(() {
for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {
if (buttonIndex == index) {
isSelected[buttonIndex] = true;
textSize = (buttonIndex + 1) * 10.0;
} else {
isSelected[buttonIndex] = false;
}
}
});
},
isSelected: isSelected,
),
SizedBox(height: 20),
Text(
'サンプルテキスト',
style: TextStyle(fontSize: textSize),
),
],
),
),
);
}
}
サンプルコードの解説
- 33-52行目:
ToggleButtons
ウィジェットを作成し、ボタンが押された時にtextSize
変数の値を更新する処理を実装します。選択されたボタンに応じて、textSize
の値を10、20、または30に設定します。 - 53行目:
SizedBox
を使用して、トグルボタンとテキストの間に間隔を設けます。 - 54-57行目:
Text
ウィジェットを使用してサンプルテキストを表示し、textSize
変数を使用してそのフォントサイズを動的に変更します。
動作確認



それでは、動作を確認してみましょ〜


画像ボタンにご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。


まとめ
いかがでしたでしょうか?今回は、トグルボタン(ToggleButtons)の基本実装からトグルボタン押下にてテキストのサイズを変更する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!



自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント