'Flutter: How to create FormBuilderCheckboxGroup options from a get request

Been playing around with flutter, and in a form I am aiming to build a set of checkbox options based on values returned from a get request.

The idea is to have a dynamic list that gives options provided in the database, however i am struggling to:

A) Resolve the future before the form builds (right now it is building and on update shows the values)

B) Get the check boxes to appear beneath each other.

Here is my code for the form:

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:topic_management/models/topic.dart';
import 'package:topic_management/services/topic_service.dart';

class AddTopicForm extends StatefulWidget {
  const AddTopicForm({Key? key}) : super(key: key);

  @override
  AddTopicFormState createState() => AddTopicFormState();
}

class AddTopicFormState extends State<AddTopicForm> {
  List<FormBuilderFieldOption> options = [];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    getChannels().then(
        (value) => buildCheckboxes(value.map((e) => e.toString()).toList()));

    final _formKey = GlobalKey<FormBuilderState>();
    Topic topic = Topic(name: "", displayName: "");

    return SimpleDialog(title: const Text('Add a new Topic'), children: [
      FormBuilder(
          key: _formKey,
          child: Padding(
            padding: const EdgeInsets.all(32.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FormBuilderTextField(
                  name: 'topicName',
                  onChanged: (String? name) {
                    topic.name = name!;
                  },
                  decoration: const InputDecoration(hintText: 'Topic Name'),
                ),
                FormBuilderTextField(
                  name: 'topicDescription',
                  onChanged: (String? description) {
                    topic.displayName = description!;
                  },
                  decoration:
                      const InputDecoration(hintText: 'Topic Description'),
                ),
                FormBuilderCheckboxGroup(
                  decoration: const InputDecoration(hintText: "Channels"),
                  options: options,
                  name: 'channels',
                ),
                Padding(
                    padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
                    child: ElevatedButton(
                      onPressed: () {
                        postTopic(topic);
                      },
                      child: const Text('Submit'),
                    )),
              ],
            ),
          )),
    ]);
  }

  buildCheckboxes(List<String> channels) {
    for (int i = 0; i < channels.length; i++) {
      options.add(FormBuilderFieldOption(value: channels[i]));
    }
  }
}

Currently what happens is when opening the dialog I get this:

enter image description here

Then on clicking the text field i get this: enter image description here

Any help would be much appreciated!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source