Building a List<FlatButton> using Firebase

Question

I'm building a list of buttons, using Firebase to name each one, but my code presents this error when referencing "_getButtonBar" to the Widget: "The argument type 'Future<List>' can't be assigned to the parameter type 'List'". Should the widget be Future too? Does anyone know what's missing?

class ThemesList extends StatelessWidget {
  Future<List<FlatButton>> _getButtonBar(context) async {
    List<FlatButton> _list1 = [];
    tot = await callReadTotal(); //Receives length to make the loop.
    getListCauses(); //Calls Firebase to use arrCauses = List () for child: Text
    for (int i = 1; i <= tot; i++) {
      _list1.add(
        FlatButton(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
            side: BorderSide(color: Color.fromRGBO(150, 1, 1, 1)),
          ),
          splashColor: Color.fromRGBO(150, 1, 1, 1),
          onPressed: () => {
            setChoice(i),
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => CausesList()),
            ),
          },
          child: Text(
            arrCauses[i],
            style: TextStyle(
              color: Color.fromRGBO(150, 1, 1, 1),
              fontSize: 20,
              fontFamily: 'Balsamiq_Sans',
            ),
          ),
        ),
      );
    }
    return _list1;
  }

  @override
  Widget build(BuildContext context) {
    return Platform.isIOS
        ? CupertinoPageScaffold(child: null)
        : Scaffold(
            appBar: AppBar(
              title: Text(
                'ICare',
                style: TextStyle(
                  color: Color.fromRGBO(150, 1, 1, 1),
                  fontSize: 40,
                  fontFamily: 'Balsamiq_Sans',
                  fontWeight: FontWeight.w500,
                ),
              ),
              flexibleSpace: Image(
                image: AssetImage('assets/images/solidariedade.png'),
                color: Color.fromRGBO(255, 200, 200, 0.45),
                colorBlendMode: BlendMode.modulate,
                fit: BoxFit.cover,
              ),
            ),
            body: Stack(
              children: <Widget>[
                Container(
                  child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: ButtonBar(
                      children: _getButtonBar(
                          context), //<-- Here it points out the error.
                      alignment: MainAxisAlignment.center,
                    ),
                  ),
                ),                
              ],
            ),
          );
  }
}

Answer 1

Your problem can be solve via two options.

By using StatefulWidget

import 'package:flutter/material.dart';

class ThemesList extends StatefulWidget {
  @override
  _ThemesListState createState() => _ThemesListState();
}

class _ThemesListState extends State<ThemesList> {
  List<FlatButton> _buttonBar = [];

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

  _getButtonBar() async {
    List<FlatButton> _list1 = [];
    tot = await callReadTotal(); //Receives length to make the loop.
    getListCauses(); //Calls Firebase to use arrCauses = List () for child: Text
    for (int i = 1; i <= tot; i++) {
      _list1.add(
        FlatButton(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
            side: BorderSide(color: Color.fromRGBO(150, 1, 1, 1)),
          ),
          splashColor: Color.fromRGBO(150, 1, 1, 1),
          onPressed: () => {
            setChoice(i),
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => CausesList()),
            ),
          },
          child: Text(
            arrCauses[i],
            style: TextStyle(
              color: Color.fromRGBO(150, 1, 1, 1),
              fontSize: 20,
              fontFamily: 'Balsamiq_Sans',
            ),
          ),
        ),
      );
    }
    _buttonBar = _list1;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Platform.isIOS
        ? CupertinoPageScaffold(child: null)
        : Scaffold(
            appBar: AppBar(
              title: Text(
                'ICare',
                style: TextStyle(
                  color: Color.fromRGBO(150, 1, 1, 1),
                  fontSize: 40,
                  fontFamily: 'Balsamiq_Sans',
                  fontWeight: FontWeight.w500,
                ),
              ),
              flexibleSpace: Image(
                image: AssetImage('assets/images/solidariedade.png'),
                color: Color.fromRGBO(255, 200, 200, 0.45),
                colorBlendMode: BlendMode.modulate,
                fit: BoxFit.cover,
              ),
            ),
            body: Stack(
              children: <Widget>[
                Container(
                  child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: ButtonBar(
                      children: _buttonBar,
                      alignment: MainAxisAlignment.center,
                    ),
                  ),
                ),
              ],
            ),
          );
  }
}

By using FutureBuilder

import 'package:flutter/material.dart';

class ThemesList extends StatelessWidget {
  Future<List<FlatButton>> _getButtonBar(context) async {
    List<FlatButton> _list1 = [];
    tot = await callReadTotal(); //Receives length to make the loop.
    getListCauses(); //Calls Firebase to use arrCauses = List () for child: Text
    for (int i = 1; i <= tot; i++) {
      _list1.add(
        FlatButton(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
            side: BorderSide(color: Color.fromRGBO(150, 1, 1, 1)),
          ),
          splashColor: Color.fromRGBO(150, 1, 1, 1),
          onPressed: () => {
            setChoice(i),
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => CausesList()),
            ),
          },
          child: Text(
            arrCauses[i],
            style: TextStyle(
              color: Color.fromRGBO(150, 1, 1, 1),
              fontSize: 20,
              fontFamily: 'Balsamiq_Sans',
            ),
          ),
        ),
      );
    }
    return _list1;
  }

  @override
  Widget build(BuildContext context) {
    return Platform.isIOS
        ? CupertinoPageScaffold(child: null)
        : Scaffold(
            appBar: AppBar(
              title: Text(
                'ICare',
                style: TextStyle(
                  color: Color.fromRGBO(150, 1, 1, 1),
                  fontSize: 40,
                  fontFamily: 'Balsamiq_Sans',
                  fontWeight: FontWeight.w500,
                ),
              ),
              flexibleSpace: Image(
                image: AssetImage('assets/images/solidariedade.png'),
                color: Color.fromRGBO(255, 200, 200, 0.45),
                colorBlendMode: BlendMode.modulate,
                fit: BoxFit.cover,
              ),
            ),
            body: Stack(
              children: <Widget>[
                Container(
                  child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: FutureBuilder<List<FlatButton>>(
                        future: _getButtonBar(context),
                        builder: (context,
                            AsyncSnapshot<List<FlatButton>> snapshot) {
                          switch (snapshot.connectionState) {
                            case ConnectionState.waiting:
                              return Text('Loading....');
                              break;
                            default:
                              if (snapshot.hasError)
                                return Text('Error: ${snapshot.error}');
                              else
                                return ButtonBar(
                                  children: snapshot.data,
                                  alignment: MainAxisAlignment.center,
                                );
                          }
                        }),
                  ),
                ),
              ],
            ),
          );
  }
}