flutter_bloc: Build function returned null

Question

I'm re-writing a very simple application in Flutter with a BLoC pattern. However, when I try to use BLoC components in my app, an error shows up.

I don't know how to fix it, if there's someone who knows, I will be extremely happy!

This error shows up when I try to build my widgets in BlocListener and BlocBuilder.

Error image:

Code:

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../shared/custom_card.dart';

import '../bloc/average_bloc.dart';

class ArithmeticAverageScreen extends StatefulWidget {
  @override
  _ArithmeticAverageScreenState createState() => _ArithmeticAverageScreenState();
}


class _ArithmeticAverageScreenState extends State<ArithmeticAverageScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('arithmetic_average_title').tr(),
      ),
      body: BlocListener<AverageBloc, AverageState>(
        listener: (context, state) {
          if (state is AverageError) {
            return errorDialog(state.message);
          }
        },
        child: BlocBuilder<AverageBloc, AverageState>(
          builder: (context, state) {
            if (state is AverageInitial) {
              return buildListViewWithCards(context);
            }
          },
        ),
      ),
    );
  }
}

Widget errorDialog(message) {
  return AlertDialog(
    content: Text(message).tr(),
  );
}

Widget buildListViewWithCards(BuildContext context) {
  TextEditingController _textFieldController = TextEditingController();

  return Container(
    padding: EdgeInsets.all(20.0),
    child: ListView(
      children: <Widget>[
        CustomCard(
          child: Column(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.help),
                title: Text('arithmetic_average_help').tr(),
                subtitle: Text('arithmetic_average_help_content').tr(),
              )
            ],
          ),
        ),
        SizedBox(height: 16.0),
        CustomCard(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('arithmetic_average_your_grades', style: Theme.of(context).textTheme.headline5).tr(),
                SizedBox(height: 16.0),
                Text('arithmetic_average_type_grades', style: Theme.of(context).textTheme.headline6).tr(),
                SizedBox(height: 16.0),
                Row(
                  children: <Widget>[
                    Container(
                      width: 60.0,
                      child: TextField(
                        controller: _textFieldController,
                        decoration: InputDecoration(
                          labelText: 'arithmetic_average_textfield_hint'.tr(),
                          hintText: '5'
                        ),
                      ),
                    ),
                    SizedBox(width: 16.0),
                    RaisedButton(
                      onPressed: () {
                        submitGrade(context, _textFieldController.text);
                      },
                      child: Text('arithmetic_average_add_button').tr(),
                      color: Colors.teal[300],
                      textColor: Colors.white,
                    )
                  ],
                )
              ],
            ),
          )
        ),
        SizedBox(height: 16.0),
        CustomCard(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('arithmetic_average_your_average', style: Theme.of(context).textTheme.headline5).tr(),
                SizedBox(height: 16.0),
                Center(
                  child: Text('???', style: Theme.of(context).textTheme.headline4)
                )
              ],
            )
          )
        )
      ],
    )
  );
}

void submitGrade(BuildContext context, String average) {
  final averageBloc = BlocProvider.of<AverageBloc>(context);
  averageBloc.add(GetArithmeticAverage(average));
}

Answer 1

You didn't return any widget in you BlocBuilder, you just called the Widget funtion without return

class _ArithmeticAverageScreenState extends State<ArithmeticAverageScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('arithmetic_average_title').tr(),
      ),
      body: BlocListener<AverageBloc, AverageState>(
        listener: (context, state) {
          if (state is AverageError) {
            errorDialog(state.message);
          }
        },
        child: BlocBuilder<AverageBloc, AverageState>(
          builder: (context, state) {
            if (state is AverageInitial) {
              return buildListViewWithCards(context); // return the widget (you didn't add `return` before
            }else{
              return Container();
            }
          },
        ),
      ),
    );
  }
}