firebase - 有条件的图像
问题描述
我在构建小部件时遇到了这个小问题。我希望它根据 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);
}
});
}
}
解决方案
您不能调用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,
),
),
);
}
},
),
],
),
),
);
}
推荐阅读
- javascript - Gatsby/React: how to create clean fallback for non JS users?
- javascript - 反应:在新标签页中打开链接
- amazon-web-services - 在 GCP 中指向并使用子域
- apache-kafka - Kafka:消费者可以在所有副本同步之前读取消息吗?
- mysql - 在不使用 SQL 字符串的情况下使用 Python 写入 MySQL
- css - 指定宽度时将高度设置为自动有什么意义?
- python - 动画中的networkx图形变化形式
- c# - 按名称查找 C# 线程
- javascript - setInterval() 在代码执行时暂停
- python-3.x - 从网站的 ap 标签内的多个同名 span 元素中抓取 span 文本