いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- トグルボタン(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プロパティには各ボタンの選択状態を表すブール型リストをそれぞれ指定します。
動作確認
いちのそれでは、動作を確認してみましょ〜
ウィジェットを横幅いっぱいに広げたり、割合表示する方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
あわせて読みたい
【Flutter】横幅いっぱいに表示する方法から横幅を割合表示する方法まで解説！
こんばんは〜弊社ブログに辿り着いていただきありがとうございます！株式会社メモリアインクのいちのです この記事を読んでわかること Flutterでウィジェットを画面いっ…
トグルボタン(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変数を使用してそのフォントサイズを動的に変更します。
動作確認
いちのそれでは、動作を確認してみましょ〜
画像ボタンにご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
あわせて読みたい
【Flutter】画像ボタンをInkWellウィジェットを使って簡単に作成！サイズ変更までの完全ガイド！
こんばんは〜弊社ブログに辿り着いていただきありがとうございます！株式会社メモリアインクのいちのです この記事を読んでわかること FlutterでInkWellウィジェットを…
まとめ
いかがでしたでしょうか？今回は、トグルボタン(ToggleButtons)の基本実装からトグルボタン押下にてテキストのサイズを変更する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！
いちの自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
コメント