Generate Random Widget List in Flutter

Video thumbnail

I'm going to show you how to generate a random list of elements, whether they are integers, floating-point numbers, strings, or objects, as in my case.

  • It's really very simple. The scheme I'm following is this:
  • Look at the list construction part.
  • The important thing is that, in this example, the data comes from an API, although you could obviously have a static list or one generated in another way.
  • Finally, when constructing the list, I added an additional parameter to handle the random sorting.
class QuestionModel {
  int id;
  String title;
  String tagTitle;
  String tagDescription;
  String type;
  int tagId;
  int questionsQuantity;
  String language;
  int randomOrder = 0;
  List<QuestionSimpleModel> questionsSimple = [];

  QuestionModel.fromJson(Map<String, dynamic> qMap)
      : id = qMap['id'],
        title = qMap['title'],
        tagTitle = qMap['tag_title'],
        tagDescription = qMap['tag_description'],
        tagId = qMap['tag_id'],
        type = qMap['type'],
        questionsQuantity = qMap['questions_quantity'] ?? 0,
        randomOrder = Random().nextInt(100), // orden aleatorio
        language = qMap['language'];
}

This method is used to specify the order of a list. However, it can be somewhat inefficient depending on the size of the data. For example:

  • If we have a list of 1000 items, we are creating 1000 instances of `Random`, which is inefficient.
  • A more efficient alternative would be to create a single instance of `Random` and pass it as a parameter to the method that generates the random numbers.

Currently, in my case, I work with 15 questions at a time, so this inefficiency doesn't affect me much, but it's something to keep in mind.

How to Implement Random Sorting

  1. List of objects: First, define the data you want to handle. In my case, it's the data displayed on the screen.
  2. Random sort parameter: Additionally, you can create a parameter that specifies that the elements should be sorted randomly.
    1. You can modify this freely according to your needs.
    2. Another option is to create a base class that contains this parameter and receives the model as a generic type (dynamic or template).

Example of a wrapper class

If you don't want to clutter your class definition with a sorting parameter that isn't related to the main class, you can create a wrapper class:

This way, you keep the random order logic separate from the main model and can reuse it in any context.

Random list generation

Random order is not applied directly in the class definition, but rather when building the list.

  • Here you can handle any type of data: local objects or results from an API.
  • Using a method called `sort` (or similar), you build the final sorted list.
  • This is where the randomness actually comes into play.
_questions = await QuestionHelper.getQuestionGetByPrincipalId(
       widget.id, userPreference.locale);
   // orden aleatorio
   _questions.sort((a, b) => a.randomOrder.compareTo(b.randomOrder));

What we do is order the elements based on some parameter. In this case, we use a randomly generated number. It's that simple, and there's nothing else to configure.

I'll tell you how you can generate a list with random positions of Widgets in Flutter.

I agree to receive announcements of interest about this Blog.

Andrés Cruz

ES En español