NyListView

• Introduction
• Usage
  • NyListView
  • NyListView.separated
  • NyListView.grid
• Parameters
• Updating The State

Introduction

In this section, we will learn about the NyListView widget.

The NyListView widget is a helpful widget for handling List Views in your Flutter projects.

It works in the same way as the regular ListView widget, but it has some extra features that make it easier to use.

Let's take a look at some code.

Usage NyListView

The NyListView widget is a helpful widget for handling List Views in your Flutter projects.

Here's how you can start using the NyListView widget.

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
        child: NyListView(child: (BuildContext context, dynamic data) {
            return ListTile(
                title: Text(data['title'])
            );
        }, data: () async {
            return [
                {"title": "Clean Room"},
                {"title": "Go to the airport"},
                {"title": "Buy new shoes"},
                {"title": "Go shopping"},
                {"title": "Find my keys"}
            ];
        }))
    );
}
// or from an API
@override
Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
        child: NyListView(child: (BuildContext context, dynamic data) {
            return ListTile(
                title: Text(data['title']),
                subtitle: Text(data['completed'])
            );
        }, data: () async {
            return await api<ApiService>((request) =>
                request.get('https://jsonplaceholder.typicode.com/todos'));
        }))
    );
}

The NyListView widget requires two parameters:

• child - This is the widget that will be displayed for each item in the list.
• data - This is the data that will be displayed in the list.

Usage NyListView Separated

The NyListView.separated widget is a helpful widget for handling List Views with dividers in your Flutter projects.

Here's how you can start using the NyListView.separated widget.

@override
Widget build(BuildContext context) {
return Scaffold(
    body: SafeArea(
        child: NyListView.separated(
            child: (BuildContext context, dynamic data) {
                return ListTile(title: Text(data['title']));
            },
            data: () async {
                return [
                    {"title": "Clean Room"},
                    {"title": "Go to the airport"},
                    {"title": "Buy new shoes"},
                    {"title": "Go shopping"},
                    {"title": "Find my keys"}
                ];
            },
            separatorBuilder: (BuildContext context, int index) {
                return Divider();
            },
        )
    )
);
}
// or from an API
@override
Widget build(BuildContext context) {
return Scaffold(
    body: SafeArea(
        child: NyListView.separated(
            child: (BuildContext context, dynamic data) {
                return ListTile(
                    title: Text(data['title']),
                    subtitle: Text(data['completed'].toString())
                );
            },
            data: () async {
                return await api<ApiService>((request) =>
                        request.get('https://jsonplaceholder.typicode.com/todos'));
            },
            separatorBuilder: (BuildContext context, int index) {
                return Divider();
            },
        )
    )
);
}

The NyListView.separated widget requires three parameters:

• child - This is the widget that will be displayed for each item in the list.
• data - This is the data that will be displayed in the list.
• separatorBuilder - This is the widget that will be displayed between each item in the list.

Usage NyListView Grid

The NyListView.grid widget is a helpful widget for handling Grid Views in your Flutter projects.

Here's how you can start using the NyListView.grid widget.

@override
Widget build(BuildContext context) {
return Scaffold(
    body: SafeArea(
        child: NyListView.grid(
            child: (BuildContext context, dynamic data) {
                return ListTile(title: Text(data['title']));
            },
            data: () async {
                return [
                    {"title": "Clean Room"},
                    {"title": "Go to the airport"},
                    {"title": "Buy new shoes"},
                    {"title": "Go shopping"},
                    {"title": "Find my keys"}
                ];
            },
            crossAxisCount: 2, // The number of rows in the grid
            // mainAxisSpacing: 1.0, // The mainAxis spacing
            // crossAxisSpacing: 1.0, // The crossAxisSpacing
        )
    )
);
}
// or from an API
@override
Widget build(BuildContext context) {
return Scaffold(
    body: SafeArea(
        child: NyListView.grid(
            child: (BuildContext context, dynamic data) {
                return ListTile(
                    title: Text(data['title']),
                    subtitle: Text(data['completed'].toString())
                );
            },
            data: () async {
                return await api<ApiService>((request) =>
                        request.get('https://jsonplaceholder.typicode.com/todos'));
            },
            crossAxisCount: 2, // The number of rows in the grid
            // mainAxisSpacing: 1.0, // The mainAxis spacing
            // crossAxisSpacing: 1.0, // The crossAxisSpacing
        )
    )
);
}

The NyListView.grid widget requires two parameters:

• child - This is the widget that will be displayed for each item in the list.
• data - This is the data that will be displayed in the list.

The NyListView.grid widget also has some optional parameters:

• crossAxisCount - The number of rows in the grid.
• mainAxisSpacing - The mainAxis spacing.
• crossAxisSpacing - The crossAxisSpacing.

Parameters

Here are some important parameters you should know about before using the NyPullToRefresh widget.

If you would like to know all the parameters available, visit this link here.

Updating the State

You can update the state of a NyListView widget by referencing the stateName parameter.

// e.g.
@override
  Widget build(BuildContext context) {
    return NyListView(
        child: (BuildContext context, dynamic data) {
          return ListTile(title: Text(data['title']));
          }, 
        data: () async {
          return  [
            {"title": "Clean Room"}, 
            {"title": "Go to the airport"}, 
            {"title": "Buy new shoes"}, 
            {"title": "Go shopping"},
          ];
        },
      stateName: "my_list_of_todos",
    );
  }


_updateListView() {
    updateState("my_list_of_todos");
}

This will trigger the State to reboot and load fresh data from the data parameter.