Flutter FutureBuilder Snapshot is null but Future Does return data

Question

While working with Flutter for a new application client for Kanboard, I encountered the following problem. I have a FutureBuilder that should return a select dropdown menu with items but, for some reason, the Snapshot data is null, although the Future method does resolves and has data on return.

Full page.dart code here: https://pastebin.com/J48nxsdZ

The block having the problem is the following:

Widget _columnSelect() {
return FutureBuilder(
  future: columnProvider.getColumns(task.projectId),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    List<DropdownMenuItem<String>> columnList = [];
    if (snapshot.hasData) {
      columnList.add(DropdownMenuItem<String>(
          child: Text('Select Column'), value: 0.toString()));
      _columns = snapshot.data;
    } else {
      columnList.add(DropdownMenuItem<String>(
          child: Text('Loading..'), value: 0.toString()));
    }
    _columns.forEach((column) {
      columnList.add(DropdownMenuItem<String>(
          child: Container(
            child: Text(
              column.title,
            ),
          ),
          value: column.id.toString()));
    });
    return Container(
      // margin: EdgeInsets.only(left: 40.0),
      padding: EdgeInsets.symmetric(horizontal: 20.0),
      child: DropdownButtonFormField(
        icon: Padding(
          padding: const EdgeInsets.only(right: 12),
          child: Icon(Icons.view_column, color: Colors.blue),
        ),
        items: columnList,
        value: _columnId,
        decoration: InputDecoration(helperText: 'Optional'),
        onChanged: (newValue) {
          _columnId = newValue;
        },
      ),
    );
  },
);
}

This is a duplicate of a widget in the same form for a user dropdown select. The original widget (in the same page) is the following:

Widget _ownerSelect() {
return FutureBuilder(
  future: userProvider.getUsers(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    List<DropdownMenuItem<String>> usernameList = [];
    if (snapshot.hasData) {
      usernameList.add(DropdownMenuItem<String>(
          child: Text('Select Owner'), value: 0.toString()));
      _users = snapshot.data;
    } else {
      usernameList.add(DropdownMenuItem<String>(
          child: Text('Loading..'), value: 0.toString()));
    }
    _users.forEach((user) {
      usernameList.add(DropdownMenuItem<String>(
          child: Container(
            child: Text(
              user.name,
            ),
          ),
          value: user.id.toString()));
    });
    return Container(
      // margin: EdgeInsets.only(left: 40.0),
      padding: EdgeInsets.symmetric(horizontal: 20.0),
      child: DropdownButtonFormField(
        icon: Padding(
          padding: const EdgeInsets.only(right: 12),
          child: Icon(Icons.person, color: Colors.blue),
        ),
        items: usernameList,
        value: _ownerId,
        decoration: InputDecoration(helperText: 'Optional'),
        onChanged: (newValue) {
          _ownerId = newValue;
        },
      ),
    );
  },
);
}

For some reason, the "_columnSelect" AsyncSnapshot is null always, even when the Future method is working fine:

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:kanboard/src/models/column_model.dart';
import 'package:kanboard/src/preferences/user_preferences.dart';

class ColumnProvider {
  final _prefs = new UserPreferences();

  Future<List<ColumnModel>> getColumns(projectId) async {
    final Map<String, dynamic> parameters = {
      "jsonrpc": "2.0",
      "method": "getColumns",
      "id": 887036325,
      "params": {"project_id": projectId}
    };

    final credentials = "${_prefs.username}:${_prefs.password}";

    Codec<String, String> stringToBase64 = utf8.fuse(base64);

    String encoded = stringToBase64.encode(credentials);

    final resp = await http.post(
      Uri.parse(_prefs.endpoint),
      headers: <String, String>{"Authorization": "Basic $encoded"},
      body: json.encode(parameters),
    );

    final decodedData = json.decode(utf8.decode(resp.bodyBytes));
    final List<ColumnModel> columns = [];

    final List<dynamic> results = decodedData['result'];

    if (decodedData == null) return [];

    results.forEach((column) {
      final columnTemp = ColumnModel.fromJson(column);
      columns.add(columnTemp);
    });
    print(columns);
    return columns;
  }
}

The output of "print(columns)" returns:

I/flutter ( 9486): [Instance of 'ColumnModel', Instance of 'ColumnModel', Instance of 'ColumnModel', Instance of 'ColumnModel']

I don't know what I'm missing here. The form has 2 users dropdown select (with the original FutureBuilder Widget) which works just fine. The Column widget with the Future Builder is the one with the "null" problem in snapshot.data.

Thank you in advance for your time and support with this!

score 3 · Accepted Answer · answered Jul 09 '21 at 00:56

I just found where the problem was:

In the form page(new Task page), The columnProvider.getColumns(task.projectId)) wasn't executing because the "task.projectId" parameter is a String, but the API needs an int.

I was confused because the method were being called by the previous page (A project Page with all the tasks) and the getColumn's argument was indeed an integer: int.parse(projectId).

The Kanboard API doesn't return an error code if the ID parameter is other than INT with this specific call "getColumns" (for some reason).

Of course, Flutter (or Dart) is waiting for a response from http.post that would never arrive. When comparing the two calls from the two pages, I noticed the difference.

So, in conclusion, I specified the int data type argument in the getColumn definition in order to avoid any confusion:

Future<List<ColumnModel>> getColumns(int projectId) async {

Best Regards!

Flutter FutureBuilder Snapshot is null but Future Does return data

1 Answers1