Flutter : Refresh same screen with different data and back button

Question

I have recently started exploring flutter few days back. I have created a list which has some rows. Some rows has the Child data.

Right now screen has customised button on the top.

final topAppBar = AppBar(
  elevation: 0.1,
  backgroundColor: Color.fromRGBO(0, 113, 188, 1.0),
  title: Text("RESOURCES", style: TextStyle(
    color: Colors.white,
    fontFamily: 'Raleway-ExtraBold',
    fontWeight: FontWeight.w900,
    fontSize: 20.0,
  ),),
  leading: IconButton(
    icon: new Image.asset('assets/images/settings.png'),
  ),
);

When user clicks on those rows I want to just refresh the list with child data and push effect with updating “back button” on the top.

The below code is able to navigate the screen with push effect but how can we maintain the state of application with data as well as back button.

ListTile makeResourcesListTile(Resources resources) => ListTile(
      contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
      title: Text(
        resources.title,
        style: TextStyle(
          color: Colors.white,
          fontSize: 14.0,
          fontWeight: FontWeight.bold,
          fontFamily: "Raleway-Bold",
        ),
      ),
      trailing:
          Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0),
      onTap: () {

            Navigator.pushNamed(context, ‘/listScreen’);



      },
    );

Please suggest. Thank you in advance

Answer 1

I think you should have a look at: Passing data between screens in Flutter

Is this what you are looking for?

LE:

If you just want to change data source for the list and add a back button, please try this code:

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  bool showDetails = false;
  String title = 'Resources';

  List<Resource> resources = [
    new Resource('1', 'one', null),
    new Resource('2', 'two', [new Resource('Child', 'Child', null)]),
    new Resource('3', 'three', null),
    new Resource('4', 'four', [
      new Resource('Child', 'Child', null),
      new Resource('Child', 'Child', null)
    ]),
    new Resource('5', 'five', null)
  ];
  List<Resource> currentSource;

  @override
  Widget build(BuildContext context) {
    if (!showDetails) {
      currentSource = resources;
    }

    Widget showResourcesList() {
      return new ListView.builder(
          itemCount: currentSource.length,
          itemBuilder: (BuildContext context, int index) {
            return new ListTile(
                title: Center(
                  child: Text(currentSource[index].name),
                ),
                onTap: () {
                  setState(() {
                    if (currentSource[index].children != null) {
                      title = 'Children for ' + currentSource[index].name;
                      currentSource = resources[index].children;
                      showDetails = true;
                    }
                  });
                });
          });
    }

    Widget showBackButton() {
      return IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {
          setState(() {
            showDetails = false;
            currentSource = resources;
            title = 'Resources';
          });
        },
      );
    }

    Widget showSettingsButton() {
      return IconButton(
        icon: Icon(Icons.settings),
        onPressed: () {},
      );
    }

    return Scaffold(
      appBar: AppBar(
        elevation: 0.1,
        backgroundColor: Color.fromRGBO(0, 113, 188, 1.0),
        title: Text(
          title,
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w900,
            fontSize: 20.0,
          ),
        ),
        leading: showDetails ? showBackButton() : showSettingsButton(),
      ),
      body: showResourcesList(),
    );
  }
}

class Resource {
  String name;
  String description;

  List<Resource> children;

  Resource(this.name, this.description, this.children);
}

I used a bool variable (showDetails) which represents the app state and I change the data source when tapping on a listTile.