チェックボックス

CheckBox

チェックボックスはOnとOffの切り替えを行うことができます。
色の変更や、ListTileを使ったレイアウトなどがあるので、色々試してみてください。

CheckBox

「CheckBox」はWebページでおなじみのチェックボックスと同じものを作成することができます。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Form',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form'),
        ),
        body: Center(
          child: ChangeForm(),
        ),
      ),
    );
  }
}

class ChangeForm extends StatefulWidget {
  @override
  _ChangeFormState createState() => _ChangeFormState();
}

class _ChangeFormState extends State<ChangeForm> {

  bool _flag = false;

  void _handleCheckbox(bool e) {
    setState(() {
      _flag = e;
    });
  }

  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(50.0),
      child: Column(
        children: <Widget>[
          Center(
            child: new Icon(
              Icons.thumb_up,
              color: _flag ? Colors.orange[700] : Colors.grey[500],
              size: 100.0,
            ),
          ),
          new Checkbox(
            activeColor: Colors.blue,
            value: _flag,
            onChanged: _handleCheckbox,
          ),
        ],
      )
    );
  }
}
CheckBox

このように、On、Offを切り替える時に利用します。

  • valueはチェックボックスの値です。
  • activeColorはチェックがOnになっている時の見た目です。
  • onChangedはチェックボックスの値が変更された時に動作します。

CheckboxListTile

「CheckboxListTile」は「ListTile」の一種で、標準的なレイアウトを提供してくれます。

  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          new CheckboxListTile(
            activeColor: Colors.blue,
            title: Text('チェックボックス'),
            subtitle: Text('チェックボックスのサブタイトル'),
            secondary: new Icon(
              Icons.thumb_up,
              color: _flag ? Colors.orange[700] : Colors.grey[500],
            ),
            controlAffinity: ListTileControlAffinity.leading,
            value: _flag,
            onChanged: _handleCheckbox,
          ),
        ],
      )
    );
  }
CheckboxListTile

このように、綺麗なレイアウトが可能です。

  • titleはチェックボックスのタイトル
  • subtitleはチェックボックスのサブタイトル
  • secondaryはアイコンなどをつけたい場合に利用してください。
  • controlAffinityではチェックボックスの配置を変更できます。
    ListTileControlAffinity.leadingは先頭にチェックボックスを持ってきます。
    ListTileControlAffinity.trailingは末尾にチェックボックスを持ってきます。
    ListTileControlAffinity.platformは実行しているプラットフォームに対して一般的な配置にチェックボックスを持ってきます。