Question 244650 in Flutter Question posted in
The official Flutter documentation can be found here.

How to loop somepart of function in flutter?

I want to loop some part of function base on widget.menuItem.category.length, I am new in flutter.
Here is my current code :

_buildContentView({BuildContext context}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        _buildMenuItemImage(),
        Container(
          child: Text(widget.menuItem.name,
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          padding: EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 8),
        ),
        Container(
          child: Text(widget.menuItem.itemDescription,
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.normal)),
          padding: EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 8),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              child: Text('Select ' + widget.menuItem.category[0]),
              padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
            ),
            Container(
              child: Text('Select ' +
                  _qty.toString() +
                  ' item (' +
                  _qty.toString() +
                  '/' +
                  widget.menuItem.setMenuItems.length.toString() +
                  ')'),
              padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
            ),
          ],
        ),
        _buildSetMenusView(setMenuItems: widget.menuItem.setMenuItems),
        Padding(
          padding: EdgeInsets.only(left: 12, right: 12, top: 8, bottom: 12),
          child: _buildActionButtons(context: context),
        )
      ],
    );
  }

I want to loop this part :

Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              child: Text('Select ' + widget.menuItem.category[0]),
              padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
            ),
            Container(
              child: Text('Select ' +
                  _qty.toString() +
                  ' item (' +
                  _qty.toString() +
                  '/' +
                  widget.menuItem.setMenuItems.length.toString() +
                  ')'),
              padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
            ),
          ],
        ),
        _buildSetMenusView(setMenuItems: widget.menuItem.setMenuItems),

I tried with this code but failed, it did not show on simulator (blank):

for(var i = 0; i < widget.menuItem.category.length; i++){
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              child: Text('Select ' + widget.menuItem.category[i]),
              padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
            ),
            Container(
              child: Text('Select ' +
                  _qty.toString() +
                  ' item (' +
                  _qty.toString() +
                  '/' +
                  widget.menuItem.setMenuItems.length.toString() +
                  ')'),
              padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
            ),
          ],
        ),
        _buildSetMenusView(setMenuItems: widget.menuItem.setMenuItems),
}

What is the correct code to loop this part in flutter? please help me repair this flutter loop code

Tags:

3

Answers


  1. 0

    If i get you right then you have to wrap a widget inside a ListView.builder in Flutter, you need to follow a few steps. ListView.builder is a great choice when you have a large number of children widgets and you want to build them on-demand, as it helps with performance optimization. Here’s how you can wrap a widget inside a ListView.builder:

    1. Import Flutter Material: First, make sure you have imported the necessary Flutter material library in your Dart file.
    import 'package:flutter/material.dart';
    1. Create a ListView.builder: Define a ListView.builder widget. This widget takes a builder function that generates the list items dynamically based on the index.
    ListView.builder(
  itemCount: itemCount, // Replace itemCount with the actual number of items you have.
  itemBuilder: (BuildContext context, int index) {
    // Here, you can return a widget for each list item based on the index.
    return YourListItemWidget(index); // Replace YourListItemWidget with your custom widget.
  },
)
    1. Create Your Custom List Item Widget: You’ll need to create a custom widget for each item in the list. This is where you can define the layout and design of your list items.
    class YourListItemWidget extends StatelessWidget {
  final int index;

  YourListItemWidget(this.index);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('Item $index'), // Customize this based on your data.
      // Add other widgets and styling as needed.
    );
  }
}

    1. Replace ‘itemCount’ and ‘YourListItemWidget’ with Your Data: In the ListView.builder, replace itemCount with the actual number of items you have in your list, and replace YourListItemWidget with your custom list item widget.

    2. Display the ListView.builder: Finally, add your ListView.builder to your widget tree in the appropriate part of your Flutter app.

    Here’s a complete example:

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView.builder Example'),
        ),
        body: MyListView(),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 20, // Replace with the actual number of items.
      itemBuilder: (BuildContext context, int index) {
        return YourListItemWidget(index); // Replace with your custom widget.
      },
    );
  }
}

class YourListItemWidget extends StatelessWidget {
  final int index;

  YourListItemWidget(this.index);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('Item $index'), // Customize this based on your data.
      // Add other widgets and styling as needed.
    );
  }
}

    Replace the itemCount and the content of YourListItemWidget with your actual data and custom widget as needed. This will allow you to create a scrollable list of items efficiently using ListView.builder in Flutter.

    Login or Signup to reply.
  2. 0

    While you are looking inside Column and like to return multiple widget, you can use spreed operator for this.

    for(var i = 0; i < widget.menuItem.category.length; i++)
  ...[
      Row(),
      _buildSetMenusView()
     ],

    Also you can return another Column.

    Login or Signup to reply.
  3. 0

    To loop through a part of your function based on the widget.menuItem.category length, you can use a ListView.builder or a Column with a loop. Here’s how you can do it using a Column:

    _buildContentView(BuildContext context) {
  List<Widget> rows = [];

  for (var i = 0; i < widget.menuItem.category.length; i++) {
    rows.add(
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            child: Text('Select ' + widget.menuItem.category[i]),
            padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
          ),
          Container(
            child: Text('Select ' +
                _qty.toString() +
                ' item (' +
                _qty.toString() +
                '/' +
                widget.menuItem.setMenuItems.length.toString() +
                ')'),
            padding: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 6),
          ),
        ],
      ),
    );
    rows.add(_buildSetMenusView(setMenuItems: widget.menuItem.setMenuItems));
  }

  return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      _buildMenuItemImage(),
      Container(
        child: Text(widget.menuItem.name,
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        padding: EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 8),
      ),
      Container(
        child: Text(widget.menuItem.itemDescription,
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.normal)),
        padding: EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 8),
      ),
      ...rows, // Use the spread operator to add the list of rows
      Padding(
        padding: EdgeInsets.only(left: 12, right: 12, top: 8, bottom: 12),
        child: _buildActionButtons(context: context),
      )
    ],
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search