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

Flutter – List.builder with different types of items

I would like to make a List in Flutter. List consists of more than one type of widget. I made it this way:

          child: ListView.builder(
              itemCount: datasource.length,
              itemBuilder:(context, index) {

                if (datasource[index] == "red") {
                  return Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                        color: Colors.white,
                    ),
                  
                    height: 80,
                    margin: EdgeInsets.all(10),
                  );
                }

                else {
                    return Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                        color: Colors.white,
                    ),
                  
                    height: 80,
                    margin: EdgeInsets.all(10),
                  );
                } 
              },
            ),

But now I need to add more types of widgets and the code starts to be unclear. Is there any way to move "if else" part to another file?

I have already tried make a method, but failed to import it to original file with List.builder.

Tags:

2

Answers


  1. 0

    You can create a separate file, let’s say widget_helper.dart, and define a function to handle the creation of the containers based on the color.

    In widget_helper.dart

    import 'package:flutter/material.dart';

Widget buildColoredContainer(String color) {
  if (color == "red") {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.white,
      ),
      height: 80,
      margin: EdgeInsets.all(10),
    );
  } else {
    // You can add more conditions for other types of widgets here if needed
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.white,
      ),
      height: 80,
      margin: EdgeInsets.all(10),
    );
  }
}

    And in your original file:

    import ‘widget_helper.dart’;

    child: ListView.builder(
  itemCount: datasource.length,
  itemBuilder: (context, index) {
    return buildColoredContainer(datasource[index]);
  },
),
    Login or Signup to reply.
  2. 0

    Make different class for different type of widget

    widget_list.dart

    import 'package:flutter/material.dart';

class WidgetA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.red,
      ),
      height: 80,
      margin: EdgeInsets.all(10),
      child: Center(child: Text('Widget A')),
    );
  }
}

class WidgetB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.blue,
      ),
      height: 80,
      margin: EdgeInsets.all(10),
      child: Center(child: Text('Widget B')),
    );
  }
}

class WidgetC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.green,
      ),
      height: 80,
      margin: EdgeInsets.all(10),
      child: Center(child: Text('Widget C')),
    );
  }
}

    Use the Widgets class in ListView.builder:

    import 'package:flutter/material.dart';

class YourListView extends StatelessWidget {
  final List<String> datasource;

  YourListView({required this.datasource});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: datasource.length,
      itemBuilder: (context, index) {
        final item = datasource[index];

        if (item == "typeA") {
          return WidgetA();
        } else if (item == "typeB") {
          return WidgetB();
        } else if (item == "typeC") {
          return WidgetC();
        } else {
          // Handle other cases or return a default widget
          return Container();
        }
      },
    );
  }
}

    It is more readable and manageable.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search