チェックボックスとラジオボタンは似ていますね。
でも1つだけしか選んでほしくない時はラジオボタンが便利です。
チェックボタン(Checkbox)
- 機能: 複数の選択肢の中から、複数個を選択することができます。
- 見た目: 通常、四角いボックスで表示され、選択するとチェックマーク(✓)が表示されます。
ラジオボタン(Radio Button)
- 機能: 複数の選択肢の中から、必ずどれか1つだけを選択することができます。
- 見た目: 通常、丸いボタンで表示され、選択すると中央に点が表示されます。
なので「クレジットカード」「銀行振込」「コンビニ払い」など、複数の選択肢から1つを選ぶ場合は
ラジオボタンは便利です!
目次
FlutterFlowのラジオボタンについて
FlutterFlow以前のバージョンでは「Value」というフィールドが明示的に存在していましたが、最新のバージョンでは仕様が変更されています。
スクリーンショットの画面では、「Define Options」 の各オプションに直接入力するテキストが、Label
と Value
の両方を兼ねる形になっています。
つまり、Option 1
に入力されている「クレジットカード」という文字列が、ユーザーに表示されるラベルであると同時に、選択された際に取得される値となります。
もし、表示されるラベルと取得する値を別にしたい場合は、Value
フィールドの代わりに、以下のような方法で設定できます。
1. オプションのテキストをそのまま値として利用する
Option 1
に「クレジットカード」と入力。Option 2
に「銀行振込」と入力。- この場合、ユーザーは「クレジットカード」と「銀行振込」という選択肢を見ます。
選択された場合、取得される値もそれぞれ「クレジットカード」「銀行振込」になります。
2. プロパティのバインド(変数を利用)して値を設定する
静的なオプションを設定している場合は、Initial Option
に設定している変数が、あらかじめ選択されているラジオボタンを決定する値として使われます。この変数には、Option 1
のテキスト「銀行振込」やOption 2
のテキスト「銀行振込」のいずれかをセットすることで、初期値を指定できます。
この時「クレジットカード」と「銀行振込」は手打ちでOKです。