firebase - 有条件的图像

Question

我在构建小部件时遇到了这个小问题。我希望它根据 firebase 结果显示图像，但我无法调用小部件imagetniveis (context)。结果是“未引用 'imagetniveis' 声明”。

还有另一种方法可以做我想做的事情吗？或者我的小部件做错了什么？

Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Nivel"),
          ),
          body: Container(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 30.0),
                  child: SizedBox(
                    width: 400.0,
                    height: 70.0,
                    child: FloatingActionButton.extended(
                      onPressed: () {
                        printFirebase();
                      },
                      label: Text(
                        'VIZUALIZAR NIVEL DO RIO',
                        textScaleFactor: 2,
                      ),
                      backgroundColor: Color(0xFF17A0A6),
                      foregroundColor: Colors.white,
                    ),
                  ),
                ),
                **imagemtniveis(context)**
              ],
            ),
          ),
        );
      }
    
      printFirebase() async {
        databaseRef.child('Nivel/').once().then((DataSnapshot snapshot) {
          String a = snapshot.value.toString();
    
          String baixo = '1';
          String medio = '2';
          String alto = '3';
    
          Widget imagemtniveis(BuildContext context) {
            Widget child;
            print('${snapshot.value}');
    
            if (a == alto) {
              child = Padding(
                padding: const EdgeInsets.only(top: 10, left: 20),
                child: Image.asset(
                  'assets/alto.png',
                  height: 300,
                  fit: BoxFit.fill,
                  
                ),
              );
            } else if (a == medio) {
              child = Padding(
                padding: const EdgeInsets.only(top: 10, left: 20),
                child: Image.asset(
                  'assets/medio.png',
                  height: 300,
                  fit: BoxFit.fill,
                ),
              );
            } else {
              child = Padding(
                padding: const EdgeInsets.only(top: 10, left: 20),
                child: Image.asset(
                  'assets/baixo.png',
                  height: 300,
                  fit: BoxFit.fill,
                ),
              );
            }
            return new Container(child: child);
          }
        });
      }
    }

Answer 1

您不能调用imagemtniveis，因为它是在内部定义的printFirebase。因此，我添加了一个未来，从数据库中获取数据并构建您的小部件。

请多多包涵，我对实时数据库并不完美。

@override
build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Nivel"),
    ),
    body: Container(
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 30.0),
            child: SizedBox(
              width: 400.0,
              height: 70.0,
              child: FloatingActionButton.extended(
                onPressed: () {
                  printFirebase();
                },
                label: Text(
                  'VIZUALIZAR NIVEL DO RIO',
                  textScaleFactor: 2,
                ),
                backgroundColor: Color(0xFF17A0A6),
                foregroundColor: Colors.white,
              ),
            ),
          ),
          FutureBuilder<DataSnapshot>(
            future: databaseRef.child('Nivel/').once(),
            builder: (BuildContext context, DataSnapshot snapshot) {
              if (snapshot.hasError) return Message();
              if (snapshot.connectionState == ConnectionState.waiting)
                return Loading();

              print('${snapshot.data}');
              print('${snapshot.data.value}');
              String a = snapshot.data.value.toString();

              String baixo = '1';
              String medio = '2';
              String alto = '3';

              if (a == alto) {
                return Container(
                  child: Padding(
                    padding: const EdgeInsets.only(top: 10, left: 20),
                    child: Image.asset(
                      'assets/alto.png',
                      height: 300,
                      fit: BoxFit.fill,
                    ),
                  ),
                );
              } else if (a == medio) {
                return Container(
                  child: Padding(
                    padding: const EdgeInsets.only(top: 10, left: 20),
                    child: Image.asset(
                      'assets/medio.png',
                      height: 300,
                      fit: BoxFit.fill,
                    ),
                  ),
                );
              } else {
                return Container(
                  child: Padding(
                    padding: const EdgeInsets.only(top: 10, left: 20),
                    child: Image.asset(
                      'assets/baixo.png',
                      height: 300,
                      fit: BoxFit.fill,
                    ),
                  ),
                );
              }
            },
          ),
        ],
      ),
    ),
  );
}