How to return part of a list of Widgets in Flutter

flutter dynamic list of widgets
flutter widgets
flutter map list to widgets
flutter listview
flutter for loop inside widget
flutter listview section header
flutter listview builder in column
list of buttons flutter

I have a page comprised of multiple sections, each consisting of a header and list of text. I would like the whole collection to scroll uniformly, as one series, and am wondering how best to break apart this logic. Imagine the following tree of widgets:

ListView(
  children: <Widget>[
    Text('Section 1 Header'),
    Text('Section 1 List Item 1'),
    Text('Section 1 List Item 2'),
    Text('Section 2 Header'),
    ...
  ]
)

In terms of helper functions that build this cleanly, something like the following would be nice:

ListView(
  children: <Widget>[
    Text('Section 1 Header'),
    _buildSection1ListItems(),
    Text('Section 2 Header'),
  ]
)

Where _buildSection1ListItems() looks like the following:

List<Widget> _buildSection1ListItems() {
  return [
    Text('Section 1 List Item 1'),
    Text('Section 1 List Item 2'),
  ];
}

And NOT like the following:

Widget _buildSection1ListItems() {
  return Expanded(
    child: Column(
      children: <Widget>[
        Text('Section 1 List Item 1'),
        Text('Section 1 List Item 2'),
      ]
    )
  );
}

All I've figured out so far is that obvious second solution, but it introduces so many frivolous widgets influenced purely by business logic refactoring niceties, and not the actual, ideal tree of widgets to display content.

Is there a pattern for doing this in Flutter?

As Dart 2.2.2 or later, you can use the spread operator:

ListView(
  children: <Widget>[
    Text('Section 1 Header'),
    ..._buildSection1ListItems(),
    Text('Section 2 Header'),
  ]
)

Iterating through a list to render multiple widgets in Flutter?, Basically when you hit 'return' on a function the function will stop and will not continue your iteration, so what you need to do is put it all on a list  Widgets Create beautiful apps faster with Flutter’s collection of visual, structural, platform, and interactive widgets. In addition to browsing widgets by category, you can also see all the widgets in the widget index .

You could return arrays from your section functions and then flatten the whole list. How to flatten an array?

Create lists with different types of items, https://flutter.dev › Docs › Cookbook › Lists › Work with long lists Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Flutter for loop to generate list of widgets

Yes, there is a pattern, you can build a model class.

make a new file post_model.dart

import 'package:flutter/material.dart';

class PostModel {
Widget sectionHeader;
List<Widget> widgetList;

PostModel(Widget this.sectionHeader, List<Widget> this.widgetList);
}

Them you're going to display a list of PostModels using a ListView.builder .

body: new ListView.builder
  (
    itemCount: postModelList.length,
    itemBuilder: (BuildContext ctxt, int index) {
     return ....
    }
  )

Read more about using a listView.Builder here.

P.S. The smart way is to encode your posts as JSON, then use json.decode, here's an example how to use json.decode in a project.

Work with long lists, Use ListView.builder to implement a long or infinite list. Convert the data source into widgets; Interactive example. The standard return MaterialApp(. 20. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Flutter, return 2 widgets from class or method

Building Widgets On Demand with Flutter - DEV, Tagged with flutter, dart, widgets, flutterio. So how can we build our list items, or widgets, on demand? body: buildList(), ); } Widget buildList() { return ListView.​builder( itemCount: 1000, itemBuilder: (BuildContext context, int index) { return Select night theme in the "misc" section of your settings ❤️. In some cases, you might want to return data from a new screen. For example, say you push a new screen that presents two options to a user. When the user taps an option, you want to inform the first screen of the user’s selection so that it can act on that information. You can do this with the Navigator.pop() method using the following steps:

Flutter: Future Builder with List View Builder - nonstopio, futures in widgets. To solve this problem flutter provided a widget called Future Builder. In the below example, I have used the future builder and for a list, I have used List view builder. In the example, I return ListView.builder( itemCount: Flutter + Sqflite = is best choice for local database? — Part 1. I want to loop the cards in the flutter.Since in Angular 2 just *ngFor works fine now in same way how can i loop it.I don't found and docs on flutter web. you will find the output in the screen shot Please help me to know how to loop cards or any other widgets. class MyApp extends StatelessWidget { // This widget is the root of your application.

Returning more than one widget using Dart 2.3's collection for , Does anyone know a way to return two widgets in a Collection-For lists returned by the for statement into one long List<Widget>, though, and it can at 10:43 AM 'Andrew Brogdon' via Flutter Development (flutter-dev) <flutt. I have added a few widgets inside the ListView. So that I can scroll all widgets. Now I required to add one more widget to the ListView to load the list of comments. I can not add the ListView inside the ListView. And moreover, I do not require the separate scroll for my comments. It should be scroll along with the widgets inside the ListView.

Comments
  • Thanks for adding this - the spread operator is definitely the way to go now :)
  • This was the best answer until Dart 2.2.2's spread operator. Thanks for the help!