title: Flutter json navigation
body: <p>i have two pages that recieve json data from different urls, but using the same api. I would like to navigate from a gridview selection from the first page to the respective list of data under that selection to the next page. Please help me on how i can go about that.</p>
  <p>Code for first page:</p>
  <pre><code>import 'package:best_flutter_ui_templates/que/branch-screen.dart';
  import 'package:best_flutter_ui_templates/que/que_app_theme.dart';
  import 'package:best_flutter_ui_templates/que/models/category.dart';
  import 'package:best_flutter_ui_templates/main.dart';
  import 'package:best_flutter_ui_templates/que/que_map.dart';
  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  import 'package:provider/provider.dart';
  import 'dart:convert';
  import 'dart:async';
  import 'map_search.dart';
  import 'que_map.dart';
  import 'models/branches.dart';
  import 'services/places_service.dart';
  import 'que_map.dart';
  
  class CompanyListView extends StatefulWidget {
    final companyData;
    const CompanyListView({Key key, this.callBack, this.companyData})
        : super(key: key);
  
    final Function callBack;
    @override
    _CompanyListViewState createState() =&gt; _CompanyListViewState();
  }
  
  class _CompanyListViewState extends State&lt;CompanyListView&gt;
      with TickerProviderStateMixin {
    AnimationController animationController;
    final String url = &quot;https://que-api.herokuapp.com/companies_extended&quot;;
    List data;
    List branches;
  
    get places =&gt; Provider.of&lt;Future&lt;List&lt;Branches&gt;&gt;&gt;(context);
    @override
    void initState() {
      animationController = AnimationController(
          duration: const Duration(milliseconds: 2000), vsync: this);
      super.initState();
      this.getJsonData();
    }
  
    Future&lt;String&gt; getJsonData() async {
      var response = await http.get(
          //Encode the url
          Uri.encodeFull(url),
          //only accept json response
          headers: {&quot;Accept&quot;: &quot;application/json&quot;});
  
      if (mounted)
        setState(() {
          var convertDataToJson = json.decode(response.body);
          data = convertDataToJson['data']['companies'];
          // branches = convertDataToJson['data']['companies']['branches'];
        });
      print(data);
      //print(branches);
      return &quot;Success&quot;;
    }
  
    Future&lt;bool&gt; getData() async {
      await Future&lt;dynamic&gt;.delayed(const Duration(milliseconds: 200));
      return true;
    }
  
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: const EdgeInsets.only(top: 8),
        child: FutureBuilder&lt;String&gt;(
            future: getJsonData(),
            builder: (BuildContext context, AsyncSnapshot&lt;String&gt; snapshot) {
              return GridView(
                padding: const EdgeInsets.all(8),
                physics: const BouncingScrollPhysics(),
                scrollDirection: Axis.vertical,
                children: List&lt;Widget&gt;.generate(
                  places.length,
                  (int index) {
                    final int count = places.length;
                    final Animation&lt;double&gt; animation =
                        Tween&lt;double&gt;(begin: 0.0, end: 1.0).animate(
                      CurvedAnimation(
                        parent: animationController,
                        curve: Interval((1 / count) * index, 1.0,
                            curve: Curves.fastOutSlowIn),
                      ),
                    );
  
                    animationController.forward();
                    return AnimatedBuilder(
                      animation: animationController,
                      builder: (BuildContext context, Widget child) {
                        return FadeTransition(
                          opacity: animation,
                          child: Transform(
                            transform: Matrix4.translationValues(
                                0.0, 50 * (1.0 - animation.value), 0.0),
                            child: InkWell(
                              //splashColor: Colors.transparent,
                              onTap: () {
                                // print(
                                //     &quot;companyid:&quot; + data[index]['id'].toString());
                                Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) =&gt; ListPage(),
                                  ),
                                );
                              },
                              child: SizedBox(
                                height: 280,
                                child: Stack(
                                  alignment: AlignmentDirectional.bottomCenter,
                                  children: &lt;Widget&gt;[
                                    Container(
                                      child: Column(
                                        children: &lt;Widget&gt;[
                                          Expanded(
                                            child: Container(
                                              decoration: BoxDecoration(
                                                color: HexColor('#F8FAFB'),
                                                borderRadius:
                                                    const BorderRadius.all(
                                                        Radius.circular(16.0)),
                                                // border: new Border.all(
                                                //     color: QueAppTheme.notWhite),
                                              ),
                                              child: Column(
                                                children: &lt;Widget&gt;[
                                                  Expanded(
                                                    child: Container(
                                                      child: Column(
                                                        children: &lt;Widget&gt;[
                                                          Padding(
                                                            padding:
                                                                const EdgeInsets
                                                                        .only(
                                                                    top: 16,
                                                                    left: 16,
                                                                    right: 16),
                                                            child: Text(
                                                              (places[index]
                                                                  .name),
                                                              textAlign:
                                                                  TextAlign.left,
                                                              style: TextStyle(
                                                                fontWeight:
                                                                    FontWeight
                                                                        .w600,
                                                                fontSize: 16,
                                                                letterSpacing:
                                                                    0.27,
                                                                color: QueAppTheme
                                                                    .darkerText,
                                                              ),
                                                            ),
                                                          ),
                                                          Padding(
                                                            padding:
                                                                const EdgeInsets
                                                                        .only(
                                                                    top: 8,
                                                                    left: 16,
                                                                    right: 16,
                                                                    bottom: 8),
                                                            child: Row(
                                                              mainAxisAlignment:
                                                                  MainAxisAlignment
                                                                      .spaceBetween,
                                                              crossAxisAlignment:
                                                                  CrossAxisAlignment
                                                                      .center,
                                                            ),
                                                          ),
                                                        ],
                                                      ),
                                                    ),
                                                  ),
                                                  const SizedBox(
                                                    width: 48,
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                          const SizedBox(
                                            height: 48,
                                          ),
                                        ],
                                      ),
                                    ),
                                    Container(
                                      child: Padding(
                                        padding: const EdgeInsets.only(
                                            top: 20, right: 16, left: 16),
                                        child: Container(
                                          decoration: BoxDecoration(
                                            borderRadius: const BorderRadius.all(
                                                Radius.circular(16.0)),
                                            boxShadow: &lt;BoxShadow&gt;[
                                              BoxShadow(
                                                  color: QueAppTheme.grey
                                                      .withOpacity(0.2),
                                                  offset: const Offset(0.0, 0.0),
                                                  blurRadius: 6.0),
                                            ],
                                          ),
                                          child: ClipRRect(
                                            borderRadius: const BorderRadius.all(
                                                Radius.circular(16.0)),
                                            child: AspectRatio(
                                                aspectRatio: 1.0,
                                                child: Image.network(
                                                    (data[index]['logo']))),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        );
                      },
                    );
                  },
                ),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  mainAxisSpacing: 32.0,
                  crossAxisSpacing: 32.0,
                  childAspectRatio: 0.8,
                ),
              );
            }),
      );
    }
  }
  
  class Company {
    final int id;
  
    Company({this.id});
  
    Company.fromJson(Map&lt;dynamic, dynamic&gt; parsedJson) : id = parsedJson['id'];
  }
  </code></pre>
  <p>code for the second page:</p>
  <pre><code>import 'package:best_flutter_ui_templates/que/models/branches.dart';
  import 'package:best_flutter_ui_templates/que/que_app_theme.dart';
  import 'package:best_flutter_ui_templates/que/screens/Selectcentservice.dart';
  import 'package:best_flutter_ui_templates/que/services/geolocator_service.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter_rating_bar/flutter_rating_bar.dart';
  import 'package:google_maps_flutter/google_maps_flutter.dart';
  import 'package:provider/provider.dart';
  import 'package:geolocator/geolocator.dart';
  import 'models/branches.dart';
  import 'company_info_screen.dart';
  import 'models/location.dart';
  import 'services/marker_service.dart';
  import 'services/places_service.dart';
  import 'company_list_view.dart';
  
  class MapSearch extends StatelessWidget {
    final jsonData;
    MapSearch({Key key, this.jsonData}) : super(key: key);
  
    get data =&gt; List(data);
    @override
    Widget build(BuildContext context) {
      final currentPosition = Provider.of&lt;Position&gt;(context);
      final placesProvider = Provider.of&lt;Future&lt;List&lt;Branches&gt;&gt;&gt;(context);
      final geoservice = GeoLocatorService();
      final markerService = MarkerService();
  
      return FutureProvider(
        create: (context) =&gt; placesProvider,
        child: Scaffold(
          body: (currentPosition != null)
              ? Consumer&lt;List&lt;Branches&gt;&gt;(
                  builder: (_, places, __) {
                    var markers = (places != null)
                        ? markerService.getMarkers(places)
                        : List&lt;Marker&gt;();
                    return (places != null)
                        ? Column(
                            children: &lt;Widget&gt;[
                              Container(
                                height: MediaQuery.of(context).size.height / 3,
                                width: MediaQuery.of(context).size.width,
                                child: GoogleMap(
                                  initialCameraPosition: CameraPosition(
                                      target: LatLng(currentPosition.latitude,
                                          currentPosition.longitude),
                                      zoom: 16.0),
                                  zoomGesturesEnabled: true,
                                  markers: Set&lt;Marker&gt;.of(markers),
                                ),
                              ),
                              SizedBox(
                                height: 10.0,
                              ),
                              Expanded(
                                child: ListView.builder(
                                    itemCount: places.length,
                                    itemBuilder: (context, index) {
                                      return FutureProvider(
                                        create: (context) =&gt;
                                            geoservice.getDistance(
                                                currentPosition.latitude,
                                                currentPosition.longitude,
                                                places[index].latitude,
                                                places[index].longitude),
                                        child: Card(
                                          child: ListTile(
                                              title: Text(places[index].name),
                                              subtitle: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: &lt;Widget&gt;[
                                                  SizedBox(
                                                    height: 3.0,
                                                  ),
                                                  Consumer&lt;double&gt;(builder:
                                                      (context, meters, widget) {
                                                    return (meters != null)
                                                        ? Text(
                                                            '${places[index].vicinity}\u00b7 ${(meters / 1000).round()} km')
                                                        : Container();
                                                  }),
                                                ],
                                              ),
                                              trailing: IconButton(
                                                icon: Icon(Icons.arrow_forward),
                                                color: QueAppTheme.nearlyBlue,
                                                onPressed: () {
                                                  Navigator.push(
                                                      context,
                                                      MaterialPageRoute(
                                                          builder: (context) =&gt;
                                                              CompanyInfoScreen()));
                                                },
                                              )),
                                        ),
                                      );
                                    }),
                              )
                            ],
                          )
                        : Center(child: CircularProgressIndicator());
                  },
                )
              : Center(
                  child: CircularProgressIndicator(),
                ),
        ),
      );
    }
  }
  </code></pre>
  <p>api call code for the second page:</p>
  <pre><code>import 'package:best_flutter_ui_templates/que/models/companies.dart';
  import 'package:flutter/material.dart';
  
  import '../models/branches.dart';
  import 'package:http/http.dart' as http;
  //import 'package:provider/provider.dart';
  import 'dart:convert' as convert;
  //import '../company_list_view.dart';
  
  class PlacesService {
    final key = 'AIzaSyD5koOEOmBEm-kyfRig_gF6HCbdbvvZrL8';
  
    Future&lt;List&lt;Branches&gt;&gt; getPlaces(double latitude, double longitude) async {
      var response =
          await http.get('https://que-api.herokuapp.com/branches');
      var json = convert.jsonDecode(response.body);
      var jsonResults = json['data']['branches'] as List;
      return jsonResults.map((place) =&gt; Branches.fromJson(place)).toList();
    }
  }
  </code></pre>