Dart/Flutter 不使用 Inkwell 和手势检测器更改页面

Posted

技术标签:

【中文标题】Dart/Flutter 不使用 Inkwell 和手势检测器更改页面【英文标题】:Dart/Flutter not changing page with Inkwell and Gesture detector 【发布时间】:2021-02-23 22:58:16 【问题描述】:

我正在尝试使用 Inkwell 或手势检测器导航到第 2 页,但它显示“未定义名称‘上下文’”。希望有人能帮忙! :)) 它是一个谷歌地图堆栈容器和顶部的其他容器组。当点击顶部的容器时,它会重定向到 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);


【问题讨论】:

【参考方案1】:

您需要将 BuildContexti 发送到函数。没有看到正确的上下文。同样,您需要将其添加到顶部。无论您在哪里调用,都可以设置上下文。

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

【讨论】:

是的。我忘了:)

以上是关于Dart/Flutter 不使用 Inkwell 和手势检测器更改页面的主要内容,如果未能解决你的问题,请参考以下文章

如何使用dart / flutter在不同类上使用变量

错误 Dart/Flutter: 'context != null': 不正确

Dart/Flutter - 回调函数的收益

Dart/Flutter:快速检查 404 链接列表

识别二维列表是不是包含 Dart/Flutter 中的列表

Dart/Flutter POST 请求和流响应