如何从颤动的另一个飞镖文件中获取地图长度？

Question

This is my code for main.dart file and map.dart file. Here I am trying to get the length of the Map<> contact from map.dart file in main.dart file after removing some keys from the Map<> contact by clicking "Remove element from map" Button in map.dart file. I created an object of class MyMap from map.dart in main.dart file to get the data of the Map. But I am getting the initial value of mapLength which is 0. But I expect that the output should be the length of the Map<> contact by clicking the raised button "Get length of map" in main.dart.

main.dart

import 'package:flutter/material.dart';
import 'package:passing_length/map.dart';

void main() => runApp(new MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  var mapPage = new MyMap();


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Center(
            child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Padding(
              padding: new EdgeInsets.all(20.00),
              child: new RaisedButton(
                onPressed: () {
                  print(mapPage.mapLength());
                },
                child: new Text("Get length of map"),
              ),
            ),
            new Padding(
              padding: new EdgeInsets.all(20.00),
              child: new RaisedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    new MaterialPageRoute(builder: (context) => new MyMap()),
                  );
                },
                child: new Text("Goto new Page"),
              ),
            ),
          ],
        )));
  }
}

map.dart

class MyMap extends StatefulWidget {
  @override
  _MyMapState createState() => new _MyMapState();

  int mapLength() {
    return new _MyMapState().mapLength;
  }
}

class _MyMapState extends State<MyMap> {
  Map<String, int> contact = {
    "AAAA": 1111,
    "BBBB": 2222,
    "CCCC": 3333,
    "DDDD": 4444,
    "EEEE": 5555,
    "FFFF": 6666,
    "GGGG": 7777,
  };

  int mapLength = 0;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "My Map",
      home: new Scaffold(
          appBar: new AppBar(title: new Text("My Map")),
          body: new Center(
              child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Padding(
                padding: new EdgeInsets.all(20.00),
                child: new RaisedButton(
                  onPressed: () {
                    contact.remove(contact.keys.elementAt(contact.length - 1));
                    mapLength = contact.length;
                    print(mapLength);
                  },
                  child: new Text("Remove element from map"),
                ),
              ),
              new Padding(
                padding: new EdgeInsets.all(20.00),
                child: new RaisedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: new Text("Go Back"),
                ),
              ),
            ],
          ))),
    );
  }
}

Answer 1

To understand why this doesn't work, I think you need a better understanding of how StatefulWidgets, States, and Stateless widgets work in Flutter. I'd recommend going through Flutter's getting started codelab, especially the part on stateful widgets , and maybe spending a bit of time reading the stateful widget and state documentation.

But the TLDR is as follows - the class that inherits StatefulWidget should pretty much only be used to store things passed in through the constructor, and should be immutable. The class that inherits State can then access these parameters through widget.finalMemberVariable . The idea behind this is that every time a new build in the enclosing widget is done, a new StatefulWidget is created, but the associated State is probably persistent across builds. You should never be trying to pull information from things down the widget tree, unless you use GlobalKeys , but they don't really apply when you're using different pages and a navigator.

Also, if you just read your code you'll see that mapLength is set to 0 and is not changed until the build function - when you're calling return new _MyMapState().mapLength; you're creating a new State which has not built yet, and so of course the map length is 0.

It's not 100% clear what you're trying to do here, but I'll take a guess. You have a home page with a contacts button. When a user taps on it, they get taken to the contacts page where they can remove contacts. When you get back to the main page, you want to get the number of contacts the user still has.

First off, I'd suggest using a database or something persistent to store the contacts. That way you can add/remove/edit them and they will persist past the app closing. And that way you can just use whatever way of accessing the database you create from both the home page and the contacts page - you query for number on the home page and do actual database manipulations on the contacts page. A fairly easy-to-use plugin to use is sqflite , although there other things like Firebase you could use.

The other option is that if you only want the number of contacts after they've popped that page, and you don't want your main page to access the number of contacts, you could pass it back when you do the Navigator.pop ie Navigator.pop(context, contact.length) from the State. In your main page, you'd want to save the result of the Navigator.push(...) either using Futures (something like Navigator.push(...).then((result) { setState(() { this.num = result }) }) ) or using async/await.

All in all though, it seems as though you're not quite clear about how to actually use Flutter. I'd advise starting by following some of the tutorials and codelabs on the flutter website before trying to develop your own app as they'll give you a better idea of how to do this kind of stuff.

Answer 2

I'd second what @rmtmckenzie has mentioned, here's your code edited to show how to pass the modified contacts map between the two pages:

main.dart

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  Map<String, int> _contact = new Map();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Padding(
              padding: new EdgeInsets.all(20.00),
              child: new RaisedButton(
                onPressed: () {
                  print(_contact.length);
                },
                child: new Text("Get length of map"),
              ),
            ),
            new Padding(
              padding: new EdgeInsets.all(20.00),
              child: new RaisedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    new MaterialPageRoute(builder: (context) => new MyMap()),
                  ).then((contact) {
                    setState(() => _contact = contact);
                  });
                },
                child: new Text("Goto new Page"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

map.dart

class MyMap extends StatefulWidget {
  @override
  _MyMapState createState() => new _MyMapState();
}

class _MyMapState extends State<MyMap> {
  Map<String, int> contact = {
    "AAAA": 1111,
    "BBBB": 2222,
    "CCCC": 3333,
    "DDDD": 4444,
    "EEEE": 5555,
    "FFFF": 6666,
    "GGGG": 7777,
  };

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "My Map",
      home: new Scaffold(
        appBar: new AppBar(title: new Text("My Map")),
        body: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Padding(
                padding: new EdgeInsets.all(20.00),
                child: new RaisedButton(
                  onPressed: () {
                    contact.remove(contact.keys.elementAt(contact.length - 1));
                  },
                  child: new Text("Remove element from map"),
                ),
              ),
              new Padding(
                padding: new EdgeInsets.all(20.00),
                child: new RaisedButton(
                  onPressed: () {
                    Navigator.pop(context, contact);
                  },
                  child: new Text("Go Back"),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

To conclude, I would recommend having a look at flutter_flux or a similar plugin which allows you to manage state throughout your application without having to continuously pass values between pages. Example applications can be found in the linked repo, or here .