単一選択時の基本的な UI、ラジオボタン

ラジオボタンはその名の通り Radio ウィジェットです。 ラベル付きのラジオボタンは RadioListTile です。

チェックボックスとスイッチ」の時にもいいましたが、「ナントカ・リストタイル」は「ラベル付きナントカ」です。 ここではラベル付きのラジオ (ウィジェット) なので、ラジオリストタイル です。

ラジオボタンは、選択肢が複数あって、そのうちに1つだけ選ぶような場合に使います。

このように3つの選択肢がある場合は、次のようにします。

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: MyApp(),
      ),
    );

enum Fruits { Apple, Orange, Grape }

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  var _radVal = Fruits.Apple;

  void _onChanged(Fruits value) {
    setState(() {
      _radVal = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radio Test'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            RadioListTile(
                title: Text('Orange'),
                value: Fruits.Orange,
                groupValue: _radVal,
                onChanged: _onChanged),
            RadioListTile(
                title: Text('Apple'),
                value: Fruits.Apple,
                groupValue: _radVal,
                onChanged: _onChanged),
            RadioListTile(
                title: Text('Grape'),
                value: Fruits.Grape,
                groupValue: _radVal,
                onChanged: _onChanged),
          ],
        ),
      ),
    );
  }
}

ラジオボタンの選択が変わった時に onChanged ハンドラがコールバックされ、 そのときに value プロパティにセットした値がハンドラに渡されます。

ここまでお読みいただき、誠にありがとうございます。SNS 等でこの記事をシェアしていただけますと、大変励みになります。どうぞよろしくお願いします。

© 2024 Flutter 入門