Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between ListView and ListView.builder and can we use Listview.builder to create and validate and submit forms?

Tags:

flutter

What is the difference between Listview.builder and Listview? Can we use ListView.builder to submit forms?

I am using the Listview.builder now to create forms.

like image 238
maheshwari Avatar asked May 23 '19 09:05

maheshwari


People also ask

What is difference between ListView and ListView builder?

In contrast to the default ListView constructor, which requires creating all items at once, the ListView. builder() constructor creates items as they're scrolled onto the screen.

What is the difference between ListView and ListView builder and two properties of ListView builder in flutter?

ListView() constructor takes argument children where you can use map method of your list to create a list of widgets. These widgets are rendered immediately when the build method is called. ListView. builder() on the other hand, takes itemBuilder and itemCount parameters.

What is the difference between ListView and SingleChildScrollView?

For example: You need to only show a list of contacts on your screen and the list items are more or less similar (UI wise and category wise). Then you would use a Listview. A SingleChildScrollView can be compared to "ScrollView" in Android.

What is ListView builder in flutter?

ListView is a very important widget in a flutter. It is used to create the list of children But when we want to create a list recursively without writing code again and again then ListView. builder is used instead of ListView. ListView. builder creates a scrollable, linear array of widgets.


4 Answers

From official docs:

https://api.flutter.dev/flutter/widgets/ListView/ListView.html

ListView: Creates a scrollable, linear array of widgets from an explicit List. This constructor is appropriate for list views with a small number of children because constructing the List requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible.


https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html

ListView.builder Creates a scrollable, linear array of widgets that are created on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

Basically, builder constructor create a lazy list. When user is scrolling down the list, Flutter builds widgets "on demand".

Default ListView constructor build the whole list at once.

In your case, default construct works fine, because you already now how many widgets should put on Column().

like image 180
Rubens Melo Avatar answered Oct 11 '22 08:10

Rubens Melo


The main difference between ListView and ListView.builder

The ListView constructor requires us to create all items at once. This is good when list items are less and all will be seen on the screen, but if not then for long list items its not the good practice.

whereas

the ListView.Builder constructor will create items as they are scrolled onto the screen like on-demand. This is the best practice for development for List widget where items will only render only when items are going seen on the screen.

like image 34
Jitesh Mohite Avatar answered Oct 11 '22 08:10

Jitesh Mohite


ListView.builder() builds widgets as required(when they can be seen). This process is also called "lazily rendering widgets".

like image 28
numan kaya Avatar answered Oct 11 '22 09:10

numan kaya


To see the difference between each one go visit ListView Class.

And sure, you can create Forms with ListView.builder(), but I've found some problems trying it.

  1. I can't put it into any ListView(), either Column(), to put them if there's any more items than just the Form().
  2. I couldn't even add a Button at the of the ListView.builder() even using a conditional to put it when the last index is reached. Because of that, you have to use textInputAction: TextInputAction.done to perform some kind of action at onFieldSubmitted:
  3. The best way to get the Fields data I've found was to add them all into an array when the onSaved:method is called, and I don't think that's a good way to go (maybe it is).

With that being said, that's what I used to make it work:

body: Form(
    key: _key,
    child: Container(
      child: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return TextFormField(
            textInputAction: TextInputAction.done,
            validator: (text) {
              if (text.isEmpty) {
                return "The text is empty";
              }
            },
            onFieldSubmitted: (text) {
              _onSaved();
            },
            onSaved: (text) {
              form.add(text);
            },
          );             
        },
      ),
    ),
  ),

void _onSaved() {
  if (_key.currentState.validate()) {
    _key.currentState.save();
    print(form);
  }
}

And the result:

I/flutter ( 7106): [fjjxjx, hxjxjcj, jxjxjfj, jfjfj, jxjxj]
like image 24
Escobar Avatar answered Oct 11 '22 10:10

Escobar