如何在不按任何按钮的情况下自动在 Flutter Android 应用程序的 ListView 中实现 AlertDialog 框？

Question

我正在开发一个项目，我在其中创建了一个 RestApi，其中包含汽车数据，并且每 3 秒更新一次。汽车在 4 条道路的交界处，现在当汽车驶向由 id 表示的特定道路时，"is_green" 将变为 true 并且在 ListView -> CircleAvtar 将变为绿色，表示汽车是否来了 现在我的问题是 我如何实现一个 AlertDialog 框，当 bool isGreen = userData[index]["is_green"] 包含值 true 时，它会在不按任何按钮的情况下自动弹出。我是 flutter 的新手，所以我不知道该怎么做......请帮帮我

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData.dark(),
    home: Home(),
  ));
}

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Map data;
  List userData;
  Future getData() async {
    print("updating data...");
    http.Response response = await http.get("http://10.100.101.154:3000/xd");
    data = jsonDecode(response.body);
    setState(() {
      userData = data["data"];
    });
  }

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

    Timer.periodic(new Duration(seconds: 3), (timer) {
      getData();
    });

  }

  Color getColor(bool isGreen) {
    if (isGreen == true) {
      return Colors.green;
    } else {
      return Colors.red;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SGH'),
        centerTitle: true,
      ),
      body: ListView.builder(
          itemCount: userData == null ? 0 : userData.length,
          itemBuilder: (BuildContext context, int index) {
            bool isGreen = userData[index]["is_green"];
            return Card(
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: CircleAvatar(
                      backgroundColor: getColor(isGreen),
                      minRadius: 6,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: Wrap(
                      direction: Axis.horizontal,
                      children: <Widget>[
                        Text(
                          "Road Id = ${userData[index]["id"]} \CarInQueue = ${userData[index]["car_que"]} \nIsGreen ? --> ${userData[index]["is_green"]} ",
                          style: TextStyle(
                              fontSize: 20, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          }),
    );
  }
}

Answer 1

只需在更新汽车列表时检查一下...然后显示 Dialog，其中包含有关哪辆汽车正在通过的信息

Future getData() async {
    print("updating data...");
    http.Response response = await http.get("http://10.100.101.154:3000/xd");
    data = jsonDecode(response.body);
    setState(() {
      userData = data["data"];
    });
    checkDialog();
  }


checkDialog(){
var item = userData.where((car)=>car["is_green"]).first;//this is the first car where is_green is true
if(item!=null){
        showDialog(context:context,
        builder:(BuildContext context)=>AlertDialog( 
          //.... content here
         ));
}
}

如何在不按任何按钮的情况下自动在 Flutter Android 应用程序的 ListView 中实现 AlertDialog 框？

How can I implement AlertDialog box inside ListView in Flutter Android app automatically without pressing any button?

flutter

flutter-listview

flutter-alertdialog