I'm trying to make a card clickable and move to another page 'ForecastWeather' once clicked.. I'm using Inkwell to make a card clickable but then nothing happens.. what am I doing wrong? I need to make a card clickable and move to the forecastweather page. The error message says

"Another exception was thrown: Navigator operation requested with a context that does not include a Navigator" What does it mean? and what am I doing wrong?

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:forecast/forecast_weather.dart';
import 'package:forecast/models/weather_data.dart';
import 'package:forecast/widgets/second_tab.dart';
import 'package:forecast/widgets/weather.dart';
import 'package:http/http.dart' as http;

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  WeatherData weatherData = WeatherData();

  bool isLoading = false;

  @override
  void initState() {
    super.initState();

    loadWeather();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Weather App',
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            backgroundColor: Colors.white,
            bottom: const TabBar(tabs: [
              Tab(
                icon: FaIcon(
                  FontAwesomeIcons.solidSun,
                  color: Colors.orange,
                ),
              ),
              Tab(
                  icon: Icon(
                Icons.favorite,
                color: Colors.pink,
              )),
            ]),
          ),
          body: TabBarView(
            children: [
              InkWell(
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => const ForecastWeather(),
                    ),
                  );
                },
                child: Card(
                  child: Weather(weather: weatherData),
                ),
              ),
              SecondTab()
            ],
          ),
        ),
      ),
    );
  }

  loadWeather() async {
    setState(() {
      isLoading = true;
    });

    String url =
        'https://api.openweathermap.org/data/2.5/forecast?q=Munich&units=metric&appid=API';

    http.Response response = await http.get(Uri.parse(url));

    if (response.statusCode == 200 && response.statusCode == 200) {
      return setState(() {
        weatherData = WeatherData.fromJson(jsonDecode(response.body));
      });
    }
  }
}

CodePudding user response：

You are doing correct but your Navigation method is wrong. You need to use Navigator to navigate between screens. Just change your code like below to Navigate to another screen :

InkWell(
        onTap: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context)=>LoginScreen()));
        },
        child: Card(
          child: Weather(weather: weatherData),
        ),
      )

To deal with the context error you need to wrap your Scaffold into a Builder that will provide a context to it's child widgets

Builder(
          builder: (context) {
            return Scaffold(
              backgroundColor: Colors.white,
              appBar: AppBar(
                backgroundColor: Colors.white,
                bottom: const TabBar(tabs: [
                  Tab(
                    icon: FaIcon(
                      FontAwesomeIcons.solidSun,
                      color: Colors.orange,
                    ),
                  ),
                  Tab(
                      icon: Icon(
                        Icons.favorite,
                        color: Colors.pink,
                      )),
                ]),
              ),
              body: TabBarView(
                children: [
                  InkWell(
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => const ABC(),
                        ),
                      );
                    },
                    child: Card(
                      child: Weather(weather: weatherData),
                    ),
                  ),
                  // SecondTab()
                ],
              ),
            );
          }
        )

CodePudding user response：

You can navigate by wrapping your widget with Inkwell or GestureDetector.

InkWell(
        onTap: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context)=>DashBoardScreen(),),);
        },
        child: Card(
          child:Text('Hello! Navigation using Inkwell.'),
        ),
      )

 GestureDetector(
        onTap: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context)=>DashBoardScreen(),),);
        },
        child: Card(
          child:Text('Hello! Navigation using GestureDetector.'),
        ),
      )