title: Flutter - TextField how to filter list
body: <p>I'm new to Flutter and I'm trying to understand how things works.<br>
  I have created a simple app that should show a list of shops, I need that the whole screen will scroll so as far as I understand I can't use the <code>ListView</code>.  </p>
  
  <p>I have also added a <code>TextField</code> and I want to use it to filter the content so a user can see the shop he wants.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>import 'package:testapp/models/maison.dart';
  import 'package:testapp/widgets/maison_card.dart';
  import 'package:flutter/material.dart';
  
  class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() =&gt; _HomePageState();
  }
  
  class _HomePageState extends State&lt;HomePage&gt; {
    TextEditingController _searchTextController = new TextEditingController();
    String filter;
    List&lt;Maison&gt; _maisons = maisons;
  
    @override
    void initState() {
      super.initState();
      _searchTextController.addListener(() {
        print(_searchTextController.text);
        filter = _searchTextController.text;
      });
    }
  
    @override
    void dispose() {
      _searchTextController.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return SingleChildScrollView(
        child: Column(
          children: &lt;Widget&gt;[
            Container(
              height: MediaQuery.of(context).size.width * 0.70,
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    offset: Offset(0.0, 2.0),
                    blurRadius: 6.0,
                  )
                ],
              ),
              child: Image(
                image: AssetImage('assets/images/bg-home.png'),
                fit: BoxFit.cover,
              ),
            ),
            Transform.translate(
              offset: Offset(0, -25),
              child: Container(
                height: 60.0,
                padding: EdgeInsets.only(left: 20, top: 8),
                margin: EdgeInsets.symmetric(horizontal: 16),
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey[350],
                      blurRadius: 20.0,
                      offset: Offset(0, 10.0),
                    ),
                  ],
                ),
                child: TextField(
                  controller: _searchTextController,
                  decoration: InputDecoration(
                    suffixIcon: Icon(
                      Icons.search,
                      color: Colors.black,
                      size: 20.0,
                    ),
                    border: InputBorder.none,
                    hintText: 'Cerca la maison',
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                left: 16.0,
                right: 16.0,
              ),
              child: Row(
                children: &lt;Widget&gt;[
                  Text(
                    "Le Maison",
                    style: Theme.of(context).textTheme.headline1,
                  ),
                  Spacer(),
                ],
              ),
            ),
            ..._maisons.map((Maison m) {
              return filter == null || filter == ''
                  ? MaisonCard(maison: m)
                  : m.name.toLowerCase().contains(filter.toLowerCase())
                      ? MaisonCard(maison: m)
                      : Container();
            }).toList(),
          ],
        ),
      );
    }
  }
  </code></pre>
  
  <p>At the very end I have this:</p>
  
  <pre><code>..._maisons.map((Maison m) {
              return filter == null || filter == ''
                  ? MaisonCard(maison: m)
                  : m.name.toLowerCase().contains(filter.toLowerCase())
                      ? MaisonCard(maison: m)
                      : Container();
            }).toList(),
  </code></pre>
  
  <p>that should print a list of shops based on the <code>filter</code> value.<br>
  I think that the problem is that the widget tree is already built so event if I type some text the tree is not printed again.<br>
  There is another way to accomplish this task?</p>
  
  <p>Maisons is a simple class:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  class Maison {
    final String id;
    final String name;
    final String imageUrl;
  
    Maison({
      @required this.id,
      @required this.name,
      @required this.imageUrl,
    });
  }
  
  List&lt;Maison&gt; maisons = [
    Maison(
      id: '1',
      name: 'Armani',
      imageUrl:
          'https://images.unsplash.com/photo-1495562569060-2eec283d3391?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1500&amp;q=80',
    ),
    Maison(
      id: '2',
      name: 'Dolce &amp; Gabbana',
      imageUrl:
          'https://images.unsplash.com/photo-1582559934353-2e47140e7501?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1788&amp;q=80',
    ),
    Maison(
      id: '3',
      name: 'Zegna',
      imageUrl:
          'https://images.unsplash.com/photo-1553355617-f7342d67a95f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1500&amp;q=80',
    ),
    Maison(
      id: '4',
      name: 'Cavalli',
      imageUrl:
          'https://images.unsplash.com/photo-1555141816-810dd5692b6a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1789&amp;q=80',
    ),
  ];
  </code></pre>