title: Flutter - Pass a dynamic Item as Key
body: <p>The code below is displaying the following error when I run in <code>flutter run</code> debug mode:</p>
  
  <p><code>type 'List' is not a subtype of type 'String' of 'value' where</code></p>
  
  <p><a href="https://i.stack.imgur.com/QA73Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QA73Y.png" alt="enter image description here"></a></p>
  
  <p>When I run in release mode <code>flutter run --release</code> the error does not appear and I can identify the item I selected to delete.</p>
  
  <p><a href="https://i.stack.imgur.com/GOM8v.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GOM8v.gif" alt="enter image description here"></a></p>
  
  <p>The problem is on line 39:
  <code>key: new Key(i),</code></p>
  
  <p>The <code>key</code> only accepts string as value:
  <code>Key(String value) → Key</code></p>
  
  <p>But I'm passing a <code>List</code> that appears to be a dynamic item:
  <code>dynamic i</code></p>
  
  <p>But I need to pass a <code>List</code> on the <code>Key</code> to be able to identify what the excluded item will be.</p>
  
  <p>How could I solve this problem in debug mode?</p>
  
  <p>And why is this behavior happening and in the release mode the problem does not occur?</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'dart:ui' as ui;
  
  void main() {
    runApp(new MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        home: new MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() =&gt; new _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    List&lt;Widget&gt; tiles;
    List foos = [];
  
    @override
    void initState() {
      this.foos = [[0, 'foo1'], [1, 'foo2'], [2, 'foo3'], [3, 'foo4']];
      this.tiles = buildTile(this.foos);
      super.initState();
    }
  
    //function
    List&lt;Widget&gt; buildTile(List list) {
      var x = [];
      for(var i in list) {
        x.add(
          new ItemCategory(
            key: new Key(i),
            category: i[1],
            onPressed: () {
              setState(() {
                list.removeAt(i[0]);
                var list2 = [];
                for(var x = 0; x &lt; list.length; x++) {
                  list2.add([ x, list[x][1] ]);
                }
                this.tiles = buildTile(list2);
              });
            },
          )
        );
      }
      return x;
    }
  
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text('Categories'),
        ),
        body: new ListView(
          padding: new EdgeInsets.only(top: 8.0, right: 0.0, left: 0.0),
          children: this.tiles
        )
      );
    }
  }
  
  class ItemCategory extends StatefulWidget {
    ItemCategory({ Key key, this.category, this.onPressed}) : super(key: key);
  
    final String category;
    final VoidCallback onPressed;
  
    @override
    ItemCategoryState createState() =&gt; new ItemCategoryState();
  }
  
  class ItemCategoryState extends State&lt;ItemCategory&gt; with TickerProviderStateMixin {
    ItemCategoryState();
  
    AnimationController _controller;
    Animation&lt;double&gt; _animation;
    double flingOpening;
    bool startFling = true;
  
    void initState() {
      super.initState();
      _controller = new AnimationController(duration: 
        const Duration(milliseconds: 246), vsync: this);
  
      _animation = new CurvedAnimation(
        parent: _controller,
        curve: new Interval(0.0, 1.0, curve: Curves.linear),
      );
    }
  
    void _move(DragUpdateDetails details) {
      final double delta = details.primaryDelta / 304;
      _controller.value -= delta;
    }
  
    void _settle(DragEndDetails details) {
      if(this.startFling) {
        _controller.fling(velocity: 1.0);
        this.startFling = false;
      } else if(!this.startFling){
        _controller.fling(velocity: -1.0);
        this.startFling = true;
      }
    }
  
    @override
    Widget build(BuildContext context) {
      final ui.Size logicalSize = MediaQuery.of(context).size;
      final double _width = logicalSize.width;
      this.flingOpening = -(48.0/_width);
  
      return new GestureDetector(
        onHorizontalDragUpdate: _move,
        onHorizontalDragEnd: _settle,
        child: new Stack(
          children: &lt;Widget&gt;[
            new Positioned.fill(
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: &lt;Widget&gt;[
                  new Container(
                    decoration: new BoxDecoration(
                      color: new Color(0xFFE57373),
                    ),
                    child: new IconButton(
                      icon: new Icon(Icons.delete),
                      color: new Color(0xFFFFFFFF),
                      onPressed: widget.onPressed
                    )
                  ),
                ],
              ),
            ),
            new SlideTransition(
              position: new Tween&lt;Offset&gt;(
                begin:  Offset.zero,
                end: new Offset(this.flingOpening, 0.0),
              ).animate(_animation),
              child: new Container(
                decoration: new BoxDecoration(
                  border: new Border(
                    top: new BorderSide(style: BorderStyle.solid, color: Colors.black26),
                  ),
                  color: new Color(0xFFFFFFFF),
                ),
                margin: new EdgeInsets.only(top: 0.0, bottom: 0.0),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: &lt;Widget&gt;[
                    new Expanded(
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: &lt;Widget&gt;[
                          new Container(
                            margin: new EdgeInsets.only(left: 16.0),
                            padding: new EdgeInsets.only(right: 40.0, top: 4.5, bottom: 4.5),
                            child: new Row(
                              children: &lt;Widget&gt;[
                                new Container(
                                  margin: new EdgeInsets.only(right: 16.0),
                                  child: new Icon(
                                    Icons.brightness_1,
                                    color: Colors.black,
                                    size: 35.0,
                                  ),
                                ),
                                new Text(widget.category),
                              ],
                            )
                          )
                        ],
                      ),
                    )
                  ],
                ),
              )
            ),
          ],
        )
      );
    }
  }
  </code></pre>