Flutter - SwitchListTile - DRY code

Question

Complete newbie, so bear with me. Just a question on how I could refactor my code using the DRY principle. I'm sure it can be done on such a simple example so here goes.... My code below shows three 'switchListTiles'. I've managed to work out how to create 3 switchListTiles on top of one another, and also how to get them to turn on/off individually. Its just that this means I'm creating the following function 3 times:

bool _value3 = false;

void _onChanged3(bool value3) {
    setState(() {
      _value3 = value3;
    });
  }

I'm sure there is a way I could change this so I don't have the same code three times. Any help would be greatly appreciated Many thanks in advance

    import 'package:flutter/material.dart';

    void main() {
      runApp(new MaterialApp(
        title: "Switch Widget Demo",
        home: new MyApp(),
      ));
    }

    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> {

      bool _value = false;

      void _onChanged(bool value) {
        setState(() {
          _value = value;
        });
      }

      bool _value2 = false;

      void _onChanged2(bool value2) {
        setState(() {
          _value2 = value2;
        });
      }

      bool _value3 = false;

      void _onChanged3(bool value3) {
        setState(() {
          _value3 = value3;
        });
      }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Switch Demo"),
        backgroundColor: Colors.redAccent,
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.all(32.0),
        child: Column(
          children: <Widget>[

            Switch(value: _value,
              onChanged: (bool value) {_onChanged(value);}),
            SwitchListTile(value: _value,
              title: Text("Click Me"),
              activeColor: Colors.red,
              secondary: Icon(Icons.home),
              subtitle: Text("For my small print"),
              onChanged: (bool value) {_onChanged(value);}),

            SwitchListTile(value: _value2,
                title: Text("Click Me Again Please"),
                activeColor: Colors.lightGreen,
                secondary: Icon(Icons.perm_identity),
                onChanged: (bool value2) {_onChanged2(value2);}),

            SwitchListTile(value: _value3,
                title: Text("And Again Please"),
                activeColor: Colors.blueGrey,
                subtitle: Text("Some more small print"),
                secondary: Icon(Icons.person),
                onChanged: (bool value) {_onChanged3(value);}),


          ],
        ),
      ),
    );
  }
}

Answer 1

You just need to refactor the SwitchListTiles into its separate class, then make List<SwitchListTiles> in the parent widget.

Here I create 20 of them with lesser code:

class MySwitchListTilesContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[800],
      body: ListView(
        children: List.generate(20, (i)=>MySwitchListTile(

        )),
      ),
    );
  }
}
class MySwitchListTile extends StatefulWidget {

  @override
  _MySwitchListTileState createState() => new _MySwitchListTileState();
}

class _MySwitchListTileState extends State<MySwitchListTile> {
  bool _v = false;
  @override
  Widget build(BuildContext context) {
    return  SwitchListTile(
      value:_v,
      onChanged: (value)=>setState((){
        _v=value;
      }),

    );
  }
}