Search code examples
flutterdartwidgetcontainersgesturedetector

Dart/Flutter not changing page with Inkwell and Gesture detector


I am trying to use Inkwell or Gesture detector to navigate to page 2, but it is saying "Undefined name 'context'". Hope someone can help! :)) It is a google maps stack container and other group of containers on the top. When click on the containers on top, it redirects to the 2page.

Main.dart:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geolocator/geolocator.dart';
import 'woocommerce/woocommerce_api.dart';

void main() {
  runApp(Page1());
}

class Page1 extends StatelessWidget {

  //********************************** GOOGLE MAPS *****************************************

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MapView(),
    );
  }
}

class MapView extends StatefulWidget {
  @override
  _MapViewState createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {

  CameraPosition _initialLocation = CameraPosition(target: LatLng(0.0, 0.0));
  GoogleMapController mapController;

  final Geolocator _geolocator = Geolocator();
  Position _currentPosition;

  @override
  void initState() {
    super.initState();
    _getCurrentLocation();
  }
  _getCurrentLocation() async {
    await _geolocator
        .getCurrentPosition(desiredAccuracy: LocationAccuracy.high)
        .then((Position position) async {
      setState(() {
        // Store the position in the variable
        _currentPosition = position;

        print('CURRENT POS: $_currentPosition');

        // For moving the camera to current location
        mapController.animateCamera(
          CameraUpdate.newCameraPosition(
            CameraPosition(
              target: LatLng(position.latitude, position.longitude),
              zoom: 13.0,
            ),
          ),
        );
      });
    }).catchError((e) {
      print(e);
    });
  }

  @override
  Widget build(BuildContext context) {

    // Determining the screen width & height
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;


    //********************************** GOOGLE MAPS SCREEN **********************************
    return Container(
      height: height,
      width: width,
      child: Scaffold(
        body: Stack(
          children: <Widget>[

            GoogleMap(
              initialCameraPosition: _initialLocation,
              myLocationEnabled: true,
              myLocationButtonEnabled: false,
              mapType: MapType.normal,
              zoomGesturesEnabled: true,
              zoomControlsEnabled: false,
              onMapCreated: (GoogleMapController controller) {
                mapController = controller;
              },
            ),

            ClipOval(
              child: Material(
                color: Color(0xffeb5c68), // button color
                child: InkWell(
                  splashColor: Color(0xffda1b2b), // inkwell color
                  child: SizedBox(
                    width: 56,
                    height: 56,
                    child: Icon(Icons.my_location),
                  ),
                  onTap: () {
                    mapController.animateCamera(
                      CameraUpdate.newCameraPosition(
                        CameraPosition(
                          target: LatLng(
                            _currentPosition.latitude,
                            _currentPosition.longitude,
                          ),
                          zoom: 13.0,
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),


            //********************************** ORDERS **********************************

            Container(
              padding: EdgeInsets.only(top: 550, bottom: 50),
              child: ListView(
                padding: EdgeInsets.only(left: 20),
                children: getTechniciansInArea(),
                scrollDirection: Axis.horizontal,
              ),
            ),
          ],
        )
      ),
    );
  }

  List<Technician> getTechies() {
    List<Technician> techies = [];
    //For esting...
    // for (int i = 0; i < 10; i++) {

      //Technician myTechy = Technician(name:'Apotheken', phoneNum: 'Address store');
      Technician myTechy = Technician("Store name test", "Address store ", "Address costumer", 529.3, 4, "Available", "fdfd");

      techies.add(myTechy);
    //}
    return techies;
  }

  List<Widget> getTechniciansInArea() {
    List<Technician> techies2 = getTechies();
    List<Widget> cards = [];
    for (Technician techy in techies2) {
      cards.add(technicianCard(techy));
    }
    return cards;
  }
}

Widget technicianCard(Technician technician) {
  return
    InkWell( // when click...
     child:
        Container(
          padding: EdgeInsets.all(10),
          margin: EdgeInsets.only(right: 20),
          width: 180,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: Colors.white,
            boxShadow: [
               BoxShadow(
                color: Colors.grey,
                blurRadius: 0.5,
              ),],
          ),
          child:
          Column(
           crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[

              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                    SizedBox(height: 5,),
                     Text(technician.name, style: TextStyle(fontSize: 19,fontWeight: FontWeight.bold), textAlign: TextAlign.center),
                       SizedBox(height: 10,),
                        Text("AS: " + technician.phoneNum, style: TextStyle(fontSize: 15)),
                         SizedBox(height: 10,),
                          Text("AC: " + technician.address, style: TextStyle(fontSize: 15)),
                           SizedBox(height: 30,),
                ],
              ),

              GestureDetector(
                child:
                          Container(
                            alignment: Alignment.bottomCenter,
                          width: 120.0,
                          height: 40.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                            color: Color(0xffeb5c68),
                          ),
                              child:
                              Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[


                                Text("REQUEST", textAlign: TextAlign.center,style: TextStyle(color: Colors.white),),
                              ]
                                )
                          ),
                  onLongPress: (){

              Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Page2()),
                );
              },
              )
                  ]
              )
              ),
       onTap: () {

         Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Page2()),
                );
       }
        );
    }

    //********************************** PAGE 2 **********************************
class Page2 extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Your orders"),
      ),
    );
  }

Woocommerce_api.dart:

class Technician {
  String name;
  String phoneNum;
  String address;
  double rate;
  String status;
  int rating;
  String occupation;

  Technician(this.name, this.phoneNum, this.address, this.rate, this.rating, this.status, this.occupation);
  //Technician({this.name, this.phoneNum, this.address, this.rate, this.rating, this.status, this.occupation});

}

Solution

  • You need to send BuildContexti to function. does not see the correct context. likewise, you need to add it to the top. Set the context no matter where you called.

    Widget technicianCard(Technician technician, BuildContext context)//add here
     {
          .....
          ...
          ..
        }