passing a listView to another screen

Question

I need help passing a list view to another screen.

I'm new to flutter and dart, but familiar with programming in general. I figured out how to create a list from an api call. However, my current code, when I press a button, it displays on the screen that I'm currently on. I would like to pass it to another screen to show in a list (there will be text fields on the home page that will alter the url to fetch data from). What I guess I'm trying to do logically is when a user presses a button, it calls fetch data, builds my list and displays it on a different screen.

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

void main(){
  runApp(
      MaterialApp(
      home: MyApp(),
  ),
  );
}
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeScreen();
  }
}

//List is here, had to make global so I could access in 2 widgets
List<TrailModel> trails=[];
class HomeScreen extends State<MyApp> {

  Future<List<TrailModel>> fetchData() async {
    var response = await get('https://www.hikingproject.com/data/get-trails?lat=40.0274&lon=-105.2519&maxDistance=10&key=200419778-6a46042e219d019001dd83b13d58aa59');
    final trailModels = List<TrailModel>();
    final trailModel = TrailModel.fromJson(json.decode(response.body));
    trails.add(trailModel);
    /*setState(() {
      trails.add(trailModel);
    });*/
    return trailModels;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("HikeLocator"),
          ),
          body:
          new RaisedButton(
              child: Text("click me"),

              onPressed: () async {
                final trails = await fetchData();
                Navigator.push(
                  context,
                  new MaterialPageRoute(builder: (context) => new ListScreen(trails)),

                );
              }
          ),

    )
    );
    }
}
//Display ListView in here
class ListScreen extends StatelessWidget {
  final List<TrailModel> trails;
  ListScreen(this.trails);

  //ListScreen(this.trails);
  @override
  Widget build (BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("This is where the list lies"),
        ),
        body: TrailList(trails),
    );
  }
}

//create ListView here which I want displayed on 2nd page
class TrailList extends StatelessWidget {
  final List<TrailModel> trails;

  TrailList(this.trails);

  Widget build(context) {
    return ListView.builder(
        itemCount: trails.length,
        itemBuilder: (context, int index) {
      String myText =  trails[index].trails.toString();

      var splitString = myText.split("\, type");
      var splitString2 = splitString[0];
      var splitString3 = splitString2.split("name: ");
      String name = splitString3[1];

      splitString = myText.split("\, name");
      splitString2 = splitString[0];
      splitString3 = splitString2.split("id: ");
      String id = splitString3[1];

      splitString = myText.split("\, conditionStatus");
      splitString2 = splitString[0];
      splitString3 = splitString2.split("latitude: ");
      String latitude = splitString3[1];
      splitString = myText.split("\, latitude");
      splitString2 = splitString[0];
      splitString3 = splitString2.split("longitude: ");
      String longitude = splitString3[1];
      splitString = myText.split("\, url");
      splitString2 = splitString[0];
      splitString3 = splitString2.split(" location: ");
      String location = splitString3[1];


      return Text("name: $name,\n location: $location, \nlatitude: $latitude, \nlongitude: $longitude\n");

        },
    );
  }
}
class TrailModel{
  Object trails;
  TrailModel(this.trails);
  TrailModel.fromJson(Map<String, dynamic> parsedJson) {
    trails = parsedJson['trails'];

  }
}

Ever since I changed some of my widgets to Stateful, my button click to go to the next page is no longer working. My attempt to pass the data was to pass in the trails variable which is a list to the next page from Home Screen, create constructor in List Screen and then create ListView there. However, without being able to go to the next page. I have no idea if it's working. . I initially wasn't going to post all of my code, but I think it helps to see the interaction between classes with the full picture. Thanks for any help

Answer 1

You can use async/await method in RaisedButton's onPressed method(Note: adding async keyword is required). So I recommend you to modify your fetchMethod() and onPressed method to do asynchronous processing. And you should also modify List Screen to get trails in constructor.

I hope this will help you!

fetchData() example:

Future<List<TrailModel>> fetchData() async {
  final response = await get('url_here');
  final trailModels = List<TrailModel>();
  final trailModel = TrailModel.fromJson(json.decode(response.body));
  trailModels.add(trailModel);
  return trailModels;
}

RaisedButton example:

RaisedButton(
  child: Text("click me"),
  onPressed: () async {
    final trails = await fetchData();
    Navigator.push(
      ctxt,
      new MaterialPageRoute(builder: (ctxt) => new ListScreen(trails)),
    );
  },
),

ListScreen example:

class ListScreen extends StatelessWidget {
  final List<TrailModel> trails;

  ListScreen(this.trails);

  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("This is where the list lies"),
      ),
      body: TrailList(trails),
    );
  }
}

complete example:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeScreen();
  }
}

//List is here, had to make global so I could access in 2 widgets
List<TrailModel> trails = [];

class HomeScreen extends State<MyApp> {

  Future<List<TrailModel>> fetchData() async {
    final response = await get('url_here');
    final trailModels = List<TrailModel>();
    final trailModel = TrailModel.fromJson(json.decode(response.body));
    trailModels.add(trailModel);
    return trailModels;
  }

  @override
  Widget build(BuildContext ctxt) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("HikeLocator"),
        ),
        body:
        new RaisedButton(
            child: Text("click me"),

            onPressed: () async {
              final trails = await fetchData();
              Navigator.push(
                ctxt,
                new MaterialPageRoute(builder: (ctxt) => new ListScreen(trails)),

              );
            }
        ),
      ),
    );
  }
}

//Display ListView in here
class ListScreen extends StatelessWidget {
  final List<TrailModel> trails;

  ListScreen(this.trails);
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("This is where the list lies"),
        ),
        body:TrailList(trails),
    );
  }
}

//create ListView here which I want displayed on 2nd page
class TrailList extends StatelessWidget {
  final List<TrailModel> trails;

  TrailList(this.trails);

  Widget build(context) {
    return ListView.builder(
      itemCount: trails.length,
      itemBuilder: (context, int index) {
        String myText = trails[index].trails.toString();

        var splitString = myText.split("\, type");
        var splitString2 = splitString[0];
        var splitString3 = splitString2.split("name: ");
        String name = splitString3[1];

        splitString = myText.split("\, name");
        splitString2 = splitString[0];
        splitString3 = splitString2.split("id: ");
        String id = splitString3[1];

        splitString = myText.split("\, conditionStatus");
        splitString2 = splitString[0];
        splitString3 = splitString2.split("latitude: ");
        String latitude = splitString3[1];
        splitString = myText.split("\, latitude");
        splitString2 = splitString[0];
        splitString3 = splitString2.split("longitude: ");
        String longitude = splitString3[1];
        splitString = myText.split("\, url");
        splitString2 = splitString[0];
        splitString3 = splitString2.split(" location: ");
        String location = splitString3[1];


        return Text(
            "name: $name,\n location: $location, \nlatitude: $latitude, \nlongitude: $longitude\n");
      },
    );
  }
}

class TrailModel {
  Object trails;

  TrailModel(this.trails);

  TrailModel.fromJson(Map<String, dynamic> parsedJson) {
    trails = parsedJson['trails'];
  }
}