title: How can I build a List in flutter with selectable items that allows me to switch screen
body: <p>I'm new on Flutter so please don't go hard on me! I'm trying to understand how to build screens and navigate back and forth through them bringing values to other screens during navigation.</p>
  <p>I wanna build this screen:</p>
  <p><a href="https://i.stack.imgur.com/Johlb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Johlb.png" alt="enter image description here" /></a></p>
  <p><strong>Inside lib, I created a models folder which contains the file cats.dart</strong></p>
  <pre><code>enum Cat {
    black,
    white
  }
  
  extension CatExtension on Cat {
  
    String get name {
      switch (this) {
        case Cat.black:
          return 'Mr Black Cat';
        case Cat.white:
          return 'Ms White Cat';
        default:
          return null;
      }
    }
  }
  </code></pre>
  <p>I thought it would be a good idea to separate the code creating two other folders inside lib which are</p>
  <ul>
  <li>lib/screens</li>
  <li>lib/widgets</li>
  </ul>
  <p>so i created a <strong>select_item.dart</strong> inside screens and <strong>cats_items.dart</strong> inside widgets in order to import the widget where needed.</p>
  <p><strong>cats_items.dart</strong></p>
  <pre><code>class CatsItemsListWidget extends StatelessWidget {
  
    final cat = Cat.white; // I get null error if I don't do like that
  
    @override
    Widget build(BuildContext context) {
      return Card(
        margin: EdgeInsets.fromLTRB(31, 24, 30, 88),
        shadowColor: Color(0xFFEDEDEF),
        shape: RoundedRectangleBorder(
            side: new BorderSide(color: Color(0xFFEDEDEF)),
            borderRadius: BorderRadius.circular(10.0)),
        child: ListView(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          physics: ScrollPhysics(),
          children: [ 
            ListTile(
              title: Padding(
                  padding: EdgeInsets.fromLTRB(0, 20, 0, 4),
                  child: Text('Name:',
              subtitle: Padding(
                  padding: EdgeInsets.fromLTRB(0, 4, 0, 16),
                  child: Text(
                    cat.displayValue,
                  )),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  <p><strong>select_item.dart</strong></p>
  <pre><code>class SelectItem extends StatelessWidget {
    SelectItem();
  
    @override
    Widget build(BuildContext context) {
      final appBarHeight = MediaQuery.of(context).size.height * 0.10;
      return Scaffold(
        appBar: AppBar(
          toolbarHeight: appBarHeight,
          automaticallyImplyLeading: false,
          //title: ,
          elevation: 0,
          backgroundColor: Theme.of(context).backgroundColor,
        ),
        body: SafeArea(
          child: Stack(
            children: [
              SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    CatsItemsListWidget(),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  <p><strong>main.dart</strong></p>
  <pre><code>class CatsApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'My cats app',
        theme: ThemeData(
          backgroundColor: PRIMARY_COLOR,
          scaffoldBackgroundColor: PRIMARY_COLOR,
        ),
        home: SelectItem(),
      );
    }
  }
  </code></pre>
  <p>This is not working as expected as I get:</p>
  <p><a href="https://i.stack.imgur.com/pLYd6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pLYd6.png" alt="enter image description here" /></a></p>
  <p>I can't understand how to create an item of the list for each element of enum Cat{} and also how to get clickable items in the list in order to switch screen on click. I also have to store a value corrisponding to what the user click, for example if user click on &quot;Ms White Cat&quot; I have to store a value that can be &quot;MWC&quot; and bring this value with me in the other screen.
  Is the logic that I'm building correct? If not, why? How can I achieve what I need?</p>