title: how to use useStreamController in HookWidget?
body: <p>Im new to flutter hooks, and riverpod(state-manangement),</p>
  <pre><code>class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    String _url = &quot;https://owlbot.info/api/v4/dictionary/&quot;;
    String _token = &quot;ae7cbdfff57e548a4360348ee519123a741d8e3d&quot;;
  
    TextEditingController _controller = TextEditingController();
  
    StreamController _streamController;
    Stream _stream;
  
    Timer _debounce;
  
    Future _search() async {
      if (_controller.text == null || _controller.text.length == 0) {
        _streamController.add(null);
        return;
      }
  
      _streamController.add(&quot;waiting&quot;);
      Response response = await get(_url + _controller.text.trim(),
          headers: {&quot;Authorization&quot;: &quot;Token &quot; + _token});
      _streamController.add(json.decode(response.body));
    }
  
    @override
    void initState() {
      super.initState();
  
      _streamController = StreamController();
      _stream = _streamController.stream;
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(&quot;Flictionary&quot;),
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(48.0),
            child: Row(
              children: &lt;Widget&gt;[
                Expanded(
                  child: Container(
                    margin: const EdgeInsets.only(left: 12.0, bottom: 8.0),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(24.0),
                    ),
                    child: TextFormField(
                      onChanged: (String text) {
                        if (_debounce?.isActive ?? false) _debounce.cancel();
                        _debounce = Timer(const Duration(milliseconds: 1000), () {
                          _search();
                        });
                      },
                      controller: _controller,
                      decoration: InputDecoration(
                        hintText: &quot;Search for a word&quot;,
                        contentPadding: const EdgeInsets.only(left: 24.0),
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(
                    Icons.search,
                    color: Colors.white,
                  ),
                  onPressed: () {
                    _search();
                  },
                )
              ],
            ),
          ),
        ),
        body: Container(
          margin: const EdgeInsets.all(8.0),
          child: StreamBuilder(
            stream: _stream,
            builder: (BuildContext ctx, AsyncSnapshot snapshot) {
              if (snapshot.data == null) {
                return Center(
                  child: Text(&quot;Enter a search word&quot;),
                );
              }
  
              if (snapshot.data == &quot;waiting&quot;) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
  
              return ListView.builder(
                itemCount: snapshot.data[&quot;definitions&quot;].length,
                itemBuilder: (BuildContext context, int index) {
                  return ListBody(
                    children: &lt;Widget&gt;[
                      Container(
                        color: Colors.grey[300],
                        child: ListTile(
                          leading: snapshot.data[&quot;definitions&quot;][index]
                                      [&quot;image_url&quot;] ==
                                  null
                              ? null
                              : CircleAvatar(
                                  backgroundImage: NetworkImage(snapshot
                                      .data[&quot;definitions&quot;][index][&quot;image_url&quot;]),
                                ),
                          title: Text(_controller.text.trim() +
                              &quot;(&quot; +
                              snapshot.data[&quot;definitions&quot;][index][&quot;type&quot;] +
                              &quot;)&quot;),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                            snapshot.data[&quot;definitions&quot;][index][&quot;definition&quot;]),
                      )
                    ],
                  );
                },
              );
            },
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>i just wanted to convert above statefulWidget to HookWidget and how to use riverpod as statemanagenent for the above example. I know some basics of hooks and riverpod, but still i'm confused between the hooks, statemanagement(riverpod).
  Please Can someone help understand them and provide some examples or at least convert the above code into the hook widget, and using hookbuilder</p>
  <p>Thanks in advance</p>