how to use listview with riverpod in flutter

Question

I'am developing an app with flutter and flutter_riverpod. I want to use listview with riverpod. But I don't know how to use. I have an onSubmitted method of textfield. This method to work some dart code for texffield text. My purpose is save the words to listview. I am using flutter_riverpod for that purpuse but I don't know how to use lists for stateprovider or any other provider.

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(child: ana1()),
        ),
      ),
    );
  }
}

final List<String> myList= [];
final StateProvider<int> _lengthProvider = StateProvider((ref) => 0);

class ana1 extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Container(
        width: 1000,
        height: 1000,
        color: Colors.yellow,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
                width: 500,
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Content Text',
                  ),
                  onSubmitted: (inText) {
                    print(inText);

                    String gir = inText;
                            String myText = "$gir a";
                            var a = 0;

                            List<String> myList = [];

                            for (a = 0; a < myText.length; a++) {
                              if (myText.substring(a, a + 1) == " ") {
                                myList.add(myText.substring(0, a));
                                myText = myText.substring(a + 1, myText.length);
                                a = 0;
                              }
                            }
                            
                            var b = 0;
                            String errorText = "?.; :-";

                            for (b = 0; b < myList.length; b++) {
                              String checkF = myList[b].substring(0, 1);
                              if (errorText.contains(checkF)) {
                                myList[b] =
                                    myList[b].substring(1, myList[b].length);
                              }

                              String checkL = myList[b].substring(
                                  myList[b].length - 1, myList[b].length);
                              if (errorText.contains(checkL)) {
                                myList[b] = myList[b]
                                    .substring(0, myList[b].length - 1);
                              }
                            }



 myList.add("$inText-${myList.length + 1}");
      ref.read(_lengthProvider.state).state = myList.length;




                  },
                )),
            Container(
              color: Colors.amberAccent,
              width: 500,
              child: ListView.builder(
                itemCount: ref.watch(_lengthProvider.state).state,
                itemBuilder: (BuildContext context, int index) {
                  return Text(myList[index]);
                },
              ),
            ),
          ],
        ));
  }
}

Answer 1

I am simplifying the snippet to work out with state provider only

final StateProvider<List<String>> itemsProvider = StateProvider((ref) => []);

class ana1 extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Container(
        width: 400,
        height: 300,
        color: Colors.yellow,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
                child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Content Text',
              ),
                           onSubmitted: (inText) {
                final sliptIntoWords = inText.split(
                    ","); // Im separating words on , perform your logic here
                final oldItems = ref.read(itemsProvider);
                ref.read(itemsProvider.state).update(
                      (state) => [
                        ...oldItems,
                        ...sliptIntoWords,
                      ],
                    );
              },
            )),
            Expanded(
              child: Container(
                color: Colors.amberAccent,
                child: ListView.builder(
                  itemCount: ref.watch(itemsProvider).length,
                  itemBuilder: (BuildContext context, int index) {
                    return Text(ref.watch(itemsProvider)[index]);
                  },
                ),
              ),
            ),
          ],
        ));
  }
}

It will better using cosumer on ListView I think