Flutter有状态的小部件状态未初始化

Question

I'm making a command and control application using Flutter, and have come across an odd problem. The main status page of the app shows a list of stateful widgets, which each own a WebSocket connection that streams state data from a connected robotic platform. This worked well when the robots themselves were hardcoded in. However now that I'm adding them dynamically (via barcode scans), only the first widget is showing status.

Further investigation using the debugger shows that this is due to the fact that a state is only getting created for the first widget in the list. Subsequently added widgets are successfully getting constructed, but are not getting a state. Meaning that createState is not getting called for anything other than the very first widget added. I checked that the widgets themselves are indeed being added to the list and that they each have unique hash codes. Also, the IOWebSocketChannel's have unique hash codes, and all widget data is correct and unique for the different elements in the list.

Any ideas as to what could be causing this problem?

Code for the HomePageState:

class HomePageState extends State<HomePage> {
  String submittedString = "";
  StateContainerState container;
  List<RobotSummary> robotList = [];
  List<String> robotIps = [];
  final GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey<ScaffoldState>();

  void addRobotToList(String ipAddress) {
    var channel = new IOWebSocketChannel.connect('ws://' + container.slsData.slsIpAddress + ':' + container.slsData.wsPort);
    channel.sink.add("http://" + ipAddress);
    var newConnection = new RobotSummary(key: new UniqueKey(), channel: channel, ipAddress: ipAddress, state: -1, fullAddress: 'http://' + container.slsData.slsIpAddress + ':' + container.slsData.wsPort,);
    scaffoldKey.currentState.showSnackBar(new SnackBar(
      content: new Text("Adding robot..."), duration: Duration(seconds: 2),));
    setState(() {
      robotList.add(newConnection);
      robotIps.add(ipAddress);
      submittedString = ipAddress;
    });
  }

  void _onSubmit(String val) {

    // Determine the scan data that was entered
    if(Validator.isIP(val)) {
      if(ModalRoute.of(context).settings.name == '/') {
        if (!robotIps.contains(val)) {
          addRobotToList(val);
        }
        else {
          scaffoldKey.currentState.showSnackBar(new SnackBar(
            content: new Text("Robot already added..."), duration: Duration(seconds: 5),));
        }
      }
      else {
        setState(() {
          _showSnackbar("Robot scanned. Go to page?", '/');
        });
      }
    }
    else if(Validator.isSlotId(val)) {
      setState(() {
        _showSnackbar("Slot scanned. Go to page?", '/slots');
      });
    }
    else if(Validator.isUPC(val)) {
      setState(() {
        _showSnackbar("Product scanned. Go to page?", '/products');
      });
    }
    else if (Validator.isToteId(val)) {

    }
  }

  @override
  Widget build(BuildContext context) {
    container = StateContainer.of(context);
    return new Scaffold (
      key: scaffoldKey,
      drawer: Drawer(
        child: CategoryRoute(),
      ),
      appBar: AppBar(
        title: Text(widget.topText),  
      ),
      bottomNavigationBar: BottomAppBar(
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(icon: Icon(Icons.camera_alt), onPressed: scan,),
            IconButton(icon: Icon(Icons.search), onPressed: _showModalSheet,),
          ],
        ),
      ),
      body: robotList.length > 0 ? ListView(children: robotList) : Center(child: Text("Please scan a robot.", style: TextStyle(fontSize: 24.0, color: Colors.blue),),),
    );
  }

  void _showModalSheet() {
    showModalBottomSheet(
        context: context,
        builder: (builder) {
          return _searchBar(context);
        });
  }

  void _showSnackbar(String message, String route) {
    scaffoldKey.currentState.showSnackBar(new SnackBar(
      content: new Text(message),
      action: SnackBarAction(
        label: 'Go?', 
        onPressed: () {
          if (route == '/') {
            Navigator.popUntil(context,ModalRoute.withName('/'));
          }
          else {
            Navigator.of(context).pushNamed(route); 
          }
        },),
      duration: Duration(seconds: 5),));
  }

  Widget _searchBar(BuildContext context) {
    return new Scaffold(
      body: Container(
      height: 75.0,
      color: iam_blue,
      child: Center(
      child: TextField(
        style: TextStyle (color: Colors.white, fontSize: 18.0),
        autofocus: true,
        keyboardType: TextInputType.number,
        onSubmitted: (String submittedStr) {
          Navigator.pop(context);
          _onSubmit(submittedStr);
        },
        decoration: new InputDecoration(
        border: InputBorder.none,
        hintText: 'Scan a tote, robot, UPC, or slot',
        hintStyle: TextStyle(color: Colors.white70),
        icon: const Icon(Icons.search, color: Colors.white70,)),
      ),
    )));
  }

  Future scan() async {
    try {
      String barcode = await BarcodeScanner.scan();
      setState(() => this._onSubmit(barcode));
    } on PlatformException catch (e) {
      if (e.code == BarcodeScanner.CameraAccessDenied) {
        setState(() {
          print('The user did not grant the camera permission!');
        });
      } else {
        setState(() => print('Unknown error: $e'));
      }
    } on FormatException{
      setState(() => print('null (User returned using the "back"-button before scanning anything. Result)'));
    } catch (e) {
      setState(() => print('Unknown error: $e'));
    }
  }
}

Code snippet for the RobotSummary class:

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
import 'package:test_app/genericStateSummary_static.dart';
import 'dart:convert';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:test_app/StateDecodeJsonFull.dart';
import 'dart:async';
import 'package:test_app/dataValidation.dart';

class RobotSummary extends StatefulWidget {
  final String ipAddress;
  final String _port = '5000';
  final int state;
  final String fullAddress;
  final WebSocketChannel channel;

  RobotSummary({
    Key key,
    @required this.ipAddress,
    @required this.channel,
    this.state = -1,
    this.fullAddress = "http://10.1.10.200:5000",
  }) :  assert(Validator.isIP(ipAddress)),
        super(key: key);

  @override
  _RobotSummaryState createState() => new _RobotSummaryState();
}

class _RobotSummaryState extends State<RobotSummary> {
  StreamController<StateDecodeJsonFull> streamController;

  @override
  void initState() {
    super.initState();
    streamController = StreamController.broadcast();
  }

  @override
  Widget build(BuildContext context) {

    return new Padding(
      padding: const EdgeInsets.all(20.0),
      child: new StreamBuilder(
        stream: widget.channel.stream,
        builder: (context, snapshot) {
          //streamController.sink.add('{"autonomyControllerState" : 3,  "pickCurrentListName" : "69152", "plannerExecutionProgress" : 82,   "pickUpcCode" : "00814638", "robotName" : "Adam"}');
          return getStateWidget(snapshot);
        },
      ),
    );
  }

  @override
  void dispose() {
    streamController.sink.close();
    super.dispose();
  }
}

Answer 1

Based on what Jacob said in his initial comments, I came up with a solution that works and is a combination of his suggestions. The code solution he proposed above can't be implemented (see my comment), but perhaps a modification can be attempted that takes elements of it. For the solution I'm working with now, the builder call for HomePageState becomes as follows:

Widget build(BuildContext context) {
    List<RobotSummary> tempList = [];
    if (robotList.length > 0) {
      tempList.addAll(robotList);
    }
    container = StateContainer.of(context);
    return new Scaffold (
      key: scaffoldKey,
      drawer: Drawer(
        child: CategoryRoute(),
      ),
      appBar: AppBar(
        title: Text(widget.topText),  
      ),
      bottomNavigationBar: BottomAppBar(
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(icon: Icon(Icons.camera_alt), onPressed: scan,),
            IconButton(icon: Icon(Icons.search), onPressed: _showModalSheet,),
          ],
        ),
      ),
      body: robotList.length > 0 ? ListView(children: tempList) : Center(child: Text("Please scan a robot.", style: TextStyle(fontSize: 24.0, color: iam_blue),),),
    );
  }

Answer 2

The problem is you are holding on to the StatefulWidget s between build calls, so their state is always the same. Try separating RobotSummary business logic from the view logic. Something like

class RobotSummary {
  final String ipAddress;
  final String _port = '5000';
  final int state;
  final String fullAddress;
  final WebSocketChannel channel;
  StreamController<StateDecodeJsonFull> streamController;

  RobotSummary({
    @required this.ipAddress,
    @required this.channel,
    this.state = -1,
    this.fullAddress = "http://10.1.10.200:5000",
  }) :  assert(Validator.isIP(ipAddress));

  void init() => streamController = StreamController.broadcast();
  void dispose() => streamController.sink.close();
}

And then in your Scaffold body:

...

body: ListView.builder(itemCount: robotList.length, itemBuilder: _buildItem)

...

Widget _buildItem(BuildContext context, int index) {
  return new Padding(
      padding: const EdgeInsets.all(20.0),
      child: new StreamBuilder(
        stream: robotList[index].channel.stream,
        builder: (context, snapshot) {
          //streamController.sink.add('{"autonomyControllerState" : 3,  "pickCurrentListName" : "69152", "plannerExecutionProgress" : 82,   "pickUpcCode" : "00814638", "robotName" : "Adam"}');
          return getStateWidget(snapshot); // not sure how to change this.
        },
      ),
    );
}